The width, padding, margin, border size difference you are seeing is called the box model bug.
The box model is the way you add up width, padding, margin and border to get total hight and width. That is the total box that the element uses up.
There are two common box models. The border box and the conent box. The w3c recommends the content box as correct. However IE5 used the border box model. To further confuse things, IE6 uses both models.
IE6 has a system called doctype switching that will change how a page renders depending on how the page is coded. If your page is valid w3c standart code and has a doctype statement at the begining then IE6 runs in strict mode that uses the content box model. Where as, if you use invalid code, the wrong doctype or no doctype, then IE6 runs in Quirks moded. Quirks mode uses the old IE5 border box model.
A simple sollution to your problem, if you don't worry about IE5 and only care for IE6, would be to validate you html. You will then get IE6, FF and Opera all using the same box model (the content box model).
If you do want to support old browsers like IE5, then I suggest you read my tutorials listing various box model hacks and work arrounds.
http://www.splodgy.com/tutorials/box_model/ |
