|  | Posted by BootNic on 06/01/06 21:55 
> "fred.haab@gmail.com" <fred.haab@gmail.com> wrote:> news:1149177394.723897.252920@j55g2000cwa.googlegroups.com....
 >
 > 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*
 [Back to original message] |