[CSS] margin-top on image in Safari not working

[Alkafy Grandpa]

Hi,

I'm currently working on a small "student support" website for my college. I've validated both the xhtml and css with W3C and pounded out all of the bugs in most major browsers.

However, Safari seems to be ignoring the "margin-top:-130px" property of an image in my footer and I'm not sure why. When I commented out that property, IE and Firefox displayed the problem identically to Safari so I can tell that it's simply skipping that command.

From searches on Google, I can't find any known issues with it so I can only assume I'm doing something wrong, which isn't all that shocking. I only began coding in CSS last week, as you'll probably be able to tell soon.

Here are the files:
http://www.muc.edu/~loudintl/footerfix/index.html
http://www.muc.edu/~loudintl/footerfix/css/master.css

The image in question is the bottom right "Mount Union College" logo.

Any help would be greatly appreciated - even off-topic tips if you have them, since I'm really not sure if my code is up-to-snuff even if it did validate.

Thank you!

Travis Loudin

[Alkafy Grandpa]

My temporary solution is to target Safari through a CSS hack and completely hide the image, using


body:last-child:not(:root:root) #footer #mucbar {
display: none;
}

It's a working solution for now, just not very pretty. I'd still appreciate any and all suggestions. Thank you

[_Aerospace_Eng_]

I'm pretty sure you can't apply a top or bottom margin as well as top or bottom padding to an inline element like an image. If you made the image display:block; then I think the margin would work properly.

[Alkafy Grandpa]

I'm pretty sure you can't apply a top or bottom margin as well as top or bottom padding to an inline element like an image. If you made the image display:block; then I think the margin would work properly.
Thank you for the reply!

I tried display:block; in the page container, footer, the #mucbar element and various combinations of all three. They didn't seem to affect the layout at all in any browsers. Am I missing something?

[Alkafy Grandpa]

I got my answer: apparently there's a bug with float elements and negative margins in Safari.

http://www.456bereastreet.com/lab/float_negative_margins/

I changed the element to "position:relative," modified the padding a little and all is well. Thanks everyone,

Travis