css - Pixel appearing when using css ul li display-inline block

Question

The image is pretty self explanatory. I can't get rid of those two pixels at the bottom of only one list element. I've inserted text-decoration:none and list-style-type none in every corner of the css with no results. Reason?

http://s1089.photobucket.com/user/3Joez/media/disp_zps6fe2774c.jpg.html

#rightnav {
float:right;
width:65%;
height:50px;
/*border:2px solid #Df1;*/
}

#rightnav ul {
 margin-left:9.5%;
/*border:1px solid #F30;*/
width:500px;

}

#rightnav ul li {

 display:inline-block;
 font-family:Times New Roman, Times, serif;
 font-size:1.4em;
 margin-left:2%;
 margin-top:1.5%;
 color:#FFF;
 text-decoration:none ;
 list-style:none; 
 list-style-type:none;

}

Answer 1

Pretty sure you have an <a> inside your <li>. Did you change the text decoration on that? Changing it on the <li> will probably not change the inner style because the UA CSS likely ties the underline style to the <a> tag.

#rightnav ul li a {
  text-decoration:none;
}