Firefox + IE5/6/7 Woes

Associate
Joined
11 Mar 2003
Posts
1,328
Location
North Shields
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

Sic

Soldato
Joined
9 Nov 2004
Posts
15,365
Location
SO16
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
 
Associate
OP
Joined
11 Mar 2003
Posts
1,328
Location
North Shields
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?
 
Soldato
Joined
18 Oct 2002
Posts
5,464
Location
London Town
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

Sic

Soldato
Joined
9 Nov 2004
Posts
15,365
Location
SO16
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?
 
Associate
OP
Joined
11 Mar 2003
Posts
1,328
Location
North Shields
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! :p

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 :p

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!
 
Back
Top Bottom