Tables to CSS conversion problems

Hi,

I'm trying to convert an existing table based navigation to CSS,
however i'm having problems mimicking the way the original table
behaves.

My original HTML is this : -

<table class="top_nav">
<tbody><tr>
<td class="spacer"></td>
<td><a href="#">home</a></td>
<td><a href="#">your<br>item 1</a></td>
<td><a href="#>item 2</a></td>
<td><a href="#">item 3</a></td>
<td><a href="#">item 4</a></td>
<td><a href="#">test<br>item 5</a></td>
<td class="spacer"></td>
</tr>
</tbody></table>

My new HTML and CSS that i've attempted is this : -

#navlist li
{
display: inline;
list-style-type: none;
padding-right:5px;
}
div.top_nav li { color: #000000; font-weight: bold;
width: 10%; text-align: center;
vertical-align: middle; }
div.top_nav li.spacer { width: 5%; }
div.top_nav a { color: #000000; text-decoration: none; padding: 1px
5px 2px 5px;}
div.top_nav a:hover { color: #FFFFFF; text-decoration: none; }


<div class="top_nav mainLayout">
<ul id="navlist">
<li><a href="#">home</a></li>
<li><a href="#">your<br>item 1</a></li>
<li><a href="#">item 2</a></li>
<li><a href="#">item 3</a></li>
<li><a href="#">item 4</a></li>
<li><a href="#">test<br>item 5</a></li>
<ul>
</div>

I've tried using the word-wrap: break-word; and setting the width of
the li's but this isn't working, i presume because they're set to
display inline rather than block.

Basically i need a way to split the longer text items into two lines as
it was in the original menu system.

Would anyone be able to help or has any suggestions?

Thanks in advance,

Ian

Ian N wrote:

I'm trying to convert an existing table based navigation to CSS,
however i'm having problems mimicking the way the original table
behaves.

This is one of those areas where the transition from table-layout to

HTML+CSS does not work very well. Tables and table cells have different
properties than other elements. Sometimes you just can't get there.

div class="top_nav mainLayout"
ul id="navlist"
<li><a href="#">home</a></li
<li><a href="#">your<br>item 1</a></li
<li><a href="#">item 2</a></li
<li><a href="#">item 3</a></li
<li><a href="#">item 4</a></li
<li><a href="#">test<br>item 5</a></li
ul
/div

[...] i presume because they're set to
display inline rather than block.

True.

One way to do this is #navlist li {display:table-cell;}. But since IE
does not support that, it is not really an option.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)