Hey there! I've noticed that two of my menu items are overlapping in IE8 (please see the screenshot below - specifically the "About Us" and "Press" items, with a white background between them) on my website http://goo.gl/34oQ8. Any insights on why this might be happening?
CSS Code
#nav
{
right:2%;
list-style:none;
position:fixed;
/* float:right; */
top:30px;
z-index:1000;
/* width:520px; */
}
#nav > li {
display: inline-block;
/* dirty hack for IE7 */
*display: inline;
*zoom: 1;
}
#nav a
{
font:12px 'Open Sans', "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight:600;
letter-spacing:1px;
float:left;
top:30px;
display:inline-block;
font-size:11px;
margin-left:5px;
margin-right:5px;
padding-left:15px;
padding-right:15px;
text-decoration:none;
height:24px;
color:#666;
line-height:24px;
text-align:center;
box-shadow:1px 1px 2px rgba(0,0,0,0.2);
/* background:rgba(255,255,255,0.9); removed not ie8 compatible */
text-transform:uppercase;
background: white;
opacity: 0.8;
filter: Alpha(opacity='80');
}
#nav a:hover
{
background:#dedede;
}
#nav .current a
{
background:#666;
color:#ededed;
}
HTML Code
<ul id="nav">
<li class="current"><a href="#presentation">Home</a></li>
<li><a href="#equipe">Team</a></li>
<li><a href="#plan-activite">About us</a></li>
<li><a href="#medias">Press</a></li>
<li><a href="#inline" class="modalbox">Contact</a></li>
</ul>