• Geek Answers Handbook

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

    I have a simple menu encoded this way

    <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 enter image description here

    Small dots between each menu item are created using: after the pseudo-element. Eveything works fine, but I also need submenus that will be nested lists.

    The problem is that when I add a line break to a 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 and Chrome (but not in Firefox) ... enter image description here

    It seems to me that webkit treats spaces 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 also tried setting white-space: normal/nowrap to the ul, li and: after elements that do not affect anything.

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

    UPDATE

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

    +7
    source share
    1 answer

    The problem is that line break is a space, which is why floating content falls on the line. The problem can be reproduced by adding a single space between </a> and </li> . Try making the inserted content display:inline-block instead of floating.

     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, the inline block fixes this, but it's not quite that simple since the inline block has some uneven 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; }
    +5
    source

    More articles:


    All Articles