SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Rollover TD

  1. #1
    SitePoint Zealot chrisdpucci's Avatar
    Join Date
    Dec 2006
    Location
    On the internets
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rollover TD

    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

  2. #2
    Who is Mr Blonde? Mr Blonde's Avatar
    Join Date
    Sep 2006
    Location
    Gold Coast, QLD
    Posts
    359
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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
    Heavens Rejects : Online Clothing Store
    Alternative Clothing : Mr Blonde
    Front end development : By the Webfella

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    SitePoint Zealot chrisdpucci's Avatar
    Join Date
    Dec 2006
    Location
    On the internets
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz View Post
    but in IE 6 you're best off using a .htc file.
    Please explain

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,295
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    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.

  8. #8
    SitePoint Zealot chrisdpucci's Avatar
    Join Date
    Dec 2006
    Location
    On the internets
    Posts
    191
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,478
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This will explain what you need to know.
    http://www.xs4all.nl/~peterned/csshover.html


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •