Quick CSS problem

[GravyMonster]

Here's the code:

<div style="width: 575px; height: 101px; border: 1px dotted #666666; padding: 10px;">
	lorem ipsum
</div>

IEdoes as it's supposed to and leaves the width as 575px even with the padding applied. FireFox though makes the width 595px to include the padding - is there any way to stop this, without using an IE only hack?

TIA

 

[simisker]

Actually, IE isn't doing what it's supposed to - the W3C standard box model excludes padding/borders from width declarations. It's arguable that the standard way might not be the best/most intuitive way, but hey - it's the standard; might as well stick to it, like Firefox, Safari and Opera do. This is one of the reasons why it's preferable to use Firefox [or another, more standards-compliant browser] over IE as your primary testbed.

I may not be on the bleeding edge of web design at the moment, but as far as I know, the only way to get browsers to use the same box model is to use a method called Doctype Switching. Essentially, specifying a certain doctype ensures that all browsers switch to a mode that allows consistent rendering. Which doctype you use is your choice, dependent upon a number of factors, like the target audience's likely browser. Once this is done, no related IE hacks are required for the box model issue [plus a few more cross-browser issues].

More here:

http://css.maxdesign.com.au/listamatic/about-boxmodel.htm
http://www.quirksmode.org/css/quirksmode.html

 

[GravyMonster]

TBH i did find it strange typing the words 'IE' and 'as it's supposed to' in the same sentence

I've amended the design now to cater for the slight pixel difference - thanks for the reply though!