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; }
<table>
<tr><td>one</td><td>two</td></tr>
</table>
<ul>
<li>one</li>
<li>two</li>
<ul>
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/
