Problems with CSS Rollovers in Internet Explorer

Question

I have created a portfolio website which currently runs well in Safari and Firefox but has problems in IE 5, 6 and 7 (not 8). The Portfolio/About/Contact rollovers (pure CSS) and the thumbnails (pure CSS) in the portfolio section are not working properly (except on the splash page where they are fine). These rollovers have "active" states so that you know what page you are on etc. The rollovers are one image with the active sites on the bottom and the inactive sites on the top of the image.

My code for an example html page is as follows:

<div id="header" > 
  <img src="images/headerTopPadding.gif" height="23" border="0" align="top">
  <ul id="evaNeesemannDesignMenu">
    <li id="evaNeesemannDesign" ><a href="../index.html"></a></li>
  </ul>
  <ul id="portfolioAboutContactMenu">
    <li id="portfolioActive"></li>
    <li id="about"><a href="about.html"></a></li>
    <li id="contact"><a href="contact.html"></a></li>
  </ul>
  <img src="images/headerTopPadding.gif" border="0" height="23" align="top"> 
  <ul id="thumbnailMenu">
    <li id="smsThumbActive"><a href="smsOne.html"></a></li>
    <li id="m2Thumb"><a href="m2.html"></a></li>
    <li id="calvinInviteThumb"><a href="calvinInvite.html"></a></li>
    <li id="calvinMerchThumb"><a href="calvinMerch.html"></a></li>
    <li id="vantaaThumb"><a href="vantaa.html"></a></li>
    <li id="nurminenThumb"><a href="nurminen.html"></a></li>
    <li id="corbThumb"><a href="corbOne.html"></a></li>
    <li id="bpgThumb"><a href="bpg.html"></a></li>
    <li id="nineElevenThumb"><a href="nineEleven.html"></a></li>
    <li id="tomsThumb"><a href="toms.html"></a></li>
    <li id="deloittePropThumb"><a href="deloitteProp.html"></a></li>
    <li id="deloitteInfoThumb"><a href="deloitteInfo.html"></a></li>
    <li id="turnThumb"><a href="turn.html"></a></li>
    <li id="oedThumb"><a href="oedOne.html"></a></li>
    <li id="networkThumb"><a href="network.html"></a></li>
  </ul>
</div>

And the css for that region of that code is as follows:

#header{
position:relative; 
height:120px; 
background-color:#FFFFFF; 
width:100%;
} 

/* Eva Neesemann Design Menu Rollover */

#evaNeesemannDesignMenu {
position: relative; 
margin: 0px auto; 
padding: 0px; 
width: 194px; 
height: 23px; 
background: url(images/evaNeesemannDesign.gif);
}

#evaNeesemannDesignMenu li {
width: 194px; 
height: 23px; 
position: absolute; 
top: 0px; 
background: url(images/evaNeesemannDesign.gif) 0 -23px no-repeat; 
display: block; 
list-style: none;
}

#evaNeesemannDesignMenu a {
width: 194px; 
height: 23px; 
display: block; 
border: none;
}

#evaNeesemannDesignMenu a:hover {
border: none;
}

#evaNeesemannDesignMenu #evaNeesemannDesign {
left: 0px;
}

#evaNeesemannDesignMenu #evaNeesemannDesign a:hover {
background: url(images/evaNeesemannDesign.gif) 0px 0px no-repeat;
}


/* Portfolio About Contact Menu Rollovers */

#portfolioAboutContactMenu {
position: relative; 
margin: 0px auto; 
padding: 0px; 
width: 194px; 
height: 18px; background:url(images/portfolioAboutContact.gif);
}

#portfolioAboutContactMenu li {
width: 194px; 
height: 18px; 
position: absolute; 
top: 0px; 
background: url(images/portfolioAboutContact.gif) 0 0 no-repeat;
display: block; 
list-style: none;
}

#portfolioAboutContactMenu a:hover {
border: none;
}

#portfolioAboutContactMenu #portfolio {
left: 0px;
}

#portfolioAboutContactMenu #portfolioActive {
left: 0px; 
background-position: 0px -18px;
}

#portfolioAboutContactMenu #about {
left: 75px; 
background-position: -75px 0;
}

#portfolioAboutContactMenu #aboutActive {
left: 75px; 
background-position: -75px -18px;
}

