The menu below works just fine in Firefox and Chrome, but in IE9, but hitbox for
the "HOME" anchor is being covered partially by
the list item behind it except for
the actual test, and a single horizontal pixel line at
the top and bottom of
the button.
Can anyone see what I'm missing?
Code to follow:
index.html
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Navigation</title>
<style>
.menu-container {
width:960px;
height:45px;
margin:0 auto;
position:relative;
z-index:2;
background-color: #3d3d3d;
margin-bottom: 20px;
}
.menu-navigation {
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
list-style:none;
padding:0;
margin:0;
text-align: right;
font-size: 0; /* Removes whitespace between <li> */
}
.menu-navigation > li {
display:inline;
margin:0;
border-left:solid 1px #242424;
background-color:transparent;
font-size: 12px;
padding: 15px 0 15px 0;
}
.menu-navigation > li:hover, .menu-navigation > li.current-menu-item {
background-color:#202020;
}
.menu-navigation > li.active,
.menu-navigation > li.active:hover {
background-color:#131313;
}
.menu-navigation > li a {
text-decoration:none;
color:#bbbbbb;
}
.menu-navigation > li a:hover {
color:#efefef;
}
.menu-navigation > li span a {
color:#ffffff;
}
.menu-navigation > li a:focus {
outline:none;
}
.menu-navigation > li.menu-item-parent > span,
.menu-navigation > li > span > a {
text-transform:uppercase;
outline:0;
text-decoration:none;
color:#ffffff;
text-shadow:1px 1px 1px #000000;
line-height: 45px;
display: inline-block;
height: 45px;
padding: 0 20px 0 20px;
}
.menu-navigation > li.menu-item-parent > span {
background:url("../img/down.png") no-repeat right center;
}
.menu-navigation > li.menu-item-parent > span:hover,
.menu-navigation > li > span > a:hover {
cursor:pointer;
}
</style>
</head>
<body>
<div class="menu-container">
<ul class="menu-navigation">
<li><span><a href="#">This is a link</a></span></li>
<li><span><a href="#">This is a link</a></span></li>
<li class="menu-item-parent"><span>Not a link</span></li>
<li class="menu-item-parent"><span>Not a link</span></li>
<li class="menu-item-parent"><span>Not a link</span></li>
</ul>
</div>
</body>
</html>
EDIT:
Alright, I've changed
the code to isolate
the issue, and narrowed down
the problem CSS. Simply adding a background image fixes
the issue.
The code is set up so it styles so
the hit boxes for all
the menu items are
the same regardless if there's a link in them or not to facilitate an "onClick" drop down on those menu items without anchors.
Refer to lines 81 - 86. Remove those lines (just a background image), and
the hit box issue is seen in
the menu items "NOT A LINK" as well. Further,
the act of adding a background image fixes
the hit box issue of "THIS IS A LINK" menu items. Simply add
the following snippet to
the CSS:
.menu-navigation > li > span > a {
background:url("../img/down.png") no-repeat right center;
}
Adding a background image, even if there is no actual image, is changing something with regards to
the hit box... I'm just not sure what...
