Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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

  • #2
    New to the CF scene
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    My temporary solution is to target Safari through a CSS hack and completely hide the image, using

    Code:
    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

  • #3
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • #4
    New to the CF scene
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by _Aerospace_Eng_ View Post
    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?

  • #5
    New to the CF scene
    Join Date
    May 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I got my answer: apparently there's a bug with float elements and negative margins in Safari.

    http://www.456bereastreet.com/lab/fl...ative_margins/

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

    Travis


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •