CODEWITHSUNDEEP
cssinternet-explorerbordermargin
Sam
Sam

Reputation: 6327

What is wrong with this simple CSS in IE?

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.

Upvotes: 0

Views: 290

Answers (5)

Mark
Mark

Reputation:

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.

Upvotes: 0

Eran Galperin
Eran Galperin

Reputation: 86805

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

Upvotes: 0

Toon Krijthe
Toon Krijthe

Reputation: 53366

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>

Upvotes: 0

Sam
Sam

Reputation: 6327

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

Upvotes: 0

annakata
annakata

Reputation: 75794

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">

Upvotes: 2

Related Questions