SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    :hover not functioning in IE7

    Hi there

    I have an overlay feature on the homepage of my website, if you hover over the image the overlay appears and some text is shown.

    I have achieved this by using the following HTML


    <div id="box">
    <div class="teaser">
    <img src="backgroundImage">
    </div>

    <div class="content">
    Overlay content here
    </div>
    </div>

    and

    CSS

    .content{
    bottom:0;
    display:none;
    position:absolute;
    z-index:10;
    }

    #box:hover .content{
    display:block;
    }

    This is functioning in all browsers apart from IE7, and unsure why

    Anyone got any clues?

    Thanks
    discover song meanings and more http://www.music-explained.com

  2. #2
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Do you have a doctype? First thing I always want to know.

    Also, you're absolutely positioning .content, but I didn't see the part of the code where you stated that #box was its nearest positioned ancestor. Do you have position: relative on #box?

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes the doctype is

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    And yes the box has relative assigned to it

    Thanks
    discover song meanings and more http://www.music-explained.com

  4. #4
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,280
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Duh, excuse me for being stupid: I missed the big blue underlined link to the page in question! Lemme take a look...
    sorry : )

    *edit

    Not having IE7 right now (wrong machine), I still looked and while it may be something stupid we're both overlooking that seems unrelated, two ideas come to mind:
    The rel-po'd box4 isn't a direct ancestor, and I have seen IE get confused with actual positions when a grandparent is the nearest positioned ancestor and a grandchild is abso-po'd. Also I see the parent itself is also abso-po'd. So #box4 isn't the one setting the positioning. There is a nearer ancestor.

    You should be able to do a simpler test case on your page for the lawlz and to see if IE7 works in the simple case (it should).

    Take #box4 and keep it position: relative. Make a direct child, some new box. Make it position: absolute and margin-left: -999em;
    then add :hover to make margin-left: 0;

    <div id="#box4" ...>
    <div class="foo">
    foo</div>
    </div>
    #box4 {
    position: relative;
    }
    #box4 .foo {
    position: absolute;
    margin-left: -999em;
    }
    #box4:hover .foo {
    margin-left: 0;
    }


    Also, you have bottom: 0 and if this were my site, for the lawlz I'd see if I could see anything in IE7 without the coordinate. Or with left: 0 and top: 0. Sometimes a :hover is working but you don't see it because the thingie doesn't appear where it should.

    ot:
    I was surprised to see a url as a class working, since I was sure : were illegal in CSS class names.

  5. #5
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, the html on the live site is a bit different to what I have shown you in this post, but the principle is the same
    discover song meanings and more http://www.music-explained.com

  6. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,633
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hi, it could be a sticky bug . Try this
    Code:
    #box:hover{visibility:visible;}
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  7. #7
    SitePoint Evangelist
    Join Date
    Feb 2007
    Posts
    402
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    RyanReese, thanks that has worked.

    Thanks very much for your response stomme, will try that test out and let you know if it works as well..

    Oh yeah, you are right about the url as a class, i had never thought of that, im only doing that to use Jquery to select elements based on what page im on, im not actually using the class for CSS. Prob a better way of doing it, but its working for now.

    Thanks
    discover song meanings and more http://www.music-explained.com


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
  •