IE7 background hover bug

I found a new rendering bug in IE today, and I can’t find any other reference to this exact problem so I’m claiming it as my very own. I shall call it bastardwhore, or Mr. Fluffy, I haven’t decided yet.
Here’s how the shit went down:

I always construct sites using firefox as my default browser and then, when everything is ship-shape and Bristol-fashion, I recklessly flirt with the ever-present possibility of catastrophic brain failure by viewing it using Internet Explorer. I do this because I hate myself, obviously.

So I had this standard little list-based menu, where the menu links, which had no background-color or background-image, would produce a background-image on a:hover. Simple stuff, but IE will only display the background-image if the background-color is set, and it has to be a valid colour code and not set to transparent or inherit. With most images this wouldnt matter as the image covers the background colour anyway, but mine were semi-transparent and I wanted to see the page background through them. Feck.

Googling was of little use as I found lots of similar but not same issues, with fixes that didn’t work. Finally, out of desperation, I applied The Holly Hack (min-height: 1%;) which really shouldn’t work, but it does. Which just goes to show what a marvellous pain in the arse the entire world can be, even when it’s working in your favour. I was this close, this close (holds fingers apart to the width of a fleas whisker), to not even trying this hack. But sure there you go, its all swings and roundabouts in the end, a nods as good as a wink to a gift horses mouth.

to recap:

#container ul a:hover{
background:url(images/menuover.png);
}

background image nowhere to be seen. what?

#container ul a:hover{
background:url(images/menuover.png);
background-colour:#000000;
}

background image now present, but over a solid colour background, which is of no use if the image is semi-opaque and we want to see the page through it.

#container ul a:hover{
background: url(‘/images/menuover.png’);
min-height: 1%;
}
Bingo.

 Oh, and never mind the quotes around the urls in these code snips, TinyMCE keeps putting them in there and I’ve no idea how to tell it to stop.
If this has been of any use to you please leave a comment so I can feel like a useful member of society.

This entry was posted in neonblog, web. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

3 Comments

  1. i had an unrelated problem with ie7 hiding a background image of a div when hovering over a nested link. I gave the “min-height: 1%;” trick a go and it worked, no idea why! Thanks

    September 6, 2009 at 9:54 am | Permalink
  2. whoah this weblog is great i like studying your posts. Stay up the good work!

    You realize, a lot of individuals are looking round for this information, you could help them greatly.

    May 31, 2013 at 5:48 am | Permalink
  3. Bud says...

    It’s hard to find your articles in google. I found it on 16 spot, you should build
    quality backlinks , it will help you to rank to google
    top 10. I know how to help you, just type in google –
    k2 seo tricks

    July 15, 2014 at 1:50 pm | Permalink

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>