I’ve noticed that some browsers have trouble with margins, especially when an element is floated. For example, this website I’m doing looks fine in Firefox, but IE7 screws up the margins completely it seems. I also testet it on several Linux browsers as well and some of the make similar mistakes.
The site is
http://w3box.com/mat
This looks fine in FF3.0 as far as I can tell. Haven’t seen it in FF2 yet, or IE6.
Why does this happen? Is it because I’ve got floated DIVs with specified margins?
Are there some things I should avoid or should have done differently?
Edit: So it looks like my tags was the source of the screwup.
I’d placed images in the that was not defined in the CSS and that had floats on them, combined with margins. These screwed up everything and I have to redo these.
Also, some stuff happened when I used XHTML Strict instead 🙂
Thanx everyone! I’ll try to fix this on my own 🙂
Marging are not bad, but IE has some troubles with the margins of float elements. While there are many recipes for fixing, I believe that in your case you may use absolute positioning instead of float+margins (you don’t really need “float” behavior when the image is wrapped by text)