In developing the next version of Gridinator, I wanted to make sure that everything that I was allowing in the pixel and em based layouts were available in the percentage ones too. That meant I needed to write fluid prefixes, suffixes and a few other things that are a little bit more complex in a liquid layout.
So this is where I ran into some major inconsistencies in the way different browsers render percentage values. While I'm well aware that things don't have to look the same in every browser, it just seems to strike me as odd that CSS3 features keep getting touted on the front of browser homepages, and yet something as fundamental as a percentage would be rendered incorrectly (or, rather, not as well as would be expected).
The image above shows a comparison of a Gridinator generated grid as displayed in Firefox, Safari, Chrome, Opera and IE6 through to IE9. To make it a fair test, the browser window was set to 940px in each case (thus giving IE6 a fighting chance, as it would normally ignore the max-width attribute). Each column is floated left except for the last one in each row, which is floated right.
Anything strike you as odd?
I don't know what I was expecting, but I was hoping for consistency between the modern browsers at least. Opera ignores the decimal places, Safari and Chrome seem to round to one decimal place, and who knows what IE8/9 are doing. Interestingly, it seems that Firefox rounds almost perfectly, as do Internet Explorer 6 and 7. This means that Internet Explorer is getting worse at rendering percentages in the more standards compliant versions than the ones us webbies have wanted dead for some time.
So, what is the answer? Is the hope of a truly flexible, fluid grid just a dream? Do we have to just settle for using CSS3 media queries and use things like Less Framework? Don't get me wrong, I have nothing against the noble pixel, but I really want to push forward and use more responsive designs with true fluidity.
Update: I've put the source HTML/CSS online so you can test for yourself.