IE7 and Firefox 3 Rendering Difference

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

Question

Here is an outline of a page I'm developing.

<?xml version="1.0" encoding="UTF-8"?>
<!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="en" lang="en">
  <head>
    <link rel="stylesheet" href="../css/test.css" />
    <title>Prosperity Login</title>
  </head>
  <body>
    <div id="banner">
    </div>
    <div id="subbanner">
    </div>
    <div id="body">
      <div id="colA">
      </div>
      <div id="colB">
        <div id="B1">
        </div>
        <div id="B2">
        </div>
      </div>
      <div id="colC">
      </div>
      <div id="colD">
      </div>
    </div>
    <div id="footer">
    </div>
  </body>
</html>

And the CSS:

* {
  margin: 0px;
  padding: 0px;
}



div {
  border: 1px dotted;
}

#banner {
  height: 70px;
  width: 100%;
}

#subbanner {
  height: 30px;
  width: 100%;
}

#body {
  background-color: #CCFFCC;
  width: 80%;
}

#colA{
  float: left;
  height: 120px;
  width: 24%;
}

#colB{
  float: left;
  height: 80px;
  width: 24%;
}
#colC{
  float: left;
  height: 120px;
  width: 24%;
}
#colD{
  float: left;
  height: 120px;
  width: 24%;
}

#B1{
  float: right;
  height: 48px;
  width: 80%;
}

#B2{
  float: right;
  height: 28px;
  width: 80%;
}
#footer{
  height: 30px;
  width: 100%;
}

In Firefox 3, the body div (with a green background) is squished to almost nothing while IE7 renders the page perfectly. From what I can tell of the CSS 2.1 standard (via Meyer's O'Reilly book), floated divs should float within their container block which is clearly not the case in Firefox 3.

So if Firefox's rendering is compliant, what am I missing?

Was it helpful?

Solution

Your problem is that IE7 clears the parent element so that it contains the floating child. This is not how it should be rendered. Better explanations by other posters.

Simple fix: apply overflow: hidden; to your #body:

#body {
    overflow: hidden;
}

See this post for an explanation.

OTHER TIPS

As always, when a page is rendered differntly in Internet Explorer and Firefox, Firefox renders the page correctly.

The body div should not have any height. It only contains floating element, so there is nothing in it that would give it any height. A floating element doesn't affect the size of it's parent. IE does this wroing and expands the element to contain it's children. This is one of the well known rendering errors of IE.

Remove the xml tag from the code. The doctype has to come first in the page, or IE will ignore it.

If you view the page in IE 8 beta, it will render the page exactly as Firefox does.

There's no weight or volume assigned to the div with id="body". Any text placed inside of the div will give it volume and render the color background to the appropriate size. This problem will play in out Webkit based browsers as well (Chrome, Safari).

Either place text in the body div to give it weight or add a style of overflow: hidden; to the div with id=body.

Thanks everyone for your answers.

There is another solution that solves my problem as well: floating the parent div (id="body"). This comes straight from Meyer's book, so I'm not sure how I missed it. Just another case of doing is learning! The other thing is that this also solves another problem that I didn't state: how do I fit a margin between the body and footer? Since in Firefox, clearing the footer doesn't allow a margin to be used to give space between the body and footer. Floating the parent element however, does.

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