SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Location
    Perth, Australia
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pure CSS Popups not working in IE 6 or 5.5

    Hi. I was really excited when I got some text appearing when rolling over an image on my site using CSS as it seemed to be working perfectly on all browsers on my Mac. However, I've now discovered they don't seem to be working in IE 6 or 5.5. I haven't been able to check IE 7 or other PC Browsers. Is anyone able to tell me why the rollovers aren't working and if they're not working in any other PC browsers?

    My page is at http://www.batesaustralia.com.au/pony/features.htm

    The CSS is at http://www.batesaustralia.com.au/pony/pony.css and the relevant section is at the bottom under "Features Rollovers".

    I followed Eric Meyer's Pure CSS Popups, but obviously I've missed something. As you move your mouse over each label name on the saddle, yellow text is supposed to appear on the right hand side in the gap under the text "Move your mouse..."

    Thanks for your help.

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    I've got it working on everyone but IE6 (and prolly then 5.5 but didn't check).

    I saw Eric's popups AFTER seeing Mike Cherim's, and Mike's worked on IE6 so maybe you need to do this:

    Mike gave an id to each <a> and made it refer to itself instead of an empty #.

    <a id="a1" href="#a1"><span>First link text blah blah</span></a>

    It's possible that # isn't good enough for IE6 to do something extra on hover... another possible reason is that IE6 (and 5) need something extra to get it going...
    Paul O'B sent this one to me when my popups didn't work in IE6:
    #features a:hover {
    visibility: visible;
    }

    I'm not sure if this was a Haslayout thing, but IE6 only honors :hover on links when something specific happens, like changing the text to bold, or adding a background colour... however, you're just making something appear, and apparently that's not good enough. So try both of the above and post back.

    Good luck.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2005
    Location
    Perth, Australia
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you, thank you! I love this forum, people help so quickly and always sort out my issues!!

    I started to try the first point but it was going to take a little while to change things (I'm not impatient, I've just got tonnes of things I'm working on!) so I tried the second point - visibility:visible - and it worked a treat. Just wondering if you'd mind looking quickly in IE 7 just to make sure I haven't broken anything. (Got to get this testing sorted out... I might just have to go out and get a cheap laptop as my G5 Mac is a pre-Intel chip and the PC I've got is a REALLY old hand-me-down. )

    Thanks again, you've really helped a lot.

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,276
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    IE7-- looks goed.

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As Stomme poes said, using visiblity: visible; on anchors is one way to do it. Although, there IS another way to get IE 5/6 to work with :hover. I personally prefer using this, since it allows me to use :hover on ANYTHING.

    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
  •