Thursday 18 June 2009

Div width in IE and FireFox

Today I run into a strange problem. I was setting up the width property of a <div> container on a web site. I always test my sites on both IE and FireFox. But it seems that they render the width property differently. I put it together in the following picture:


As you can see, if you set the <div> width on 775px, in IE the actual width is 775px, including margins and paddings.
FireFox (and also Google Chrome) behaves different. The width property is for them only for the element, without the margins and paddings. They added their size onto the actual width as well.

To get you site behaving the same in both IE and FireFox, you can add some nasty css tricks or just put the following line just before the <html> tag on your (master)page:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This doctype declaration will let behave IE as FireFox (and Google Chrome) does.

And again, IE (I'm using IE8!!) is wrong and not following the W3C standards. Read about the formatting model here how a browser needs to deal with element width and box width.

No comments: