CSS padding Firefox vs IE

ARRG! So I recently (about a week) started learning/using CSS to build a website. You might remember my thread not too long ago about how to make a modular setup. Thank you so much to the people that responded to that thread. It solved that problem. However, I'm having some other beginner issues because firefox and IE seems to interpret padding differently.

If i made a division class of width:200px; margin-left:20px; border-left:10px; padding-left:5px;, then I would assume the <div> would take the space of 230px with active text room of 170px.

This is assuming the following:

width - defines the outside edge of borders

border - width is added INTO the width space so DOES NOT expand overall division width.

margin - width is added OUTSIDE the boarder and width space so this DOES expand overall division width.

padding - width is added INTO the border so DOES NOT expand overall division width.

Are the above assumptions correct?
It seems my testing with Firefox and IE are producing different results as if they interpret these properties differently.

Is it true that these things are interpreted differently? If so, how so? From what I've tested, it seems padding for Firefox seems to expand the overall width. How do I layout the page so that these differences between firefox and IE would not be so?

Right now, I'm thinking, to get around the padding issue, I would nest two divisions using "margins" only because it seems margins are interpreted the same for both Firefox and IE. This is an option for me because I don't need a background image. However, I thirst for a more elegant way of processing this difference.

Very easy fix that should work!
at the top of your stylesheet put:

Code: Select all

* {margin: 0px; padding: 0px;}

This tells all browsers not to add any padding or margins unless you tell it to!
* is the universal selector which applies to everything.

Good luck.

Yes, at the top of the page I do put that. The problem is, I actually need some margins/padding so when i specify them in the specific uses, it screws up. Is there a better way of margins/padding then?

Okay, so I also discovered that "borders" are also handled differently between IE and Firefox.

I made a few examples to show my frustration. I made the boarders wide (40px on each side) to illustrate it easier:

The CSS embedded html files are here:
http://www.ece.ualberta.ca/~wliu/css/

Each one is also followed by a screen cap of how differently they look in Firefox vs IE. So here is a description:

(Note: I basically want a width of 770px of usable space all the way down the page.)

example1:
division width: 770, border: 40 on each side.
banner pic width: 770

Top Banner: Both Firefox and IE does what I want.
Content: Firefox does what I want, but IE seems to somehow clip the available space for the "pink" division by 40+40 = 80px.


example2
division width: 770+40+40 = 850, border: 40 on each side.
banner pic width: 770

Add on the 80 pixels to width and Firefox expands overall width by 80px as expected. However, IE does not expand overall width at all.
Top Banner: Now firefox top banner is 80px too wide for the banner photo, but IE is doing what I want.
Content: Now in Firefox, the "pink" box is wider by 80px which is cosmetically okay. IE is now doing what I want in this bottom content section. The pink section's width is regained to the correct width.


example3
division width: 855, border: 40 on each side.
banner pic width: 770

Add another 5px to width for kicks to see what happens.
The two browsers now react similarly to the change. The background for the top banner is another 5px bigger while banner photo remains the same. The bottom "pink" content is not pushed inwards and is expanded by another 5px.



Please, please, please, can anyone help figure out what's going on and what I should do such that I get what I want in BOTH browsers.... I've been frustrated with this since yesterday afternoon!

- Weiyang

Is you code hosted anywhere so we can see what is going on. Sometimes it's easier to SEE what the problem is instead of reading what the problem is

Ok ... for one ... don't use the * fix ... It's better to define the padding and margin to each element by doing

Code: Select all

html, body, ul {
    margin: 0;
    padding: 0;
}

Next ... yes Ie and FF interprets the box-model differently. When you set a width in you CSS and have margins, padding and borders, FF will count that in the total width of your div as oppose to IE6 that doesn't.

Thus referring to the Box Model Hack

However, it is now better to define the different width using IE conditional comments like this

HTML: Select all

<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->

hth