WordPress.org

Ready to get started?Download WordPress

Forums

Safari adding 30px top margin to background image (13 posts)

  1. ceragraves
    Member
    Posted 3 years ago #

    I cannot for the life of me figure this out.

    I have a background image that is created using a custom field and even though I have everything set to no top-margin, there is still a 30px top margin in Safari between the background image and the menu bar. It works fine in Firefox, but not Safari.

    Here is a link: http://kachinadechert.com/bio/

    I tried removing the custom field population for the bg image and just setting body for that template to be that image, and it still had the 30px gap.

    I've tried adding the image using a div rather than having it be part of the body and it adds an additional 30pxs (60px total) in safari, and I then also see the gap in Firefox.

    Here is the link to that test: http://kachinadechert.com/test-4/

    I have the standard`* {
    margin: 0;
    padding: 0;
    }`

    in the style sheet, so why is it doing this.

    Please someone help!!!

  2. ceragraves
    Member
    Posted 3 years ago #

    And I've tried is as

    * {
    	margin: 0px;
    	padding: 0px;
    }

    as well with no difference.

  3. ceragraves
    Member
    Posted 3 years ago #

    Anyone? Please?

  4. OFGC
    Member
    Posted 3 years ago #

    im having the same probably with the top of my site as well but im using FF if anybody has a fix it would be much appreciated!!

    my site is here

  5. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

    Start by sorting out the markup errors. Then move onto the CSS errors.
    http://codex.wordpress.org/Validating_a_Website

  6. OFGC
    Member
    Posted 3 years ago #

    i still cannot get rid of that space even after valdating my css and html....

  7. ceragraves
    Member
    Posted 3 years ago #

    And now for the real weird part for me - it works sometimes, but not every time....

    I checked the homepage, saw that the forced extra top margin of -30px was actually moving the image too far up and that it wasn't needed. Checked in interior pages and they all looked fine too - went and removed the -30px force, went back and checked and the gap was back. Re-pasted the style sheet (that I had just copied before when it was working) and updated, and the gap is still there......wtf?!

  8. ceragraves
    Member
    Posted 3 years ago #

    According to the validator found through w3schools, I have no validation errors....

  9. David Calhoun
    Member
    Posted 3 years ago #

    You have a margin-top: 33px on your div#header. I believe that is what is causing the extra space above.

  10. ceragraves
    Member
    Posted 3 years ago #

    Hi Dave - thanks for looking, but I've tried removing that already :( That div relates to an image in the header, not the background image. I tried removing it to test it out to see if that was the problem, but all it did was move the image in the header up, but did nothing to the background image.....

  11. ceragraves
    Member
    Posted 3 years ago #

    I think I might have figured it out! So stupid!! I only see the gap when I'm logged in! If I log out, it disappears, which means no one else can see it. It must have something to do with that toolbar thing that shows up in the front end of the newer versions of wordpress - it just must not be showing up since I don't see the toolbar, but the area where it is supposed to be is still showing....

  12. OFGC
    Member
    Posted 3 years ago #

    OMG!!!
    Ceragraves you are a genius that is exactly what the gap is!!!
    how stupid of me!!

    i would put this as resolved lol..

  13. ceragraves
    Member
    Posted 3 years ago #

    Wow - I can't believe that's all it was.... ugh, I've waisted so much time on this...at least it's all figured out! :)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.