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

Question

I have a simple menu coded up like this
<ul id="main-menu" class="container">
<li>About Us</li>
<li>Home</li>
<li>Villas & Yachts</li>
<li>Islands</li>
<li>Gallery</li>
<li>Blog</li>
<li>Get In Touch</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>About Us</li>
<li>Home</li>
<li>Villas & Yachts
<!-- LINE BREAK -->
</li>
<li>Islands
<!-- LINE BREAK -->
</li>
<li>Gallery</li>
<li>Blog</li>
<li>Get In Touch</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;
}