Pixel Perfect Layouts

| 0

Ever wanted to know what struggles pixel perfect CSS layouts might cause you? Did you for example know that every browser has rounding problems when calculation the pixel positions of your divs? Check out the test at Position is Everything. Crazy, huh?

Well and when you mix that with divs floated on the right, Firefox will calculate the biggest b***s*** you can think of… Plus: you might think that margins and paddings are the same simply the other way around. I do so as well, but Firefox doesn’t. So when dealing with nested divs you should always use margins instead of paddings. You will confuse Firefox like hell if you won’t.

Enough about Firefox, Internet Explorer has problems as well. Take the 3 pixel jog bug which caused me a lot of headaches. But when you figure out the trick the beast can be handled.

Oh, and if you want to use an extremely fast (concering rendering and Javascript execution speed) browser which at the same time layouts everything I’ve played around with perfectly I recommend Opera. This little fellow lets the web feel faster while surfing. Check it out.

Having no idea what the heck I’m talking about? Well, be patient and check back in a few days.

[tags]web development, css, layout, firefox, opera, internet explorer, bugs[/tags]