WordPress.org

1. jhorac1
   Member
   Posted 3 years ago #

   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?

2. t31os
   Member
   Posted 3 years ago #

   .navigation {display:block}

   That fix it?

3. jhorac1
   Member
   Posted 3 years ago #

   Where should I insert that code into the CSS?

4. t31os
   Member
   Posted 3 years ago #

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

5. jhorac1
   Member
   Posted 3 years ago #

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

6. t31os
   Member
   Posted 3 years ago #

   Looks fine in FF...

   Safari screenshot.
   http://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.

7. jhorac1
   Member
   Posted 3 years ago #

   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!

8. t31os
   Member
   Posted 3 years ago #

   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.. http://www.browsrcamp.com/ for the safari test.

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

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

10. t31os
    Member
    Posted 3 years ago #

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

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

    What about you esmi? Use Macs?

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

Topic Closed

This topic has been closed to new replies.