ie7 hover issue

Discussion in 'CSS' started by RamarC, Apr 4, 2007.

  1. #1
    I've noticed that IE7's native hover (mouseover/out) detection changes if a negative margin is applied. With a negative margin, only the text in a div is 'hoverable'. With a non-negative margin, the entire div is 'hoverable'. At first, I thought my jQuery hover code was faulty, but the example below shows that the css:pointer behavior changes with the margin setting.

    Can someone suggest a hack to make the hover detection consistent regardless of margin? (Note: remove #side-menu DIV.active {margin-left:-5px} to see the difference.)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title>hover issue</title>
    <style type="text/css">
    .hoverable { cursor: pointer; }
    #side-menu { float: left; width: 250px; font-size: 12pt; font-weight: bold; }
    #side-menu P { padding: 0px 5px 0px 5px; font-size: 10pt; font-weight: normal; }
    #side-menu DIV { border: silver 1px solid; padding: 5px;
    cursor: pointer; background: whitesmoke; color: dimgray; margin-left: 0px; }
    #side-menu DIV.active { cursor: default; background: white; color: black; border-right: none; margin-left: -5px; }
    #side-menu DIV.hover { color: black; border-right: none; margin-left: -5px; }

    </style>
    </head>
    <body>
    <div id="side-menu">
    <div class="hoverable tab-item">
    item 1
    <p>
    item 1 text.</p>
    </div>
    <div class="active hoverable tab-item">
    item 2
    <p>
    item 2 text.</p>
    </div>
    <div class="hoverable tab-item">
    item 3
    <p>
    item 3 text.</p>
    </div>
    <div class="hoverable tab-item">
    item 4
    <p>
    item 4 text.</p>
    </div>
    </div>
    </body>
    </html>
     
    RamarC, Apr 4, 2007 IP
  2. Dan_A

    Dan_A Peon

    Messages:
    65
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Did you try to add min-height:1%; in .hoverable ?
     
    Dan_A, Apr 4, 2007 IP
  3. RamarC

    RamarC Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    adding min-height changed the layout of the enclosed P a bit, but explicitly styling the P cured it. ie7 and ff both now render the same and have the same hover behavior.
     
    RamarC, Apr 4, 2007 IP
  4. Dima_2005

    Dima_2005 Peon

    Messages:
    48
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    IE7 has a lot of CSS incompabilities...
    I also searched a lot of things to fix things like this
     
    Dima_2005, Apr 6, 2007 IP