I have the following CSS: .main { border: 1px solid #336699; margin-left: auto; margin-right: auto; margin-top: 30px; margin-bottom: 30px; width: 700px; } Code (markup): Works fine in Firefox, but does not seem to work in IE. In particular, 'margin-bottom: 30px;' does not create a space at the bottom. What am I doing wrong? How can I fix this? (FYI, http://www.cre8iveonline.com/charity/index.htm is where the test site is located.)
I'm not sure what's "working fine in Firefox" cause on my Firefox the content is spilling out of the container and pooping all over the bottom of the screen : ) I think normally the margin-bottom: 30px would work (unless margins are collapsing, in which case the easy trick is to add 1px of padding to force the margins to stack instead of collapse), but your whole page is wrong. You have no <html> or </html> tags. At all. So, what is this? It's not an HTML document. : ) Second, you have no <head></head> tags, which is what your scripts and styles should be sitting in (actually, your scripts and styles should be in seperate files, but it's okay if they sit in the <head>). At least you have a doctype, that's a start. But you need a proper document heading, with at the very least a <title></title> in the <head> and some <meta> tags explaining the type of document you have (unless you have the server explaining this in the HTTP Headers but this is normally not the case) and what type of character encoding etc. So, with these two huge errors, there could be any number of other errors in your HTML which can often make the page look bad in one browser or another. So, we really couldn't answer the specific question of what's going on with .main until the errors are gone. Never go bug-hunting when there are errors, even if the errors themselves aren't the cause. They make browsers act erratically (browsers do try to correct for errors and try to guess what you meant, but they don't all do it the same way so results vary).
Margins don't work in IE like they do in Firefox and other browsers. If you set a margin, that's the space meant to separate that block from the next block, but for instance a 10px margin element within another one with 20px padding, the distance from the elements won't be 30px, but 20px (the padding "eats" the margin). Also margins from different elements "eat" ech other (two elements with 20px margin will be separated by 20px, not 40px).
That's called "margin collapse" and it's supposed to happen according to the specs. IE does it too, but where you often see problems with IE is setting margins on static content which is sitting under a float. Padding does not collapse. Setting padding to 1px will often stop margin collapse because while the browser can collapse the margins, it MUST honour the padding. However, I would not bother telling someone to try bottom padding (which may well work) on a page that is so so bad. I wouldn't repair the tires on a bus that has no engine either.