Forum Moderators: not2easy
In IE7 what happens if I hover over "Blog" the hover area is about 20px too low, half as tall as it should be and the background image is two down from where it should be on the matrix (so off by about 120px on the Y-axis)
If I hover over the third link ("About") the hover area is only a fraction of the size that "Blog" is and is so small that I can't even tell where it is on the matrix.
There is no hover area on "Contact".
Any help would be greatly appreciated.
HTML
<div id="menu-wrap-home">
<ul>
<li id="home" ><a href="<?php echo get_option('home'); ?>/"><span style="display:none;">Home</span></a></li>
<li id="blog"><a href="#"><span style="display:none;">Blog</span></a></li>
<li id="about"><a href="#"><span style="display:none;">About</span></a></a></li>
<li id="contact"><a href="#"><span style="display:none;">Contact</span></a></a></li>
</ul>
</div> <!-- end nav -->CSS
/* Tabbed Nav */
/*Home Page Tabs */
#menu-wrap-home{
width: 981px;
height: 60px;
position: relative;
background: url(../images/new/nav_matrix.jpg) 0 0 no-repeat; }
#menu-wrap-home ul li a {
display: block;
position: relative;
float: left;
width: 139px;
height: 60px; }
#menu-wrap-home li #home a:link, #menu-wrap-home li#home a:visited {
position: relative;
z-index: 20; }
#menu-wrap-home li #blog a:link, #menu-wrap-home li#blog a:visited {
left: 0;
position: relative; }
#menu-wrap-home li#blog a:hover {
width: 161px;
background: url(../images/new/nav_matrix.jpg) -139px -60px; }
#menu-wrap-home li#about a:hover {
width: 161px;
margin-left: -3px;
background: url(../images/new/nav_matrix.jpg) -275px -120px; }
#menu-wrap-home li#contact a:hover {
width: 164px;
margin-left: -6px;
background: url(../images/new/nav_matrix.jpg) -411px -180px; }
Here's what the final product was...
HTML
<div id="menu-wrap-home"> <!-- changes div on each individual page-->
<ul>
<li id="home" ><a href="<?php echo get_option('home'); ?>/"><span style="display: none;">Home</span></a></li>
<li id="blog"><a href="#"><span style="display: none;">Blog</span></a></li>
<li id="about"><a href="#"><span style="display: none;">About</span></a></a></li>
<li id="contact"><a href="#"><span style="display: none;">Contact</span></a></a></li>
</ul>
</div>
Conditional Comment
<!--[if lte IE 7]>
<style>
#menu-wrap-home li#about, #menu-wrap-home li#contact, #menu-wrap-home li#blog, #menu-wrap-home li#home {
float: left;
left: 0;
}
li#about a:hover {
left: -3px;
margin-left: 0;
}
li#contact a:hover {
left: -6px;
margin-left: 0;
}
</style>
<![endif]-->
CSS
#menu-wrap-contact, #menu-wrap-home, #menu-wrap-about, #menu-wrap-blog {
width: 981px;
height: 60px;
}
#menu-wrap-home{
background: url(../images/new/nav_matrix.jpg) 0 0 no-repeat; }
#menu-wrap-contact{
background: url(../images/new/nav_matrix.jpg) 0 -240px no-repeat; }
#menu-wrap-blog{
background: url(../images/new/nav_matrix.jpg) 0 -720px no-repeat; }
#menu-wrap-about{
background: url(../images/new/nav_matrix.jpg) 0 -480px no-repeat; }
#menu-wrap-about ul li a, #menu-wrap-contact ul li a, #menu-wrap-blog ul li a, #menu-wrap-home ul li a {
display: block;
float: left;
width: 139px;
height: 60px; }
li#blog a:hover, li#about a:hover, li#contact a:hover, li#home a:hover {
position: relative;
width: 161px; }
li#about a:hover {
margin-left: -3px;}
li#contact a:hover {
margin-left: -6px; }
#menu-wrap-home li#blog a:hover {
background: url(../images/new/nav_matrix.jpg) -139px -60px; }
#menu-wrap-home li#about a:hover {
background: url(../images/new/nav_matrix.jpg) -275px -120px; }
#menu-wrap-home li#contact a:hover {
background: url(../images/new/nav_matrix.jpg) -411px -180px; }
#menu-wrap-blog li#blog a:hover {
background: url(../images/new/nav_matrix.jpg) -139px -720px; }
#menu-wrap-blog li#contact a:hover{
background: url(../images/new/nav_matrix.jpg) -408px -900px; }
#menu-wrap-blog li#about a:hover {
background: url(../images/new/nav_matrix.jpg) -275px -840px; }
#menu-wrap-blog li#home a:hover {
background: url(../images/new/nav_matrix.jpg) 0 -780px; }
#menu-wrap-contact li#blog a:hover {
background: url(../images/new/nav_matrix.jpg) -139px -360px; }
#menu-wrap-contact li#about a:hover {
background: url(../images/new/nav_matrix.jpg) -275px -420px; }
#menu-wrap-contact li#home a:hover {
background: url(../images/new/nav_matrix.jpg) 0 -300px; }
#menu-wrap-about li#contact a:hover{
background: url(../images/new/nav_matrix.jpg) -408px -540px; }
#menu-wrap-about li#blog a:hover {
background: url(../images/new/nav_matrix.jpg) -139px -660px; }
#menu-wrap-about li#about a:hover {
background: url(../images/new/nav_matrix.jpg) -275px -480px; }
#menu-wrap-about li#home a:hover {
background: url(../images/new/nav_matrix.jpg) 0 -300px; }
is this a sprite which changes position depending on what page/hover you're activating?
if so can you give the dimension of the image and the dimension of each "block" - I don't think you should have to be feeding small negative corrections to IE , but it's hard to tell - if it's not a sprite it looks like it would make a good candidate for one, and a sprite should help you lose the IE flicker.
I think your IE issues might be because the ul margin/padding defaults are not zero'd, also instead of floating the <a>, maybe try floating the actual <li> containing them, then just set the <a> to display:block; for it to 'fill' the li's
another thing I might do if it were me would be to give that containing div a class name as well as your page ID's
e.g. <div id="menu-wrap-home" class="menu-wrap">
you could then use the class name to set the common properties, and simply use the ID to change the background position, it could drastically reduce your CSS
