CODEWITHSUNDEEP
cssinternet-explorer-7firefox-3
gvkv
gvkv

Reputation: 1916

IE7 and Firefox 3 Rendering Difference

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?

Upvotes: 1

Views: 1639

Answers (4)

gvkv
gvkv

Reputation: 1916

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.

Upvotes: 0

strager
strager

Reputation: 90022

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.

Upvotes: 4

ahsteele
ahsteele

Reputation: 26494

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.

Upvotes: 1

Guffa
Guffa

Reputation: 700342

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.

Upvotes: 2

Related Questions