Firefox + IE5/6/7 Woes

elkdanger · 3 Aug 2006 at 13:18

I think I might be missing something here. I'm trying to create a liquid layout as described in this months .Net magazine, which mainly uses .em sizes for accessibility as opposed to a pixel-perfect layout.

The main issue I have is that when adding borders, padding and margins the resulting sizes of div sections are different between IE6/7 and Firefox. IE still seems to include the borders, margins and any padding inside the specified width of the box, whereas Firefox (correctly, AFAIK) takes the specified width + margins + padding + borders to calculate the final width of the area.

I thought that this "bug" was only supposed to affect IE5/.5 and early Opera browsers, but was rectified for IE6 and 7. As far as I have experienced, this is not the case. Where am I going wrong?

Edit: Also, I've tried using the box model hack which was designed for IE5/.5 but this hasn't solved the problem.

Sic · 3 Aug 2006 at 13:43

Code:

* {
padding: 0;
margin: 0;
}

tried that? IE and FF have different defaults padding/margin settings - that usually irons out most of the little niggles (that's right...niggles) that i get

SpicyDuck · 3 Aug 2006 at 13:45

I was about to recommend the same thing.

That's the first piece of CSS I write when starting to build a new website.

elkdanger · 3 Aug 2006 at 13:53

Sic said:
Code:

* { padding: 0; margin: 0; }

tried that? IE and FF have different defaults padding/margin settings - that usually irons out most of the little niggles (that's right...niggles) that i get

Ah - I had, but I used that on the body element and not *. I've changed it now.

But the problem is I want elements to have padding, but the div's do not keep a uniform size between IE6/7 and Firefox and I was wondering why not. If the box hack doesn't work for these versions, what can I do?

Augmented · 3 Aug 2006 at 13:53

elkdanger said:
I thought that this "bug" was only supposed to affect IE5/.5 and early Opera browsers, but was rectified for IE6 and 7. As far as I have experienced, this is not the case. Where am I going wrong?

Edit: Also, I've tried using the box model hack which was designed for IE5/.5 but this hasn't solved the problem.

The box model problem is only fixed in IE6 when rendering in standards mode. The mode is switched depending on the doctype you use: http://hsivonen.iki.fi/doctype/. A Strict doctype will usually ensure you get IE6 in standards-mode.

The universal reset posted above is a very good recommendation for avoiding many cross-browser issues.

Sic · 3 Aug 2006 at 13:58

elkdanger said:
Ah - I had, but I used that on the body element and not *. I've changed it now.

But the problem is I want elements to have padding, but the div's do not keep a uniform size between IE6/7 and Firefox and I was wondering why not. If the box hack doesn't work for these versions, what can I do?

all that does is sets your default padding/margin to zero...you can still set padding.

you're going to have to be more specific when referring to size - are you talking about height, width, padding, margin?

elkdanger · 3 Aug 2006 at 14:08

Augmented said:
The box model problem is only fixed in IE6 when rendering in standards mode. The mode is switched depending on the doctype you use: http://hsivonen.iki.fi/doctype/. A Strict doctype will usually ensure you get IE6 in standards-mode.

The universal reset posted above is a very good recommendation for avoiding many cross-browser issues.

That's exactly what I was looking for - I'm using the correct DocType now (I didn't have one specified at all) and all is well. Good man!

sic said:
all that does is sets your default padding/margin to zero...you can still set padding.

you're going to have to be more specific when referring to size - are you talking about height, width, padding, margin?

Yes I realised that about the padding and margin - I had just specified it in the wrong element

When talking about the size I was referring to the total width of an element and how it was calculated, as talked about here. Mine wasn't working as expected, but has been sorted now by specifying the DocType - I didn't realise the doctype had such an effect, as I thought it was purely for validation purposes.

Thanks guys - I've just learned something pretty vital to cross-browser CSS layout development!