Firefox interpreting CSS differently than Safari?

  • I’ve been working and tinkering with the CSS of my site, and I can’t quite figure out the vertical spacing. I have added my own header image, but now the main content is jammed up underneath the bottom of the header. I could likely fix it myself by adding some “padding-top” to the main content in the CSS, but I simply can’t follow such a straightforward approach because Firefox and Safari seem to be interpreting the vertical spacing differently (by about 50px or so).

    As an amateur, I can’t figure out where this discrepancy might be happening, let alone how to go about fixing it so that it is drawn correctly in these two browsers (and others).

    Can anyone offer some insight into this and how I might go about fixing it so that I can continue to customize my site?

Viewing 10 replies - 1 through 10 (of 10 total)

  • .navigation {display:block}

    That fix it?

    Thread Starter jhorac1

    (@jhorac1)

    Where should I insert that code into the CSS?

    On a new line, wherever you like… style.css

    Thread Starter jhorac1

    (@jhorac1)

    Inserting that line didn’t appear to make any difference, and the discrepancy still exists between Safari and Firefox. Thanks for the suggestion, though!

    Looks fine in FF…

    Safari screenshot.
    https://87.3.61.62/safaritest/1238945624-full.jpg

    Looks like there’s a issue with the title elements, since they are clearly missing in safari.

    Thread Starter jhorac1

    (@jhorac1)

    Thanks for continuing to look into this. Someone on a different forum suggested I use the following code:

    #main {padding-top:20px;}
    .safari #main {padding-top:XXpx}

    where XX is the value needed for Safari to show the main content. And that worked great to fix the problem. I had no idea that browser-specific references could be made like that.

    Thanks again!

    hmmm….

    Never seen that before, perhaps your template inserts a class for Safari or Safari looks for specific named classes.

    I don’t use Safari to know..

    Used.. https://www.browsrcamp.com/ for the safari test.

    That suggestion would only work if you were browser-sniffing – which is a pretty hit-and-miss solution. Especially since so many modern browsers can be configured to spoof their user agent header.

    I’m surprised that Safari is acting up. It’s normally not a problem. What I would suggest, before going any further, is that the couple of validation and CSS errors on the site are cleared up first. The former all seem to be within the sidebar which is lower down the markup, so I don’t think they’ll be creating any problems nearer the top. However, the CSS errors could be a factor…

    Mozilla and IE both have browser specific attributes/rules for styling, why not Safari?

    IE has expressions and Firefox has the -moz-rule …. Does Safari not get one? ??

    Not that i mind, i don’t use Mac… :p yeah bite me mac users, lol…

    What about you esmi? Use Macs? … oops back on-topic ..

    jhorac1, ideally you should do modifications away from your live site. This way i would suggest removing elements from the template one by one and seeing when the issue disappears (load up in safari after each one removed).. … simply put, process of elimination….

    What about you esmi? Use Macs?

    I’ve got a Mac-Mini on another workstation but, tbh, I rarely turn the thing on.

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Firefox interpreting CSS differently than Safari?’ is closed to new replies.