Hi, I was just messing around with some fluid layouts, which included something like 2.5% padding, however I then realised IE seemed to have a problem calculating this correctly. For a simple example see below: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>x</title> <style type="text/css" media="screen"> #header, #footer { border: 10px solid #000; } #header { width: 901px; height:10px;} #footer { width: 850px; padding: 0 25.5px 0 25.5px; height: 10px; } </style> </head> <body> <div id="header"> </div> <div id="footer"> </div> </body> </html> Code (markup): Test in FF and IE they should be same width obviously. Does this mean one should avoid using decimal points throughout my CSS for anything (padding, widths, borders, margins) etc... Also with the example I noted another dodgy thing with IE, if I was to remove the declared height of 10px for the DIV it would still create it's own height when theres nothing even in there, crazy!
There are those who've sussed out the rounding rules each browser uses, but none of them are me. On the other thing, IE creates an anonymous inline box for an element, even if it's empty. The height is equal to the line height, and because the container has a declared height, hasLayout is triggered, and the box expands to hold the inline box. At default font size, a div will have a minimum height of 19 or 20px (16px font size at 1.2× line-height = 19.6px). Set the font-size of the div to a small value, say 0. cheers, gary
Well it seems from just small tests i've done IE is just ignoring the decimal point altogether so even if it was 25.9 IE would still see this as 25. Would it be correct to therefore take the stance to not use decimal points at all inside CSS? I guess three's no harm in just going to the nearest number, and it would avoid any cross-browser problems. Yep setting line-height: 0; seems to correct this, I really need to read about "hasLayout" as I don't fully understand this concept yet!
See On having layout. Fortunately, MSFT has removed this "feature" from IE as of v.8. Pixels are, of course, integer entities. The problem arises when applying a value relative to another. For example, an inherited font size of 11px, and you want a font size of 1.5em. That is 16.5px, which must be made an integer. Does the browser round up to 17px, round down to 16px, truncate the fractional component for a value of 16px, or always round up (ceil)? cheers, gary
And as I understand it, Opera has its rules, and Gecko has its rules, and IE has its rules... when they round and how. I've used decimals for em's but there are not only differences between browsers but also it seems windowing systems. Gnome seems to be able to increase the width of text of em size in a box of em size so the text needs to wrap, in both FF3 and Opera9.6... while Windows' windows don't, on any browser. Bleh. Yet another reason why some techniques will only get you approximations cross-browser.