Undesired space between list elements - html

Question

The problem is over, I'm now going on with my website development, thanks.
The problem is on my website (I'm viewing it in Chrome): http://albertorestifo.com/
Between the elements of the navigation menu, there is a undesired space between the border and the next list element. It is visible when you hover on "gallery".
Here the HTML:
<nav>
<ul>
<li class='active'>Home</li>
<li>Gallery</li>
<li>About Me</li>
<li>Contact Me</li>
</ul>
</nav>
And here the CSS:
header nav, header nav ul, header nav ul li, header nav ul li a { height: 100%; } header nav ul li a { display: block; }
header nav ul li {
display: inline-block;
line-height: 150px;
padding: 0 20px;
border-left: 1px solid #2d2d2d;
}
header nav ul li:last-child { border-right: 1px solid #2d2d2d; }
header nav ul li:hover, header nav ul li.active {
background-color: #0072bc;
}
header nav ul li a {
text-decoration: none;
color: white;
font-size: 1em;
font-weight: 700;
text-transform: uppercase;
}
Plus a small reset:
ul, ul li { margin: 0; padding: 0; }
I point out that I'm using Normalize.css, so every browser should display it.
I have no idea how to fix this, it never happened to me in the past!
demo:http://jsfiddle.net/EaAvx/

Answer 1

It is because your list-items are inline-block elements.
Use any of the following solutions:
Change HTML to this: removing the white space in your markup..
<li class='active'>Home</li><li>Gallery</li><li>About Me</li><li>Contact Me</li>
or..
<li class='active'>Home</li><!--
--><li>Gallery</li><!--
--><li>About Me</li><!--
--><li>Contact Me</li>
As an alternative to removing the white space, you can always add a negative margin:
header nav ul li {
margin:0px -2px;
}
or set the font-size to 0px on the parent..
Note, there is still a 1px gap because of this in your CSS:
border-left: 1px solid #2d2d2d;
... if you wanted to, you could avoid all of these 'hacks' and just change the element from inline-block to a floating element.

Answer 2

That's because you have li as inline-block.
Set this:
nav > ul {
font-size:0;
}
nav li {
font-size:16px;
}
And done.

Answer 3

You can remove all whitespaces, compress codes and that works pretty well. Even cross browser.

Answer 4

You could fix that like this, here's a FIDDLE
header nav ul li {
float: left;
list-style: none;
line-height: 150px;
padding: 0 20px;
border-left: 1px solid #2d2d2d;
}

Answer 5

use all selector to set padding and margin then use box-sizing
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding:0;
margin:0;
}
Demo: http://jsfiddle.net/EaAvx/2/