Clever Geek Handbook

What's wrong with this simple CSS in IE?

There is a div that has inner content, a div with a border that is inside the div. Anyway, this div expands to cover the next div. It drives me crazy.

<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 am wondering why this is and how to solve it.

0


source to share


5 answers


You need to "give layout" to the first div. You'd better do it with IE6 target styles:

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

...

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


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

0


source


It looks like you are in a transient quirksmode, which is EVIL.

Strict resolves this.



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


source


One solution is "position: relative" everywhere, but that breaks other things on my page.

0


source


You are missing the semicolon in the inner div. I've seen very strange behavior if the last semicolon is omitted.

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

Not sure which 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>
0


source


The answer is correct because you are embedding the div and none of them have heights, so there is an overflow for IE6. do the following:

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

and it will work fine.

0


source






More articles:


All Articles