Re: [css-d] Table-like layout for UL/LI

[David Hucklesby]

On Fri, 17 Aug 2007 18:02:21 -0400, Mark Richards wrote:
> Hi,
> I am trying to simplify the code for an existing site.  We have a button bar 
> that is
> rendered using a table.  I figured, why not switch to UL/LI but the problem I 
> ran into
> is that the browser will automatically resize the table columns to spread 
> them out
> evenly but won't do this for the LI elements.
>
Hi Mark,

Thierry has a solution that seems to be a nice compromise:



Cordially,
David
--


__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/

[css-d] Table-like layout for UL/LI

[Mark Richards]

Hi,
I am trying to simplify the code for an existing site.  We have a
button bar that is rendered using a table.  I figured, why not switch to
UL/LI but the problem I ran into is that the browser will automatically
resize the table columns to spread them out evenly but won't do this for
the LI elements.
 
table { border-collapse: collapse; width: 800px; }
ul { width: 800px; display: block; overflow: auto;}
li { display: block; float: left; }
 

  onetwo

 
 

  one
  two

 
As you can imagine, these two renderings look totally different.  I'd
heard of display: table and managed to recreate a nice table-esque
layout using the UL/LI inside a div, which would suite me perfectly,
except IE doesn't support display: table.  Does anyone have a workaround
where I can re-create the auto-sizing layout of the table without using
the table?  I have worked around the problem so far by simply keeping
the table layout but cleaning up the code, but I'd prefer that smug
feeling of getting rid of the table once and for all.
 
Apologies for not having a live sample as my workplace has no public
webservers that aren't production.
 
Mark
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/