Safari adding 30px top margin to background image

  • 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: https://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: https://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!!!

Viewing 12 replies - 1 through 12 (of 12 total)
  • Thread Starter ceragraves

    (@ceragraves)

    And I’ve tried is as

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

    as well with no difference.

    Thread Starter ceragraves

    (@ceragraves)

    Anyone? Please?

    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

    Start by sorting out the markup errors. Then move onto the CSS errors.
    https://codex.www.ads-software.com/Validating_a_Website

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

    Thread Starter ceragraves

    (@ceragraves)

    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?!

    Thread Starter ceragraves

    (@ceragraves)

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

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

    Thread Starter ceragraves

    (@ceragraves)

    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…..

    Thread Starter ceragraves

    (@ceragraves)

    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….

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

    i would put this as resolved lol..

    Thread Starter ceragraves

    (@ceragraves)

    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! ??

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Safari adding 30px top margin to background image’ is closed to new replies.