Why is this :after element being affected by line breaks?

Question

I have a simple menu coded up like this

<ul id="main-menu" class="container">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Villas & Yachts</a></li>
    <li><a href="#">Islands</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Get In Touch</a></li>       
 </ul>

which looks like this

The little dots in-between each menu item are created using the :after pseudo element. Eveything is working fine, but I also need sub menus, which will be nested lists.

The problem is, when i add a line break to the menu like this

<ul id="main-menu" class="container">
    <li><a href="#">About Us</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Villas & Yachts</a>
    <!-- LINE BREAK -->
    </li>
    <li><a href="#">Islands</a>
    <!-- LINE BREAK -->
    </li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Get In Touch</a></li>       
 </ul>

I get this result in Safari & Chrome (But not Firefox)...

It seems to me as though webkit is treating the whitespace as 'pre'. The CSS for the :after element looks like this

ul#main-menu li:after
{
    content: "\00b7";
    width: 61px;
    float: right;
    text-align: center;
    border: rgba(225,225,225,0.25) 1px solid;
}

I've also tried setting white-space: normal/nowrap on the ul, li and :after elements which doesn't affect anything.

Can anyone see where I'm going wrong, or is this a problem with Webkit/Firefox?

UPDATE

I've created a demo at http://jsfiddle.net/zmVbH/

Answer 1

The issue is that the line break is white space which makes the floated content drop a line. The issue can be reproduced by adding a single space between the </a> and </li>. Try making the inserted content display:inline-block instead of floated.

ul#main-menu li:after
{
    content: "\00b7";
    width: 61px;
    display:inline-block;
    text-align: center;
    border: rgba(0,0,0,0.25) 1px solid;
    white-space: normal;        
}

Updated JSFiddle.

UPDATE BY OP

Yup, inline-block fixes this, but it's not quite that simple since inline-block has some patchy browser support.

ul#main-menu li:after
{
    content: "\00b7";
    width: 61px;
    float: right;
    text-align: center;
    border: rgba(225,225,225,0.25) 1px solid;

    /* FIX */
    display:-moz-inline-stack; /* For older versions of Firefox */ 
    display:inline-block; /* Anything that supports inline-block */

    /* IE FIX */
    zoom:1;
    *display:inline; 
}