This is quite an interesting issue I'm having with z-indexes that I've never encountered before. Let me go ahead and answer one of your first thoughts you might be having: I've already set the positioning I need for each element I have a z-index on, it's not that. I've tried reordering things as much as possible, but basically what I have is two fixed elements, one is the website's heading text, the next is a div containing an unordered list of navigation items (each floated left and given a percentage width).
Here's the location of the problem (make sure you're viewing at a width larger than 1000px).
For the life of me, I've not been able to pinpoint why exactly the first two navigation items ("Home" and "About") actually don't mouseover entirely. It seems as though their mouseover functionality is cut off by the descender in the heading above it.
I would create a jsFiddle of the issue, and in fact I did to try and point out my problem, but I am using a custom font for this, which to my knowledge wouldn't work in jsFiddle. Keep in mind, the issue is cross-browser, not IE-specific. Sorry I'm not much help otherwise, but I guess Firebug is your friend.
I will post this HTML/CSS code however, seeing as it might be easier than viewing in Firebug...
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 #f7be82; -o-text-shadow: 2px 2px 0px #f7be82; }
#logo a:hover, #tagline a:hover { color: #FFF; }
#tagline { font-size: 18px; }
#tagline a { text-shadow: 1px 1px 0px #f7be82; -webkit-text-shadow: 1px 1px 0px #f7be82; -moz-text-shadow: 1px 1px 0px #f7be82; -o-text-shadow: 1px 1px 0px #f7be82; }
.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 #9cddc8; -moz-text-shadow: 1px 1px 0px #9cddc8; -o-text-shadow: 1px 1px 0px #9cddc8;
}
I appreciate any help on the issue, thanks!
The first two items are being cut-off because #logo has a z-index of 4 and #nav has a z-index of 2. Therefore, #logo will be above #nav.
It does not matter that the li descendants within #nav have a z-index of 5 as these elements are in a different stack context than #logo.
You will need to rethink the way you've set up your backgrounds since you need your logo above the orange bar, yet you need the logo under your nav elements.