How can I get rid of mysterious extra space after
in simple drop-down menu code?

Question

I have a simple CSS drop-down menu and for some reason, the browser (Mac Chrome + Firefox) is adding extra space after the menu option where I have a (hidden) sub-menu.

Here's the code:

<ul>
    <li>Option Zero</li>
    <li>Option One Is Longer</li>
    <li class='current'>Option Two
        <ul class='sub-menu'>
            <li>Sub One</li>
        </ul>
    </li>
    <li>Option Three Is Not the Best</li>
</ul>

and markup:

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
}

body {background:#ccc;font-size:18px;font-family:Arial,sans-serif;font-weight:bold;}

ul {list-style:none;width:100%;background:green;height:50px;
    padding:10px 10px 0 10px;margin:0px;}
li {float:left;margin-top:10px;}
li:after {content:"|";margin:0 8px;}
.sub-menu {display:none;}

and jsfiddle: http://jsfiddle.net/pnoeric/hjVWQ/2/

Note the extra space after "Option Two," before the divider. Where's that extra space coming from, and how can I get rid of it?

score 3 · Accepted Answer · answered Aug 28 '13 at 02:04

3

Try this instead..

<ul>
    <li>Option Zero</li>
    <li>Option One Is Longer</li>
    <li class='current'>Option Two<ul class='sub-menu'><li>Sub One</li></ul></li>
    <li>Option Three Is Not the Best</li>
</ul>

Demo

answered Aug 28 '13 at 02:04

Josh Crozier

233,099
56
391
304

Why is the browser paying attention to whitespace for formatting? This is very IE6 of it... ;-) – Eric Aug 28 '13 at 02:07
Super weird and crappy-- my menu structure is generated by Wordpress, so I'm having to modify the WP internals to manually remove the tabs and newlines it inserts into the output. That's not a big deal... until I update to the next version of Wordpress... and it promptly breaks my layout by reverting back to the extra space. :-( Anyhow, thank you for the answer. – Eric Aug 28 '13 at 02:11
I hear ya, though technically, this is really a browser problem. (Seriously, I thought interpreting whitespace was finally a thing of the past.) The good news is, it looks like Wordpress has a hook that I can tap into, giving me a chance to manually filter out the whitespace in the menu code right before it's output, so I don't have to be tweaking the WP core code. – Eric Aug 28 '13 at 02:34

score 3 · Answer 2 · answered Aug 28 '13 at 02:04

3

Try this:

<li class='current'>Option Two<ul class='sub-menu'><li>Sub One</li></ul></li>

I forked your jsFiddle: http://jsfiddle.net/5V7RC/

EDIT:

Reason: For each uninterrupted string of spaces/new lines in your code, a space will show up in your rendered HTML. Because you had nested elements in that particular li, more spaces were rendered.

answered Aug 28 '13 at 02:04

zigdawgydawg

2,046
13
10

@JoshC has it exactly right...and is slightly faster. – zigdawgydawg Aug 28 '13 at 02:07

score 2 · Answer 3 · answered Aug 28 '13 at 02:04

It is appearing because of the extra whitespace you are adding on that li. Remove all the spaces/ indentaions to get rid of the extra space.

Although its not as nice to read, it works.

<li class='current'>Option Two<ul class='sub-menu'><li>Sub One</li></ul></li>

http://jsfiddle.net/hjVWQ/4/

How can I get rid of mysterious extra space after in simple drop-down menu code?

3 Answers3

How can I get rid of mysterious extra space after
in simple drop-down menu code?