Re: center/shrink to fit redux.
- From: "BootNic" <Bootnic@xxxxxxxxxxxxxxxxxx>
- Date: Thu, 01 Jun 2006 21:55:12 GMT
"fred.haab@xxxxxxxxx" <fred.haab@xxxxxxxxx> wrote:
news:1149177394.723897.252920@xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
So I'm anally trying to avoid tables, like all the "good" developers
keep saying I should, but with all my books and searching on the
web, I simply can't figure out a way to center an <ul> without
using a table.
So the "requirement" is that the UL block itself is centered AS A
WHOLE. The actualy content within the block should be left aligned
(the bullets should line up). The title I have above the UL is
pretty short - and should also be left aligned (but I could live
with it centered over the list). So it's something basic like this:
[snip]
The first thing that comes to mind is display:table. Work around would be needed
for IE.
<style type="text/css">
..table{
display:table;
margin:auto;
}
..table p{
margin: 0;
}
ul,li{
margin:0 0 0 5px;
padding:0 0 0 5px;
}
</style>
<div class="table">
<p>List Title:</p>
<ul>
<li>Item 1.</li>
<li>Item two is a lot longer.</li>
<li>Item three is, also.</li>
</ul>
</div>
I can think of a way or two that may work in IE.
If you wish to allow IE to display just a bit different, then you could assign a width
to the table class for IE, the result would be almost the same but will not shrink ,
and could be a real pain if you have several of these on a page because you may
need to play with the width to get the results you want.
<!--[if IE]>
<style type="text/css">
..table{width:10.5em}
</style>
<![endif]-->
The work around I am going to suggest is not likely to be very popular, since it
will not get you away from a table.
<div class="table">
<!--[if IE]>
<table summary="Broken IE layout" style="margin:auto;"><tr><td>
<![endif]-->
<p>List Title:</p>
<ul>
<li>Item 1.</li>
<li>Item two is a lot longer.</li>
<li>Item three is, also.</li>
</ul>
<!--[if IE]>
</tr></td></table>
<![endif]-->
</div>
Another option for IE would be to use an css expression, but that would be
dependent on Jscript.
--
BootNic Thursday, June 01, 2006 5:55 PM
The only thing wrong with immortality is that it tends to go on
forever.
*Herb Caen*
.
- References:
- center/shrink to fit redux.
- From: fred.haab@xxxxxxxxx
- center/shrink to fit redux.
- Prev by Date: Re: center/shrink to fit redux.
- Next by Date: Re: Quick check for ISO-8859-7 Greek
- Previous by thread: Re: center/shrink to fit redux.
- Next by thread: how to align text in a <td>?
- Index(es):
Relevant Pages
|
