I have come across a unique problem with z-indexes that I have never experienced before. To address one common speculation right away: the positioning for each element with a z-index is already set properly, so that's not the issue. Despite my efforts to rearrange elements, I am facing an obstacle involving two fixed elements - the website's heading text and a div containing a list of navigation items.
You can view the problem here (ensure you're on a screen width larger than 1000px).
For some reason, I cannot figure out why the first two navigation items ("Home" and "About") do not fully register mouseover events. It appears that their functionality is obstructed by the descender in the header above them.
While I attempted to use jsFiddle to demonstrate the issue, it was challenging due to the custom font I used, which may not be compatible with jsFiddle. Moreover, this issue persists across various browsers, not just limited to IE. Apologies for the lack of clarity, but perhaps Firebug could shed some light on the matter.
To make troubleshooting easier, I will share the HTML/CSS code below:
HTML:
<div id="header">
<h1 id="logo"><a href="#">Page Title</a></h1>
<h2 id="tagline"><a href="#">Here's a tagline</a></h2>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Resume</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
CSS:
#logo, #tagline { font-weight: normal; font-family: 'Pacifico', cursive; font-size: 60px; display: inline; margin-right: 20px; position: relative; z-index: 4; }
#logo a, #tagline a { color: #FFF; text-shadow: 2px 2px 0px #f7be82; -webkit-text-shadow: 2px 2px 0px #f7be82; -moz-text-shadow: 2px 2px 0px #f3;}
}
.pageTitle { text-align: center; font-size: 48px; }
#header {
position: fixed;
z-index: 3;
width: 960px;
background: #9cddc8;
}
#nav {
position: fixed;
z-index: 2;
width: 100%;
height: 50px;
top: 81px;
left: 0px;
background: #f7be82;
border-bottom: 2px solid #efb87e;
}
#nav ul { width: 900px; display: block; margin: 0 auto; overflow: hidden; }
#nav ul li {
position: relative;
z-index: 5;
float: left;
line-height: 50px;
width: 16.66%;
line-height: 45px;
text-align: center;
}
#nav ul li a {
font-family: 'Pacifico', cursive;
font-size: 24px;
color: #FFF;
text-shadow: 1px 1px 0px #9cddc8; -webkit-text-shadow: 1px 1px 0px #9bd;c
}
If anyone has insights or suggestions regarding this issue, they would be greatly appreciated! Thank you!