Anchor bug on IE9, anchor hitbox overlapped
Posted
by
user1456399
on Stack Overflow
See other posts from Stack Overflow
or by user1456399
Published on 2012-09-26T21:00:13Z
Indexed on
2012/09/27
3:37 UTC
Read the original article
Hit count: 365
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...
© Stack Overflow or respective owner
