http://www.cheapcss.com

If you look at the lower image, right above the rounded bottom and links, it doesn't move down with my margin-top there.

Works fine in IE7, but when it comes to Google Chrome and FF, they don't want to work.

I know margin works in both, I have tons of margin's in there besides that one.

You can use the FF plugin "Firebug" to see my xhtml & css.


edit: I know what it's doing, but don't know how to fix it...

It's merging these two margins:

margin: 0 auto;
background-image:url(images/bottomimage.png);
margin-top: 8px;

When it does this, it renders as

margin:8px auto 0;

instead of seperately.


How do I fix this?

margin:8px auto 0;

That's just a shortcut that means exactly what you did above it. Firebug has a tendency to do that when it displays code for margins.

I don't see the problem you're describing. Did you fix it?

Yep, it's doing exactly what you told it to - first applying margin: 0 auto, then applying the 8px top margin. Why not just write it this way ? margin: 8px auto 0 auto; ??

Alright I got it, I had to mess with the DIV it was nested in.

I'm under the impression that floating it will also fix the problem.

Thanks for the tip, if I have any issues with that DIV area, I'll definitely give it a shot.