1

When I hover over the navigation links, the hover changes the background color and link color however there is a tiny sliver of a space between the right border and hover fill. How can have the hover fill reach the border? I have tried playing around with padding etc and moving the border to another element but nothing is working. I'm sure it's something so small.

HTML

<nav id="bottomNavWrap">
<nav id="bottomNav" class="fl">
   <ul>
      <li><a href="#">汽车首页</a></li>
      <li><a href="#">购车必读</a></li>
      <li><a href="#">新车导购</a></li>
      <li><a href="#">新车排行榜</a></li>
      <li><a href="#">最新促销</a></li>
      <li><a href="#">维修问答</a></li>
      <li class="last"><a href="#">车行搜索</a></li>
   </ul>
</nav>

CSS

#bottomNavWrap {
    height: 34px;
    width: 900px;
    margin-left: auto;
    margin-right: auto;
}

#bottomNav {
    display: inline-block;
}

#bottomNav ul {
    color: #fff;
    font-size: 120%;
    font-weight: 500;
    text-align: left;
}

#bottomNav ul li {
    display: inline;
}

#bottomNav li a {
    border-left: solid 1px #454b95;
    width: 80px;
    padding-bottom: 7px;
    padding-top: 7px;
    padding-left: 10px;
    padding-right: 10px;
    text-decoration: none;
    color: #fff;
}

#bottomNav li a:hover {
    color: #000;
    background-color: #FFF;
}

#bottomNav li.last a {
    border-right: solid 1px #454b95;
}
Josh Crozier
  • 233,099
  • 56
  • 391
  • 304
saraht
  • 39
  • 1
  • 1
  • 8
  • Typical characteristic of `inline` elements. One solution is to remove the whitespace in the markup - see this [updated example](http://jsfiddle.net/Ue6J9/) See [this SO answer](http://stackoverflow.com/a/19038859/2680216) – Josh Crozier Jan 21 '14 at 20:39
  • You would expect the whitespace outside the `li`s to be ignored, since there shouldn't be any content anyway. But it seems JoshS is right. – GolezTrol Jan 21 '14 at 20:47
  • 1
    @joshC you are right! I think this has happened to me before and it was the last thing I would ever expect. Thanks for the reminder!! :) – saraht Jan 21 '14 at 20:54

1 Answers1

0

There are several methods to removing the white space. Some suggest having literally no white space in the code as follows:

<ul><li>First Link</li><li>Second Link</li></ul>

However, this may become difficult to read for the coder. Another suggestion is to use HTML comments between code gaps like so:

<ul>
    <li></li><!--
    --><li></li><!--
    --><li></li><!--
    --><li></li>
</ul>

Another alternative is to put the closing tag's final character right before the next tag, so that the white space is inside a tag:

<ul>
    <li></li
    ><li></li
    ><li></li
    ><li></li>
</ul>

While these two methods are easier on the eyes than the first, coders who like to see everything neat would also have a problem with this. I am one such coder, and I prefer to use another method.

Add the following to your CSS:

*{font-size:small;}
.fl>ul{font-size:0;}

The first will set literally every single item's font-size attribute to small, and the second will set the font-size attribute of the <ul> within the .fl class to 0, but the > selector makes sure that only the ul, and none of its children (ie, the <li>) get affected by this. At a font size of 0, you don't see the white space on the page at all, and the gaps are removed.

You can play around with this method to get it the way you want it, but this is the quickest method to do it.

Hiigaran
  • 829
  • 10
  • 28