• Log In

Lamin Barrow

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

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 14 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.
eyes - Thursday, August 14, 2008 1:37 AM
thanks
false - Wednesday, September 17, 2008 1:10 AM
Thank you soooooooo much. This problem had me stuck all day yesterday.
Davide - Fuerteventura, Spain - Wednesday, November 12, 2008 3:23 AM
Thank you very much for this tip, very useful.
same here - Thursday, March 12, 2009 3:07 AM
"Thank you soooooooo much. This problem had me stuck all day yesterday."

thanks alot!!!
padma - Alexandria, Virginia - Wednesday, April 01, 2009 12:06 PM
this dosent work for me at all
masterbrumi - Bucharest, Romania - Tuesday, April 07, 2009 7:55 AM
Thank you very much for this tip, very useful.

It work's very good at me.

Your Comment

Your Name

Your Website

Your Location

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...  Post Comment
 
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
  • Women weekly: Janet A. Mansal A Teacher Par Excellence
  • Internet Explorer CSS File Size Limit
  • Veteran Journalist on responsible journalism
© Copyright 2007-2009 Lamin Barrow. Site created with Lara