IE6 + IE7 CSS problem with overflow: hidden; - position: relative; combo

html css internet-explorer-6 internet-explorer-7 overflow

72,455

Solution 1

This problem is apparently a known bug for IE 6 + 7, which was fixed in IE8.

To avoid this, in this case you can replace:

ul {
    left: -499px;
    position: relative;
  }

with:

ul {
    margin-left: -499px;
  }

This however gave some problems with the background I used on the infobox div, but nothing I couldn't solve with a few style hacks.

Solution 2

It is a well-known bug in IE6 and IE7. To solve it, you need to add position:relative to the container. Since in your case body is the container, I'd suggest you add a div directly under the body and give it position:relative. It should solve your problem.

72,455

Author by

googletorp

I'm a senior Drupal developer, working as a consultant for Reveal IT. Over the past year I've spent a lot of time on Drupal and Drupal Commerce, created a lot of different sites with it and enjoyed it all the way. I maintain or co-maintain a host of modules on drupal.org and have contributed to a lot of other modules. Recently I've started contributing to Drupal core, making me in the top 5% of most contributions. When I'm not doing work or Drupal related stuff, I usually spend time with my beautiful wife and amazing son, play soccer, make grandiose cakes or some other fun stuff.

Updated on July 05, 2022

Comments

googletorp almost 2 years

So I have created a slider for a homepage, that slides some images with a title and teaser text using jQuery. Everything works fine, and I went to check IE and found that IE 6 and 7 kills my slider css completely. I can't figure out why, but for some reason I can't hide the non active slides with overflow: hidden; I've tried tweaking the css back and forth, but haven't been able to figure out what's causing the problem.

I've recreated the problem in a more isolated html page.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="da" lang="da" dir="ltr">
  <head>
    <style>
      body {
       width: 900px;
      }
      .column-1 {
        width: 500px;
        float: left;
      }
      .column-2 {
        width: 200px;
        float: left;
      }
      .column-3 {
        width: 200px;
        float: left;
      } 
      ul {
        width: 2000px;
        left: -499px;
        position: relative;
      }

      li {
        list-style: none;
        display: block;
        float: left;
      }

      .item-list {
        overflow: hidden;
        width: 499px;
      }
    </style>
  </head>
  <body>
    <div class="column-1">
      <div class="item-list clearfix">
        <ul>
          <li class="first">
            <div class="node-slide">
              <img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
              <div class="infobox">
                <h4>Title 1</h4>
                <p>Teaser 1</p>
              </div>
            </div>
          </li>
          <li>
            <div class="slide">
              <img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
              <div class="infobox">
                <h4>Title 2</h4>
                <p>Teaser 2</p>
              </div>
            </div>
          </li>
          <li class="last">
            <div class="slide">
              <img src="http://www.hanselman.com/blog/content/binary/lolcats-funny-pictures-leroy-jenkins.jpg" />
              <div class="infobox">
                <h4>Title 3</h4>
                <p>Teaser 3</p>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div class="column-2">
      ...
    </div>
    <div class="column-3">
      ...
    </div>
  </body>
</html>

I've tracked down that it is the

ul {
  position: relative;
}

on the ul element that is causing the overflow: hidden not to work, but why that is, I don't know. Also this is needed to make the slider javascript work using the left attribute on the ul to slide it. Any ideas as to how you can fix this is most welcome.

Slava Fomin II over 11 years

Saved my day! ...i mean night )
phil88530 about 11 years

nice hint ! spent me so long to find this post ! I hate IE !
bgondy almost 11 years

Same problem here, set position:relative; to the ul parent did the trick. Thank's a lot !
Admin almost 11 years

I used this technique for a background-size: cover replication in IE7 by using an inline image with an absolute position. Thanks!