Rollover TD

[chrisdpucci]

Hey guys,

Anybody know any tricks for getting rollover td's to work in IE without javascript?

This is my CSS

.rollover1
{
background-color:#FFFFFF;
background-image:url(/site_images/bg.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
.rollover1:hover
{
background-color:#FFFFFF;
background-image:url(/site_images/bg2.jpg);
background-repeat:repeat-x;
background-position:bottom;
}

I'm obviously applying it to a TD tag and it works in some browsers but not others. I know that :hover is meant to only work on A tags in IE but are than any tricks I can use to get this to work?

thanks,

Chris

[Mr Blonde]

not that i know of.

you could always style an a tag as a block element in the table cells place instead tho which would then work in IE

[Dan Schulz]

Note that you don't have to worry about this in IE 7, but in IE 6 you're best off using a .htc file.

[chrisdpucci]

but in IE 6 you're best off using a .htc file.

Please explain

[Paul O'B]

Hi,

Or you could use the same JS routine that's used in the suckerfish menus to apply the hover to table elements instead.

e.g.

http://www.pmob.co.uk/temp/table-highlight.htm

[Dan Schulz]

I'd rather not, Paul. It doesn't do any good for :focus and :active states, whereas the .htc file takes care of those as well.

[Paul O'B]

I'd rather not, Paul. It doesn't do any good for :focus and :active states, whereas the .htc file takes care of those as well.

HTC files are ok but they are a little more trouble than they are worth in my mind. They are also a bit slow and if you have large stylesheets it can be a problem. Also the htc is about 50 lines of code and the routine I posted is about 7 lines

Also the fact that a lot of general users users may not have access to their htc files anyway.

Anyway you can add active and focus states to the routine if you want as after all the behaviour is just a javascript file anyway.

[chrisdpucci]

Hey Dan,

I'm still very much interested in your explination of how to use an htc file to help with this issue. The main reason why I don't want to use javascript is because this css class is already used across a very large site and I'd much rather edit/tweak/hack the css than go and edit every single page that referrences the rollover class.

thanks again,

Chris

[Dan Schulz]

This will explain what you need to know.
http://www.xs4all.nl/~peterned/csshover.html