Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

CSS rollover buttons

Options
  • 19-08-2005 2:53am
    #1
    Gordon
    Registered Users Posts: 35,524 ✭✭✭✭


    Maybe you guys know all about this but for an intermediate CSS/HTML user like myself I found this very interesting.

    I just realised that one could make rollover buttons without javascript using css today. I figured out how to do it and then did a search on the web to see how my style compared. Which turned up this result.

    This link suggests that the way I was using rollovers (using background imgs) was slightly flawed in that the browser (IE iirc) would have to reload the bg image repeatedly and would not cache it. However this way shown in the link negates such a problem apparently.

    Just posting this here to show a few people that may not know about it. I thought it was great when I realised I didn't need javascript for rollover images. CSS=fabby


Comments

  • Options
    #2
    Serbian
    Registered Users Posts: 2,157 ✭✭✭Serbian


    The example above doesn't work in IE 5.01 or 5.5. A List Apart did a great tutorial on the Sliding Doors of CSS. In Part 2 of that article they go over how to make roll-over images.

    On further investigation the Sliding Doors don't work in IE at all, and look horrible in IE6. They look great in FireFox though :p. That's quite disappointing as ALA tend to focus on making their CSS tutorials cross-browser compatible.


  • Options
    #3
    Gordon
    Registered Users Posts: 35,524 ✭✭✭✭Gordon


    Doesn't work on IE5? Bah humbug. Works on Mac IE5(.2).

    Thanks for the ALA link though, haven't seen that webby before. Unfortunate that the sliding doors doesn't work in IE :/


  • Options
    #4
    Rollo Tamasi
    Registered Users Posts: 3,514 ✭✭✭Rollo Tamasi


    Serbian wrote:
    A List Apart

    Thanks a fantastic site Serbian! i've wanted to get more into CSS and now i think i have come across a CSS goldmine! :)


  • Options
    #5
    Serbian
    Registered Users Posts: 2,157 ✭✭✭Serbian


    Gordon wrote:
    Doesn't work on IE5? Bah humbug. Works on Mac IE5(.2).

    Thanks for the ALA link though, haven't seen that webby before. Unfortunate that the sliding doors doesn't work in IE :/

    Sorry, when I say doesn't work, the background image doesn't change, but they are still usable. I would put cursor: hand; for links as on IE 5.01 and IE 5.5 the cursor doesn't change so it doesn't look like a link. The best way to test these things is to install multiple versions of IE.


  • Options
    #6
    Gordon
    Registered Users Posts: 35,524 ✭✭✭✭Gordon


    Right, cheers Serb!


  • Advertisement
  • Options
    #7
    rsynnott
    Registered Users Posts: 4,003 ✭✭✭rsynnott


    Gordon wrote:
    Doesn't work on IE5? Bah humbug. Works on Mac IE5(.2).

    Mac IE5 didn't have anything in particular to do with Windows IE5; it had closer to proper CSS support, and was missing some features. In practice, these days, there may or may not be much point in writing for IE5; it's badly broken, and those few still using it (it seems to be VERY few) will no doubt live without the flashy effects.


Advertisement