CSS menu background

Question

any ide what is it? The white box between two menu item.(circled with red) enter image description here

CSS:

 #navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    line-height: 50px;
}

#navigation a {
    text-decoration: none;
    display: inline-block;
    padding-bottom: 15px;
    color: #383838;
    webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.4s;
}

#navigation a:hover {
    color: #6A98DD;
}

#navigation li {
    display: inline-block;
    padding-left: 9px;
    padding-right: 10px;
    color: #383838;
    background: #EEE;
    webkit-transition: color 0.4s;
    -moz-transition: color 0.4s;
    -ms-transition: color 0.4s;
    -o-transition: color 0.4s;
    transition: color 0.6s;
    webkit-transition: background 0.4s;
    -moz-transition: background 0.4s;
    -ms-transition: background 0.4s;
    -o-transition: background 0.4s;
    transition: background 0.4s;
}

#navigation li:hover {
    padding-left: 8px;
    color: #6A98DD;
    display: inline-block;
    background: #EEE;
    border-left: 1px solid #AAA;
}

Comment out the white space between your li - it will show up as a space as you are using `display-inline-block;` — Pete, Aug 13 '14 at 09:39
possible duplicate of [Extra Space Between inline-block DIV Elements](http://stackoverflow.com/questions/20335808/extra-space-between-inline-block-div-elements) — Pete, Aug 13 '14 at 09:40

score 5 · Answer 1 · answered Aug 13 '14 at 09:39

It is because your li are set todisplay: inline-block; - inline elements are effectively treated like textual nodes, so if each li is on a newline in your HTML this is interpreted as a space.

There are a number of ways to prevent this- one is to set font-size:0; on your ul then font-size:14px; on your li

Alternatively, you can float:left your li and set overflow:hidden on your ul

Or, you can remove the newline in your HTML- putting all your li on a single line.

See here for some other techniques and information, and here

score 0 · Answer 2 · answered Aug 13 '14 at 09:41

0

Inline block display mode is the culprit.

#navigation li {
    display: inline-block;
    ...
}

Instead, you can make this way, with the above code, add this in the end:

#navigation {
    overflow: hidden;
}
#navigation li {
    float: left;
}

answered Aug 13 '14 at 09:41

Praveen Kumar Purushothaman

164,888
24
203
252

score 0 · Answer 3 · answered Aug 13 '14 at 09:42

0

Float your li's left like so;

#navigation li {
    float: left;
}

answered Aug 13 '14 at 09:42

Jay

772
1
6
17

KeySee · Answer 4 · 2014-08-13T09:55:58.443

the solution is:

Set float left on elements. Or...

Set font-size: 0 on parent and reset font size on children font-size: 1.

That happens becouse of white space between elements. another solution is to use some syntax that prevents spaces, like so:

<div id="navigation">
    <li><a href="#">Item 01</a></li><li>
    <a href="#">Item 02</a></li><li>
    <a href="#">Item 03</a></li><li>
    <a href="#">Item 04</a></li><li>
    <a href="#">Item 05</a></li>
</div>

Here an example:

1) set float left on childern: http://jsfiddle.net/27t5ogsj/2/

2) font-size method (simply css): http://jsfiddle.net/27t5ogsj/

3) html pre-format method: http://jsfiddle.net/27t5ogsj/1/

Personally i like the second method becouse then i can center horizontally the menu with an simple text-align: center on parent! http://jsfiddle.net/27t5ogsj/3/

CSS menu background

4 Answers4