• Log In

laminbarrow.com

Random opinions on programming, web design and life
  • Home
  • Post archive
  • Pics
  • About me
  • Contact

Making a background image hover effect work properly in Internet Explorer 6

Edit Display Settings

or
Edit Post
Monday, February 04, 2008
Earlier today while i was working on a new menu style, i came across a weird bug in IE 6 wherein a background-image for a hover effect just would not disappear even when am not hovering over the link that was suppose to cause the effect.

So after spending what seems to be like an hour trying to figure out what was causing the problem..... and finally i added background-repeat: repeat-x; in to my CSS file and that seems to have solved my problem.

Before



.Menu
{
background-image: image.png;
}

.Menu:hover
{
background-image: hover-image.png;
}

After




.Menu
{
background-image: image.png;
}

.Menu:hover
{
background-image: hover-image.png;
background-repeat: repeat-x;
}

So it turns out that i must have background-repeat: repeat-x; in order to make that hover effect work properly in IE6. Very weird indeed.

 
Your Comments
 
There are 8 comments - add your comment
Ted - Europe, World
Tuesday, March 25, 2008 3:29 PM
Your after CSS has hover.png in it twice.
Good to know about the repeat-x though, thanks :-)
laminb - Bakoteh, Gambia
Wednesday, March 26, 2008 11:21 AM
Hi Ted,
I have just made changes to the article. Thanks for pointing that out to me. Good catch.
RocA - Serrekunda, Gambia
Monday, May 05, 2008 12:14 PM
Good Point Lamin... it woulda take me days to figure out such issues...lol
Anonymous - Georgia, United States
Thursday, June 12, 2008 10:52 AM
thank you so much I have been driving my self crazy trying to get the hover thing to work. My proablem was similar. The background images for me just wouldn't change on hover. I also didn't want the image to repeat but this seems to work also, and the image is already preloaded since the background-position is just changed.

#div{
background:url(image) 999px 999px repeat-x;
}

#div:hover{
background-position: 0% 15%;
background-repeat: no-repeat;
}
bilgisayar - Africa, World
Monday, June 16, 2008 11:46 PM
css background examples , Properties , Attribute - - http://css-lessons.ucoz.com/background-css-examples.htm
Ellen - Europe, World
Friday, July 04, 2008 3:05 AM
Hi
I have exactly the same problem but this doesn't work for me. Would it be possible to see some of your HTML code?
Thanks for the info
Freddy - Venezuela, South America
Friday, July 11, 2008 9:06 AM
You just save my day... spend 2.5hour until i found this solution! Thanks man!
laminb - Bakoteh, Gambia
Saturday, July 12, 2008 4:16 AM
@Ellen
You can find the HTML code by viewing the source of this website. Hope this helps.

Your Comment

Your Name
Your Website
Your Location
Email me if someone replies.
To receive emails create a username or Sign In
Your Email
Username
Password
Confirm Password
Add me to the contact list.
Remember me on this computer.
Sign in below or Sign Up
Username
Password
loading...  
 
More Post
« Back
Next »
Related Topics
css, background, ie6, bug, internet explorer, web, menu
Media Actions
2
Promote
Email to a friend
Save to delicious
Digg this
Stumble it
Sponsored Links

See Also
  • Netscape navigating the World Wide Web no more
  • Internet Explorer CSS File Size Limit
© Copyright 2007-2008 Lamin Barrow
Site created with .geographical media. Explore geo