(Safari) Margin-top in Footer 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

[drhowarddrfine]

Couldn't find anything exactly the same as you describe and I don't have a Mac but I did find someone saying Safari has problems with negative margins on items where the negative margin is larger than the container it is in. You might try experimenting with making the container larger or the negative margin smaller to see what happens.

[Alkafy Grandpa]

Couldn't find anything exactly the same as you describe and I don't have a Mac but I did find someone saying Safari has problems with negative margins on items where the negative margin is larger than the container it is in. You might try experimenting with making the container larger or the negative margin smaller to see what happens.

Thank you for the reply!

I tried making #mucbar margin-top: -3px, then made #footer height:180px, but neither seemed to budge the image a single pixel. If I make margin-top: a positive value, it moves (downward, as expected).

I can see that the problem must be with the negative value in margin-top but I'm not sure of a way to place the image where I want it through a different method. Margin-bottom didn't do the trick. Any suggestions?

[Alkafy Grandpa]

I'd still appreciate any and all suggestions, but my temporary solution is to use a CSS hack to target only Safari and hide the image.

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

Again, please throw out any ideas you may have. This is definitely a working solution but I feel hacking should always be a last resort. Thank you.

[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

[coheteloco]

Thanks for posting this problem/solution. FWIW, Safari 3 (beta) seems to have addressed the bug.