Welcome to WebmasterWorld Guest from

Forum Moderators: not2easy

Message Too Old, No Replies

CSS Box Model

who gets the darn thing right?



2:37 pm on Aug 7, 2002 (gmt 0)

10+ Year Member

I am sooo confused right now.

I am creating a site that so far is pure CSS for the styling and all the content is contained in a few divs.

I have made parts of my page fixed as far as positioning and font size. Now before anyone gets upset, the fixed fonts (in px) are already large and are in locations where I don't want them to resize larger or smaller.

The right hand side of my page is fluid and the main content can be resized on the client side.

My confusion is how Netscape and IE are handling the box model differently.

There are several differences when I view Netscape 6.2 and IE 5.5. One example is a banner that is fluid but the font is fixed. When the screen is resized smaller the text and the box move together and it looks OK In IE 5.5. In Netscape 6.2 the text moves the same but it is outside the box, the box doesn't resize vertically. My question is which uses the correct box model and how can I have both browsers resize both the box and the text?


2:49 pm on Aug 7, 2002 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member

The only version of M$IE that "gets" the BOX MODEL [w3.org] and displays it according to W3C specifications is IE6, even so, a Web Standards inducing <!doctype> must be present to trigger "standards mode" else IE6 backslides into "quirk mode," and IMPROPER rendering.

You can do a site search for "box model" and find many references and solutions.

As far as your text not wrapping within your <div>, do make sure you are assigning unit identifiers for the width declaration. You need to use unit identifiers for ALL values greater than 0 (zero), e.g. 180px, 80%, 6em, and so on.


3:06 pm on Aug 7, 2002 (gmt 0)

10+ Year Member

Here's how the box model is interpreted by IE up to 6 and 6:

http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp?frame=true [msdn.microsoft.com]


3:44 pm on Aug 7, 2002 (gmt 0)

10+ Year Member


I kinda figured that IE was hosed but is working the way I want it to. Come to think of it (the light bulb just turned on) I had set the height to px and the width to %. I need to set the height to %.

Just goes to show how hosed IE is when it is resizing my set 100px height banner. Since I tested first in IE I was confused and forgot that my height was fixed since it wasn't being fixed by IE.

Thanks guys


8:13 pm on Aug 7, 2002 (gmt 0)

10+ Year Member

When Margins are specified as a percentage (specifically margins on a 'div' in this case), can anyone explain what measurement the percentage is applied to? In IE 6 I'm seeing such a large movement for each margin increment that the only thing I can guess is the diagonal of the body, which is the parent in this case. Maybe I just answered my own question. The diagonal of the parent?

Any guidelines for when to use percentages vs. pixels, etc?

Thanks much.


9:41 pm on Aug 7, 2002 (gmt 0)

10+ Year Member

It's kind of complicated [w3.org].

However, the rule of thumb is that a percentage values for elements are based on the width of the containing block.


10:12 pm on Aug 7, 2002 (gmt 0)

10+ Year Member

Thanks moobiter.

Sheesh! I've either got to accept the rule of thumb or start popping Advils. I'll go with the rule of thumb.

This is kind of weird. Lets say the container is the body. Based on screen sizes and other things, some bodys will be relatively tall & skinny as compared to others that are relatively short and wide. Using the percentage format for a top margin would push the element further down on the short and wide screen and keep it higher up on the tall and skinny. Just the oposite of what one might expect (and want), no?


10:35 pm on Aug 7, 2002 (gmt 0)

10+ Year Member

to add to your pain, try checking your site to opera 6.0 and mozilla 1, ... i think it would take another 2 years before they (browser makers) could follow the standards perfectly.

As for me, I have to test them in different browser, they all have their flaws, specially when specifying length as auto or not putting the property at all.

happy tweaking! :)


11:12 pm on Aug 7, 2002 (gmt 0)

10+ Year Member

This is kind of weird. ...

You're right -- that's weird, and I never noticed it before.

My other rule of thumb is to avoid relative values such as % and em on heights. ;)

I think it's because I read this [richinstyle.com] early on as I was learning CSS.


11:53 pm on Aug 7, 2002 (gmt 0)

10+ Year Member

Good reference Moonbiter.

Vertical margins should relate either to the line height of the element (which should be proportional to font size) or the font size of the element (definitely not to the width of the container).

Exactly my thoughts.

Featured Threads

Hot Threads This Week

Hot Threads This Month