Kill your padding
Hi there. The thing that always breaks up everything is the padding. The norm says that padding is supposed to be as part of the container, while IE6 and lower treats padding as it should be added to a container.
Example:
Say I want a div 100px wide, but with 10px padding.
On complaint browsers it'll give you a 100px box, with 80px left you can use to put your content in (10px padding on each side).
On IE6 and lower browsers it'll give you a 120px box, with 100px to put your content in (adding 10px padding on each side).
So basically, when in one browser it appears a 100px box, in the other is a 120px box, so everything gets screwed up...
The solution is to kill all your padding and never EVER use it as part of your design. If you need the functionality, add a NEW container inside, and use margins to simulate padding. Nifty trick that makes my websites look 98% the same on different browsers... ;)
|