I have a quick question regarding div widths and cross browser compatibility. I’ve been using Opera and its Dragonfly developer’s tool to test my css and just as soon as I finally got all of my widths correct for my layout, I tested it in other browsers and I found that they’re rendering differently in Chrome, FF, and IE8. Of course they’re working fine in Opera which is where I set them, but for some reason they’re all different in the other browsers.
My question is should I use a different element for the widths instead of percentages? Should I switch them to their equivalent pixel widths? How can I set these so that they render the same in all browsers? I thought that my CSS reset (the Eric Meyer reset) would unify all the different settings, but there must be something missing. The main container for the page is set to a pixel width, but the main content container boxes are all set to percentages. Any feedback on this would be much appreciated.
Thanks for the feedback - I figured that there was a problem with using percentages instead of pixels, but wanted to ask before I went and started changing things again. I appreciate the help. Now on to making some changes…
It comes down to rounding values to whole numbers. There is no consensus on whether one should round up, down, or closest. So each one will exhibit a different behavior. As for an alternative…I really couldn’t tell you.
Opera doesn’t do fractions of a percentage which is why it fits in Opera. If you say 12.5% then in opera you get 12% but other browsers will round 12.5% to the nearest pixel.
Your measurements seem flawed as you have a container of 1000px width and then your content-container is 74% of that width
74% of 100px = 740px wide
Your feature boxes are 27.5% wide + 2px border + 40px padding + 1.1% margin
= 203.5 + 2 + 40 + 8.14 = 253.66 pixels
There are three of these in the content-container box and deducting the margin from the last one we arrive at a width of 752.78 pixels which is over 12 pixels too wide to fit.
Some browsers will round up and some will round down so to be safe you would need to make the elements add up to about 2 or 3 pixels smaller than the space allowed.
I don’t understand why you are using percentage widths when your layout is 1000px wide to begin with. It would be easier to use pixel widths and know exactly where you stand down to the last pixel.
The only reason to use percentages in your case would be if you were going to change the main parent wrapper to a different pixel width and wanted the rest of the page to scale automatically.