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.
Here's how the box model is interpreted by IE up to 6 and 6:
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.
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?
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.
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?
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! :)
|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.
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.