Strange CSS issue on IE 7/8/9

Question

I've got a website that I started laying out. The problem is in the footer_internal_box and footer_box_bottom. Even though the box_bottom is in a separate div section after the internal_box, it sits at the bottom of the internal_box. If I alter the height of the footer_box_bottom it also alters the size of footer_internal_box.

It works in Firefox, however I have found a way to fix it, I just don't understand why.

If I put <div></div> before the <div id="footer_box_bottom"> </div> line, then it all works as expected. Now I can leave that in there, but i'd like to know why this would happen. The footer_box_bottom div should have no effect on the internal_box.

Below is the code, reset.css and layout.css. The text.css is blank at present.

Many thanks!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="styles/reset.css" rel="stylesheet" type="text/css" />
<link href="styles/layout.css" rel="stylesheet" type="text/css" media="screen" />
<link href="styles/text.css" rel="stylesheet" type="text/css" media="screen" />
</head>

<body>
<div id="container">
    <div id="header_box">
        <img src="images/logo.png" width="172" height="174" border="0" id="header_logo" />
        <div id="header_details_box">
        </div>
        <div id="menu_box">
        </div>
    </div>
    <div id="mainpage_box">
        <div id="mainpage_content">
            blah<br/>
        </div>
        <div id="mainpage_box_bottom">&nbsp;</div>
    </div>
    <div id="footer_box">
        <div id="footer_box_top">&nbsp;</div>
        <div id="footer_internal_box">
            <div id="footer_fade">
                <div id="footer_content">
                    blah<br/>
                </div>
            </div>
        </div>
        <div id="footer_box_bottom">&nbsp;</div>
    </div>
</div>
</body>
</html>

The reset.css is as follows

@charset "utf-8";

html, body, div, span,
applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dd, dl, dt, li, ol, ul,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
border: 0;
font-weight: inherit;
font-style: inherit;
font-size: 100%;
line-height: 1;
font-family: inherit;
text-align: left;
vertical-align: baseline;
-moz-box-sizing:border-box;
box-sizing:border-box;
padding:0;
 }
a img, :link img, :visited img {
      border: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
ol, ul {
    list-style: none;
}
q:before, q:after,
blockquote:before, blockquote:after {
    content: "";
}

And the layout.css is

body
{
background-image:url(../images/header_bg.jpg);
background-repeat:repeat-x;
background-color: #F2F2F2;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}

.clear
{
clear:both;
}

#container
{
width: 970px;
margin: auto;
position: relative;
top: 0px;
left: 0px;
}

#header_box
{
width: 100%;
position: relative;
top: 0px;
left: 0px;
}

#header_details_box
{
width: 100%;
height: 165px;
}

#header_logo
{
position: absolute;
top: 17px;
left: 0px;
}

#menu_box
{
width: 100%;
height: 38px;
}

#mainpage_box
{
width: 100%;
}

#mainpage_content
{
padding-left: 20px;
padding-right: 20px;
background-image:url(../images/mainbox_mid.png);
background-repeat: repeat-y;
background-position: top left;
}

#mainpage_box_bottom
{
width: 970px;
height: 11px;
background-image:url(../images/mainbox_bottom.png);
background-repeat: no-repeat;
background-position: bottom left;
}

#footer_box
{
width: 100%;
}

#footer_internal_box
{
padding-left: 10px;
padding-right: 10px;
background-image:url(../images/mainbox_mid.png);
background-repeat: repeat-y;
background-position: top left;
}

#footer_box_top
{
height: 11px;
background-image:url(../images/mainbox_top.png);
background-repeat: no-repeat;
background-position: top left;
}

#footer_box_bottom
{
height: 11px;
background-image:url(../images/mainbox_bottom.png);
background-repeat: no-repeat;
background-position: bottom left;
}

#footer_fade
{
background-image: url(../images/bottombox_fade.png);
background-repeat: repeat-x;
background-position: bottom left;
background-color: #ffffff;
}

#footer_content
{
padding: 10px;
}

While this maybe true, it is one of the main ones so i do need to ensure the site works on it. Im interested to see if its a rendering bug or a problem with my css. — Adrian Brown, Oct 22 '11 at 15:17

score 1 · Accepted Answer · answered Oct 22 '11 at 20:00

The reason for this is simple, actually. A <div> is supposed to be a division on a page, a separate section of content presentation. This is actually described in the W3C standards for what a <div> represents. This, however, was an ambiguous description. This became even more the case when W3C instructed that proper use was to utilize graphical elements for graphical presentation. Later, the W3C finally clarified that content presentation did not necessarily require content within it, but still maintains that a <div> is a separation of content presentation. Based on the definition, IE is not incorrect.

Every browser has dealt with ambiguous specifications in their own way while trying to add their own value as a browser. Microsoft's approach toward dealing with the ambiguous definition was to require that some level of content be in the <div> for it to render. This was based on their extremely literal interpretation of the W3C specification on the element. Based on the developer need, IE is incorrect. The solution to dealing with the IE is to place a nonbreaking space, as it is not white space, but invisible content.

Currently, the W3C defines the <div> as a grouping element. This means that it can tie other elements together to make an attractive or logical structure. Your usage of the <div>, while standard, contradicts the W3C definition. Therefore, this means that any User Agent (browser) may deal with this issue as they deem appropriate, including not rendering it, which may affect the DOM layout entirely, especially in regard to its siblings. The real issue here is that, in regard to the W3C standards-compliance, both are viable solutions. In regard to Developer standards, IE might want to rethink how they address this issue.

Important Note:

This answer merely addresses the "why" and is not for or against any of the organizational entities mentioned above. The answer does not advocate one technique or interpretation over another and simply presents the facts. Please, do not use this answer to induce debate with me, the asker or any other contributor on this question.

You have to love the way the standards were not defined enough. Maybe I misunderstand, but I can see how the div groups elements into a logical struction, I dont see how based on any interpretation of the standards, two div secitons that are not in anyway linked together, with one being a child of the other, can affect each other. Given that at the moment i basically have two
stuff 1
stuff2
how does the div of stuff2 alter the size etc of stuff 1? — Adrian Brown, Oct 22 '11 at 20:04
There is a clarification in my last edit. They are siblings... being siblings they are intrinsically related, especially when everything is positioned statically. Rendering of a page is done according to their described relation. Since the default positioning is static, this means that the before sibling and after sibling will affect the attributes of the current node. — Fuzzical Logic, Oct 22 '11 at 20:06
They are siblings, i wasnt aware that siblings, positioned statically, would ever overlap (without using css settings im not using). I guess ill put it down to an i.e. interpretation quirk. Its odd how just having another sibling can resolve the situation. — Adrian Brown, Oct 22 '11 at 20:08
This is even more important to note because each of your footer divs has a single child, and not a group of children. (which leads to the "interpretation" problem that I mentioned). You will also notice that you can resolve the issue by placing a sibling, almost anywhere in your little footer tree. :) — Fuzzical Logic, Oct 22 '11 at 20:09
Thanks for your help here, its always good to find out reasons behind things :) — Adrian Brown, Oct 22 '11 at 20:12
No problem. Yes, positioning type is very important to the overall rendering process of a page. Consider reading this question. You probably know most of what is presented here, but there is useful extra information regarding positioning and how it affects its children, siblings, etc. — Fuzzical Logic, Oct 22 '11 at 20:17

Strange CSS issue on IE 7/8/9

1 Answers1