IE7 Image Padding

Question

Hi Guys,

I have a simple function which attempts to calculate height and width of an image using jQuery for a slideshow box. The problem I am seeing in IE7 is the really strange effects padding seem to have on width/height.

I have an image in Firefox and value returned is 450 x 324 [width / height] with CSS values of

border:0 none;
float:right;
padding:20px 10px 30px 10px;
width:450px;

In IE7, it gives me a width of 470 and height of 374 ? How to do I calc the "real" values ?

Answer 1

IE's old box model (aka quirks mode) included padding in the width & height, the W3C box model (aka standards mode) does not.

If you use an xhtml or html5 doctype, IE7 will render in standards mode and this will no longer be a problem.

Answer 2

Peter's correct - here is a link for context

http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug