homepage Welcome to WebmasterWorld Guest from 23.20.61.85
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
CSS Box Model
who gets the darn thing right?
pcguru333

10+ Year Member



 
Msg#: 270 posted 2:37 pm on Aug 7, 2002 (gmt 0)

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?

 

papabaer

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 270 posted 2:49 pm on Aug 7, 2002 (gmt 0)

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.

DrOliver

10+ Year Member



 
Msg#: 270 posted 3:06 pm on Aug 7, 2002 (gmt 0)

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]

pcguru333

10+ Year Member



 
Msg#: 270 posted 3:44 pm on Aug 7, 2002 (gmt 0)

Thanks

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

RossWal

10+ Year Member



 
Msg#: 270 posted 8:13 pm on Aug 7, 2002 (gmt 0)

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.

moonbiter

10+ Year Member



 
Msg#: 270 posted 9:41 pm on Aug 7, 2002 (gmt 0)

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.

RossWal

10+ Year Member



 
Msg#: 270 posted 10:12 pm on Aug 7, 2002 (gmt 0)

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?

copongcopong

10+ Year Member



 
Msg#: 270 posted 10:35 pm on Aug 7, 2002 (gmt 0)

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! :)

moonbiter

10+ Year Member



 
Msg#: 270 posted 11:12 pm on Aug 7, 2002 (gmt 0)

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.

RossWal

10+ Year Member



 
Msg#: 270 posted 11:53 pm on Aug 7, 2002 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved