Tuesday, September 01, 2009

I have extra 16px width or height in my web page!

Usually this happends in IE, but it may happen in a various other situations, given that Internet Explorer is famously bad, but also has to fight with all the backward compatibility and that new "innovative" browsers are on the way.

Let me make this easy: if it's a weird sixteen pixels difference (or somewhere around 16) then you probably are in one of these situations:
  • scrollbars - that you may not see, but they are there. I've just met this issue with a table of 100 percent width placed in a div of 100 percent width and it happened in IE8!
  • line-height - this is usually with Internet Explorer 6 or less, divs that are 16px in height when they have no content and have a specified lower height
  • font-size - also something from the older browsers