#portfolioAboutContactMenu #contact {
left: 127px; 
background-position: -127px 0;
}

#portfolioAboutContactMenu #contactActive {
left: 127px; 
background-position: -127px -18px;
}

#portfolioAboutContactMenu #portfolio a:hover {
background: url(images/portfolioAboutContact.gif) no-repeat 0px -18px;
}

#portfolioAboutContactMenu #about a:hover {
background: url(images/portfolioAboutContact.gif) no-repeat -75px -18px;
}

#portfolioAboutContactMenu #contact a:hover {
background: url(images/portfolioAboutContact.gif) no-repeat -127px -18px;
}

#portfolioAboutContactMenu #portfolio a {
width: 75px; 
height: 18px; 
display: block; 
border: none;
}

#portfolioAboutContactMenu #about a {
width: 52px; 
height: 18px; 
display: block; 
border: none;
}

#portfolioAboutContactMenu #contact a {
width: 67px; 
height: 18px; 
display: block; 
border: none;
}

/* Thumbnail Menu Rollovers */

#thumbnailMenu {
position: relative; 
margin: 0px auto; 
padding: 0px; 
width: 433px; 
height: 27px; 
background:url(images/thumbnails.jpg);
}

#thumbnailMenu li {
width: 433px; 
height: 27px; 
position: absolute; 
top: 0px; 
background: url(images/thumbnails.jpg) 0 0 no-repeat; 
display: block; 
list-style: none;
}

#thumbnailMenu a {
width: 29px; 
height: 27px; 
display: block; 
border: none;
}

#thumbnailMenu a:hover {
border: none;
}

#thumbnailMenu #smsThumb {
left: 0px;
}

#thumbnailMenu #smsThumbActive {
left: 0px; 
background-position: 0px -27px;
}

#thumbnailMenu #m2Thumb {
left: 28px; 
background-position: -28px 0;
}

#thumbnailMenu #m2ThumbActive {
left: 28px; 
background-position: -28px -27px;
}

#thumbnailMenu #calvinInviteThumb {
left: 57px; 
background-position: -57px 0;
}

#thumbnailMenu #calvinInviteThumbActive {
left: 57px; 
background-position: -57px -27px;
}

#thumbnailMenu #calvinMerchThumb {
left: 86px; 
background-position: -86px 0;
}

#thumbnailMenu #calvinMerchThumbActive {
left: 86px; 
background-position: -86px -27px;
}

#thumbnailMenu #vantaaThumb {
left: 115px; 
background-position: -115px 0;
}

#thumbnailMenu #vantaaThumbActive {
left: 115px; 
background-position: -115px -27px;
}

#thumbnailMenu #nurminenThumb {
left: 144px; 
background-position: -144px 0;
}

#thumbnailMenu #nurminenThumbActive {
left: 144px; 
background-position: -144px -27px;
}

#thumbnailMenu #corbThumb {
left: 173px; 
background-position: -173px 0;
}

#thumbnailMenu #corbThumbActive {
left: 173px; 
background-position: -173px -27px;
}

#thumbnailMenu #bpgThumb {
left: 202px; 
background-position: -202px 0;
}

#thumbnailMenu #bpgThumbActive {
left: 202px; 
background-position: -202px -27px;
}

#thumbnailMenu #nineElevenThumb {
left: 231px; 
background-position: -231px 0;
}

#thumbnailMenu #nineElevenThumbActive {
left: 231px; 
background-position: -231px -27px;
}

#thumbnailMenu #tomsThumb {
left: 260px; 
background-position: -260px 0;
}

#thumbnailMenu #tomsThumbActive {
left: 260px; 
background-position: -260px -27px;
}

#thumbnailMenu #deloittePropThumb {
left: 289px; 
background-position: -289px 0;
}

#thumbnailMenu #deloittePropThumbActive {   
left: 289px; 
background-position: -289px -27px;
}

#thumbnailMenu #deloitteInfoThumb {
left: 318px; 
background-position: -318px 0;
}

#thumbnailMenu #deloitteInfoThumbActive {
left: 318px; 
background-position: -318px -27px;
}

#thumbnailMenu #turnThumb {
left: 347px; 
background-position: -347px 0;
}

