SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS bug in IE causes shifting text on hover

    Can anyone give me some background on this IE bug? I've created a reduced test-case, but can't find any information on this anywhere. I've tried all my standard places (P.i.e., these forums, google, etc.). I've only seen this bug on IE 6 and 5.5. (IE 5.01 gets it right!)

    Load the test page and hover over the links. On load, there is an extra space between the two section <div>s that shouldn't be there. This space is equal to the padding-top on the containing <div>.

    Hovering over the links adds and removes that extra space causing the bottom section to shift up and down. The only hover style is a change in background-color. The bug is also triggered by changing the border-color, even if there is no border! Other styles, like font-weight, will cause the shift, while some styles, like color, won't.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Title</title>
    <style type="text/css">
    #container {padding: 15px; border: 2px solid red;}
    .section1 {float: left; width: 200px; border: 2px solid green;}
    .section2 {clear: both; width: 200px; border: 2px solid blue;}
    a:hover {background-color: #fcc;}
    </style>
    </head>
    <body>
    <div id="container">
    <div class="section1"><a href="#">anchor in section 1</a></div>
    <div class="section2"><a href="#">anchor in section 2</a></div>
    </div>
    </body>
    </html>
    The float on the first section, the clear and width styles on the second section, the padding-top on the container section, and the hover style on the anchors are all necessary to duplicate this bug. The borders, the width on the the first section, and the extra padding on the container are just there to make it easier to see.

    Thanks,
    Doug

  2. #2
    SitePoint Member
    Join Date
    Jan 2006
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've just noticed that the border on the container is itself enough to trigger the bug. I'm really surprised I haven't run into this before.

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Title</title>
    <style type="text/css">
    #container {padding: 0; border: 15px solid red;}
    .section1 {float: left;}
    .section2 {clear: both; width: 200px;}
    a:hover {background-color: #fcc;}
    </style>
    </head>
    <body>
    <div id="container">
    <div class="section1"><a href="#">anchor in section 1</a></div>
    <div class="section2"><a href="#">anchor in section 2</a></div>
    </div>
    </body>
    </html>

  3. #3
    Non-Member
    Join Date
    Jan 2005
    Location
    Netherlands
    Posts
    4,300
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello

    haslayout problem in IE
    * html #container{height:1%;}


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
  •