CSS/HTML - Horizonal list - удалить этот тайный разрыв между элементами списка? (См. Рис.)

У меня возникают проблемы с панелью меню, которую я создаю. Кажется, что есть пробел между пунктами меню и моей жизнью, я не понимаю, в чем причина этого.

В качестве описания скриншота ниже первая ссылка (home) - это текущая страница, и она подсвечивается. Вторая ссылка (стр. 1) - эффект наведения, пока мой курсор находится над этим элементом. Вы заметите, что между этими двумя элементами есть пробел (что на самом деле вызывает это?!), который показывает цвет фона div, который содержит меню.

Возможно, стоит отметить, что я использую последнюю версию firefox.

Вот скриншот моей проблемы:

Вот список html для списка:

<div class="nav">
    <ul>
        <li class="selectedPage"><a href="#">HOME</a></li>
        <li><a href="#">PAGE1</a></li>
        <li><a href="#">PAGE2</a></li>
    </ul>
<!-- end .nav --></div>

И вот css:

div.nav {
    width: 750px;
    background: #52b5f0; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI1JSIgc3RvcC1jb2xvcj0iIzUyYjVmMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQ5JSIgc3RvcC1jb2xvcj0iIzM2OTlkMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk1JSIgc3RvcC1jb2xvcj0iIzE5NjM4YSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
    background: -moz-linear-gradient(top,  #52b5f0 5%, #3699d0 49%, #19638a 95%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(5%,#52b5f0), color-stop(49%,#3699d0), color-stop(95%,#19638a)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #52b5f0 5%,#3699d0 49%,#19638a 95%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #52b5f0 5%,#3699d0 49%,#19638a 95%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #52b5f0 5%,#3699d0 49%,#19638a 95%); /* IE10+ */
    background: linear-gradient(to bottom,  #52b5f0 5%,#3699d0 49%,#19638a 95%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#52b5f0', endColorstr='#19638a',GradientType=0 ); /* IE6-8 */
}

div.nav ul {
    list-style: none; /* this removes the list marker */
}

div.nav li {
    display: inline-block;
}

div.nav li.selectedPage {
    background: #41ff5f;
}

div.nav li.selectedPage a {
    color: #10653b;
}

div.nav a, div.nav a:visited {
    padding: 5px;
    display: block;
    width: 120px;
    text-decoration: none;
    color: #FFFFFF;
    font-weight: bold;
    text-align: center;
}

div.nav a:hover, div.nav a:active, div.nav a:focus {
    background: #41ff5f;
    color: #10653b;
}

Если бы кто-нибудь мог предоставить мне некоторый вклад в отношении этого, мы будем очень благодарны!

Любые предложения, советы, поддержка или отзывы приветствуются! Большое вам спасибо!

ИЗМЕНИТЬ:

У меня есть это на месте раньше в css:

ul, li {
    padding: 0;  
    margin: 0;
}

EDIT2:

Ссылка JsFiddle:

http://jsfiddle.net/Gbg7J/

Ответ 1

Разрыв возникает из-за вкладок и строк, разделяющих ваши элементы списка; встроенные элементы блока (или любой элемент, который участвует в контексте встроенного форматирования) чувствительны к их структуре в вашем HTML.

Вы можете полностью удалить пробелы:

 <ul>
    <li class="selectedPage"><a href="#">HOME</a></li><li><a href="#">PAGE1</a></li<li><a href="#">PAGE2</a></li>
</ul>

Использовать комментарии:

<div class="nav">
    <ul>
        <li class="selectedPage"><a href="#">HOME</a></li><!--
        --><li><a href="#">PAGE1</a></li><!--
        --><li><a href="#">PAGE2</a></li><!--
    --></ul>
<!-- end .nav --></div>

Оставьте HTML один и используйте float вместо (и очистите контейнер):

.nav ul li {
    float: left;
  /*display: inline-block;*/
}

.nav ul {
    overflow: hidden;
}

Или установите font-size: 0; в родительском и затем reset it на li

.nav ul {
    font-size: 0;
}

.nav li {
   display: inline-block;
   font-size: 16px;
}

^{Кроме того, взгляните на оба: Как удалить пространство между элементами встроенного блока? и http://css-tricks.com/fighting-the-space-between-inline-block-elements/}