PDA

View Full Version : Another CSS question - IE7 hover



Tony
09-03-2011, 05:00 PM
I know there are some issues with :hover in IE7, but I've can't find a reference to this one:

CSS:


#Mydiv: { width:200px; height:200px; border:1px solid green;}

#Mydiv:hover { border: 1px solid red;}

HTML:


<div id="Mydiv"></div>


Mydiv will get some content via Javascript. With FF and most other browsers, it works as you might expect - you mouse over MyDiv and the border colour changes.

With IE7, the color only changes if you mouse exactly on the border - if you move inside the box, nothing happens.

Am I doing something wrong, or have I discovered yet another idocy with IE?

Tony
10-03-2011, 08:42 AM
bumpity-bump-bump

Speedy Gonzales
10-03-2011, 08:53 AM
Dont think many people will be using IE7 anyway. Since IE9 will be released on the 14th

Tony
10-03-2011, 09:01 AM
Dont think many people will be using IE7 anyway. Since IE9 will be released on the 14thI'm not so sure about that. However it will be interesting to see if the problem disappears.

D'oh! I've also just discovered I should have said IE8 not IE7. :blush:

Tony
11-03-2011, 08:26 AM
Hey Speedy, I just looked at Google Analytics for the website,and these are the stats:

IE8: 69%
IE7: 24%
IE6: 6%
IE9: <1%

The scary thing is that 6% are still using IE6! But the fact that 24% are using IE7 shows that just because there is a new browser imminent, not everyone will be changing, so I still have to worry about the older ones.

Cicero
11-03-2011, 08:43 AM
Just change to 8 and put us out of our misery.

Tony
11-03-2011, 12:07 PM
Just change to 8 and put us out of our misery.Who, me? I'm already on 8, but many of the people who will be viewing the website are not. Thanks for the constructive comment...

Snorkbox
11-03-2011, 01:02 PM
Hey Speedy, I just looked at Google Analytics for the website,and these are the stats:

IE8: 69%
IE7: 24%
IE6: 6%
IE9: <1%

The scary thing is that 6% are still using IE6! But the fact that 24% are using IE7 shows that just because there is a new browser imminent, not everyone will be changing, so I still have to worry about the older ones.

No other browsers like FF in those stats and it adds up to 100%. Did you just filter the stats for IE only?

Tony
11-03-2011, 01:06 PM
Yes that is just the IE percentages - I got them in response to Speedy's comment, and the fact that it is an IE problem I am trying to solve.

hueybot3000
11-03-2011, 03:34 PM
Im guessing that IE is treating the content as seperate to the div? Which it shouldnt but it is IE so it will do whatever it likes.

Seeing as the box isnt that big you could use a background image (gif) with transparent center and the border, I know it's a bit messy but should mean that as long as the mouse is in the div the colour would change. Pretty sure CSS lets you do hovers for background...

Tony
11-03-2011, 08:12 PM
Yes, that's got to be worth a try - thanks.

hueybot3000
11-03-2011, 08:20 PM
No worries, let me know if it works but it should do, ive used background hover for menus before if memory serves correctly

Tony
11-03-2011, 09:55 PM
No worries, let me know if it works but it should do, ive used background hover for menus before if memory serves correctly
I've used hover too successfully. It has got to have something to do with the fact that it is an empty div with a size and a border.

Renmoo
12-03-2011, 12:52 PM
Seeing as the box isnt that big you could use a background image (gif) with transparent center and the border, I know it's a bit messy but should mean that as long as the mouse is in the div the colour would change. Pretty sure CSS lets you do hovers for background...
That should do the trick. Don't forget to deal with transparency when previewing the web page on IE6. I use this trick to fix the problem: http://www.twinhelix.com/css/iepngfix/