#thumbnailMenu #turnThumbActive {
left: 347px; 
background-position: -347px -27px;
}

#thumbnailMenu #oedThumb {
left: 376px; 
background-position: -376px 0;
}

#thumbnailMenu #oedThumbActive {
left: 376px; 
background-position: -376px -27px;
}

#thumbnailMenu #networkThumb {
left: 405px; 
background-position: -405px 0;
}

#thumbnailMenu #networkThumbActive {
left: 405px; 
background-position: -405px -27px;
}


#thumbnailMenu #smsThumb a:hover {
background: url(images/thumbnails.jpg) 0px -27px no-repeat;
}

#thumbnailMenu #m2Thumb a:hover {
background: url(images/thumbnails.jpg) -28px -27px no-repeat;
}

#thumbnailMenu #calvinInviteThumb a:hover {
background: url(images/thumbnails.jpg) -57px -27px no-repeat;
}

#thumbnailMenu #calvinMerchThumb a:hover {
background: url(images/thumbnails.jpg) -86px -27px no-repeat;
}

#thumbnailMenu #vantaaThumb a:hover {
background: url(images/thumbnails.jpg) -115px -27px no-repeat;
}

#thumbnailMenu #nurminenThumb a:hover {
background: url(images/thumbnails.jpg) -144px -27px no-repeat;
}

#thumbnailMenu #corbThumb a:hover {
background: url(images/thumbnails.jpg) -173px -27px no-repeat;
}

#thumbnailMenu #bpgThumb a:hover {
background: url(images/thumbnails.jpg) -202px -27px no-repeat;
}

#thumbnailMenu #nineElevenThumb a:hover {
background: url(images/thumbnails.jpg) -231px -27px no-repeat;
}

#thumbnailMenu #tomsThumb a:hover {
background: url(images/thumbnails.jpg) -260px -27px no-repeat;
}

#thumbnailMenu #deloittePropThumb a:hover {
background: url(images/thumbnails.jpg) -289px -27px no-repeat;
}

#thumbnailMenu #deloitteInfoThumb a:hover {
background: url(images/thumbnails.jpg) -318px -27px no-repeat;
}

#thumbnailMenu #turnThumb a:hover {
background: url(images/thumbnails.jpg) -347px -27px no-repeat;
}

#thumbnailMenu #oedThumb a:hover {
background: url(images/thumbnails.jpg) -376px -27px no-repeat;
}

#thumbnailMenu #networkThumb a:hover {
background: url(images/thumbnails.jpg) -405px -27px no-repeat;
}

You can view the actual site at http://www.evaneesemanndesign.com

Currently I have tried using z-index as well as putting different images into the background during rollover...none of these options is working. I know that IE has problems with rollovers but I'm nto sure what solution to follow...especially since it does work in certain sections of the website.

Any help would be much appreciated.

Thank you.

Madison

Answer 1

I tried in IE compatibility mode (which should correspond well to at least IE7), try to replace #thumbnailMenu li and #portfolioAboutContactMenu li with the following:

#thumbnailMenu li {
    /* Difference being that the width and display properties were removed */
    position: absolute;
    list-style: none;
    background: url(images/thumbnails.jpg) no-repeat 0 0;
    height: 27px;
    top: 0;
}

#portfolioAboutContactMenu li {
    /* Difference being that the width and display properties were removed */
    width: 194px; 
    height: 18px; 
    top: 0px; 
    background: url(images/portfolioAboutContact.gif) 0 0 no-repeat;
    list-style: none;
}

At least it works that way (since I don't have a “real” IE6/7 environment to test it). Let me know how's the outcome. I'm pretty sure you snagged on an old Internet Explorer bug :)

Answer 2

Hello,

just remove the text-align property from the tags html, body and #pagewidth :

html, body{ 
 margin:0; 
 padding:0; 
}

#pagewidth{ 
 width:800px; 
margin-left:auto; 
 margin-right:auto; 
}

Or add a "text-align: left;" to the tags #portfolioAboutContactMenu, #thumbnailMenu.

However, for a better search engine positioning, I suggest you to use some text replacement solutions, because the crawlers scan the source of the web page, and in the yours there is few textual content; that improves the accessibility of your web page too. Moreover, I suggest to add the "alt" attribute to the "img" tags!