No replies
chris_sw
Offline
Enthusiast
Leeds, UK
Last seen: 18 years 11 weeks ago
Leeds, UK
Joined: 2004-09-21
Posts: 115
Points: 0

Hello

For a navigation bar, I have a list of links, which I wish to display

ITEM | ITEM | ITEM | ITEM

centred on the screen. My markup is

<ul>
    <li class="first"><a href="#">Home</a></li>
    <li><a href="#">Property Search</a></li>
    <li><a href="#">News</a></li>
    <li><a href="#">Recruitment</a></li>
    <li><a href="#">Contact Us</a></li>
</ul>

and my style is
ul
{
    text-align:center;
}

li
{
    display:inline;
    border-left:1px solid black;
    padding:0 0.5em;
}

li.first
{
    border:0;
}

And all is fine.... except for IE Mac. IE Mac centres the items correctly, but places the borders where the items would have been if they weren't centred. Weirdly, if the items are plain text instead of links, the borders pop back to the correct place. Here is a live demo of this rendering craziness....

http://www.harronhomes.com/border.html

Gah! (Mac IE 5.1)