CSS - Margins a bad thing?

Question

Hi, 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 :)

Answer 1

I'd suggest using some form of CSS Framework (Blueprint CSS, 960 Grid, etc) as they have a number of margin, padding and other common HTML element resets. You should find cross browser development is easier using a framework.

Answer 2

Different browsers have different ways to handle box model. Most of the time the sites which are displayed well in FF, Chrome or IE8 can have problems in IE6 and 7. To workaround this problem you can try to set all the default margin and padding to 0 (and adjust them as needed on specific elements):

*{ margin:0px; padding: 0px; } //Simplest rule...

To see more on CSS reset you can look at: http://meyerweb.com/eric/tools/css/reset/

And then apply different styles for IE7 and 6 with conditional comments.

Answer 3

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)

Answer 4

I disagree with using a library if you want to learn about CSS part of the curve unfortunately is learning about the ways different browsers react to CSS. I wouldn't even suggest using a reset stylesheet. If you are going to be doing this a lot learn how CSS works. If you use a library or a set stylesheet which you don't understand how will you fix it when it breaks.

Answer 5

As mentioned on other answers it's to do with IE's interpretation of the box model.

Whenever anything is floated IE tends to double the margins specified. This can be fixed with an extra stylesheet for IE using conditional comments.

See also: http://www.positioniseverything.net/explorer/doubled-margin.html

Answer 6

There is nothing wrong with using margins.

Old versions of IE have one bug and that alone isn't nearly enough of a reason to avoid using one of the core layout features of CSS. Specifically, this bug occurs in IE when you float an object and give it a margin in the same direction, e.g.:

.whatever {
    float: right;
    margin-right: 5px;
}

You can deal with this a number of ways, depending on your layout. One way would be to add another div around your box and use padding on that to replicate the same space a margin would.