What is wrong with this simple CSS in IE?

StackOverflow https://stackoverflow.com/questions/367847

Question

There is a div that has inner content, a div with a border that's inside a div. Somehow, this div is expanded to encompass the next div. It blows my mind.

<div style="background: yellow;">
  <div>
    <div style="border: 1px solid black; background: green">green background</div>
  </div>
</div>
<div style="margin-top: 100px;">
  IE gives me a yellow background, unless i take away the border of the green 
  background div.
</div>

I'm wondering the cause of this and how to solve it.

Was it helpful?

Solution

You need to "give layout" to the first div. You better do this using IE6 targeted styles:

<style>
   * html .haslayout {
       display:inline-block;
   }
</style>

...

<div style="background: yellow;" class="haslayout">

This is a known IE6 issue with the hasLayout attribute. Read more on it here - http://www.satzansatz.de/cssd/onhavinglayout.html

OTHER TIPS

Sounds like you're in transitional quirksmode which is EVIL.

Strict solves this.

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

One solution is to put "position: relative" everywhere, but this breaks other things in my page.

You are missing a semicolon in the inner div. I have seen some very weird behaviour if the last semicolon is omitted.

<div style="border: 1px solid black; background: green;">green background</div>

Not sure what version of IE you have, but this works in IE7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Test</title>
  </head>  
  <body>
    <div style="background: yellow;">
     <div>
        <div style="border: 1px solid black; background: green;">green background</div>
      </div>
    </div>
    <div style="margin-top: 100px;">
      IE gives me a yellow background, unless i take away the border of the green 
      background div.
    </div>
  </body>
</html>

The answer is verry easy, because you nesting diverent div's, and none off them has a height, so there is a overflow for IE6. do this:

<div style="background: yellow;height: 1%;">

and it will work just fine.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top