firefox boxmodel bug

**Nathan Collette** · 06-19-2007 02:54 PM

I'm having nightmares trying to get margins and borders to behave. I wrote this simple example of the problems I'm having. IE 6 and 7 display it just the way I think it should be displayed, while firefox 2.0.0.4 and 3.0 beta screw it all up.

Here is the html code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<head>
<title>TestDivs</title>
<style type="text/css">
@import url("main.css");
</style>
</head>
<body>
<div id="content">
<div id="container">
<div id="leftColumn">
<div id="filter">
some data as filter
</div>
</div>
<div id="rightColumn">
<div id="grid">
some data in the grid.
</div>
</div>
</div>
</div>
</body>
</html>

Here is the css code:
#content {
border: 3px solid black;
}
#container {
border: 3px solid blue;
}
#leftColumn {
border: 3px solid orange;
}
#rightColumn {
border: 3px solid green;
}
#filter {
border: 3px solid purple;
}
#grid {
border: 3px solid red;
}

Has any one else experienced such frustration? How can I get the divs to stay within the widths of their containers?

Thanks,

**ryanbutler** · 06-19-2007 04:04 PM

For starters, you're calculations will be using the broken box model period (regardless of browsers) because you're using an incomplete DOCTYPE. Append on the full DOCTYPE for HTML strict.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

Continuing, what are the widths of your content DIV's? Widths and borders must equate precisely to the same width or your layout will break.

**Nathan Collette** · 06-19-2007 05:48 PM

html {
width: 100%;
}
body {
width: 100%;
}

#content {
border: 13px solid black;
width: 60%;
}
#container {
margin: 3px;
border: 13px solid blue;
width: 100%;
}
#leftColumn {
width: 100%;
border: 13px solid orange;
}
#rightColumn {
width: 100%;
border: 13px solid green;
}
#filter {
width: 100%;
border: 13px solid purple;
}
#grid {
width: 100%;
border: 13px solid red;
}

That specifies the widths. Sorry about that. I also changed the Doctype so that it was complete, but it didn't seem to help.

**WebJoel** · 06-19-2007 05:49 PM

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>

<style>

#content {
border: 3px solid black;
}
#container {
border: 3px solid white;
}
#leftColumn {
border: 3px solid green;
}
#rightColumn {
border: 3px solid green;
}
#filter {
border: 3px solid red;
}
#grid {
border: 3px solid red;
}

</style>

<script type="text/javascript">
</script>
<link rel="shortcut icon" href="favicon.ico">
</head>
<body>

<div id="content">
<div id="container">
<div id="leftColumn">
<div id="filter">
some data as filter
</div>
</div>
<div id="rightColumn">
<div id="grid">
some data in the grid.
</div>
</div>
</div>
</div>

</body>
</html>

I don't quite understand the problem, but "orange" isn't exactly a color normally used. It appears as if one box is larger than another, but if you swap the color names around so that they match, it's the same. Also noted that I stripped margins & padding to "zero". this gets you away from IE adding it's own values, and now it correctly uses all/any margins & padding that the <STYLE> assigns. (IE likes to add a pixel or three for some selectors).
And also, a !doctype with a URL so as to 'check'.

**WebJoel** · 06-19-2007 05:54 PM

This works for IE and Firefox. "Width:100%" is "100% of the parent" and this is before adding the border-widths. "auto" compensates for this and it displays normally.

p.s.:

html {
width: 100%;
}
body {
width: 100%;
}

can be shortened to:

html, body {
width: 100%;
}

**Jeff Mott** · 06-19-2007 08:54 PM

IE 6 and 7 display it just the way I think it should be displayed, while firefox 2.0.0.4 and 3.0 beta screw it all up.

IE is cheating. In IE, your #content box is not actually 60% wide. IE thinks you made a mistake in your CSS, and it's fudging one of your other CSS rules to accommodate what it thinks was your mistake. It's a bad idea to rely on IE's fudging. It's a much better idea to simply fix the CSS. In this case, all you need to do is remove all the "width: 100%" rules. A DIV will, by default, expand horizontally to fill the remaining space.

Here is your new CSS:

Code:

#content { border: 13px solid black; width: 60% }
#container { margin: 3px; border: 13px solid blue }
#leftColumn { border: 13px solid orange }
#rightColumn { border: 13px solid green }
#filter { border: 13px solid purple }
#grid { border: 13px solid red }

When you refresh your browser with this code, both IE and FF will render the same, and in IE you will also see the #content box shorten to a true 60% width.

**Nathan Collette** · 06-19-2007 10:39 PM

What would I do without people like you--willing and able to help. I truly appreciate your time and responses. I hope to become as good as you in this regard.

Thanks again guys,

Nate

PS Here's ultimately what I was trying to achieve, and was able to due to your responses.

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<head>
<title>TestDivs</title>
<style type="text/css">
@import url("main.css");
</style>
</head>
<body>
   <div id="content">
      <div id="container">
         <div id="leftContain">
            <div id="leftColumn">
               <div id="filter">
                  some data as filter
               </div>
            </div>
         </div>
         <div id="rightContain">
            <div id="rightColumn">
               <div id="grid">
                  some data in the grid.
               </div>
            </div>
         </div>
        <div class="clear"/>
      </div>
   </div>
</body>
</html>

and of course your css:

HTML Code:

#content { border: 13px solid black; width: 60%;}
#container { margin: 3px; border: 13px solid blue;}
#leftContain{border: 0px solid black; width:30%;float: left;}
#leftColumn { border: 13px solid orange;}
#rightContain{border: 0px solid black; width: 70%; float: right;}
#rightColumn { border: 13px solid green;}
#filter { border: 13px solid purple }
#grid { border: 13px solid red }
.clear {
clear:both;
overflow:hidden;
}

Thanks again for all help. I sure appreciate it.

Thread: firefox boxmodel bug

Thread Tools

Display

firefox boxmodel bug

I accidentally posted an incomplete version of css

You guys are truly awesome.

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions