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

before the 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!

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;
}

Fuzzical Logic · Accepted Answer

The reason for this is simple, actually. A

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

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

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

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

as a grouping element. This means that it can tie other elements together to make an attractive or logical structure. Your usage of the

, 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.

Strange CSS issue on IE 7/8/9

Answers (1)

Related Questions