The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Cross Browser CSS issue: Safari extra margin/padding issue

  • This topic is empty.
Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • #45338

    I am having difficulties figuring out why my website looks a little different on Safari. I am trying to match top navigation of my WP site to the static HTML website.

    If you compare two links you will see that nav and the logo on WP site look identical to the html site in FF and Chrome, but in Safari it is off. Any idea why?

    I am using the following code but it is not helping.

    @media screen and (-webkit-min-device-pixel-ratio:0) {

    #logo {margin:-1px 0 0 0 !important; padding:0px !important;}
    .main-navigation {margin:0 0 0 0 !important; padding:4px 0 0 0 !important;}


    I would really appreciate someones help!

    Thank you


    Not sure what you are targeting with that media query.

    I’m also concerned about the (over) use of `!important` there…that’s rarely a good sign.

    Frankly, I’m not detecting any noticeable difference in Safari 5 (W7) and….


    Before I added the media query the Chrome had some issues too. I am really confused at this point. IT has to be something really simple that I am probably overlooking.


    Without wishing to sound flippant but there is very little point is trying to solve an **very** marginal issue that would only be noticed (at best) by people using multiple browsers.

    Let’s face it, 99.99% (*) of users will only have one browser and if they did notice it…would they care?

    _* made up statitistic_


    If you compare two website in Safari you will see that the header is not consistent. It is a big issue:


    >It is a big issue’s not but did you know the images are different? Shouldn’t the structure be the same between pages for that area?

    The blog page uses

    and the ‘cushions’ page uses



    #logo {
    margin: -1px 0 0 0 !important;

    is only being applied on the ‘blog’ page because of it.


    I know. I only have access to the WP pages.


    The nav on the blog is constructed using a ul, the nav / header on the static page actually appears to be a table.

    I am surprised you’ve been able to get them as close as you have considering they are made in a completely different way.


    I removed the media query completely and not it it off in Chrome and Safari.
    I have spent so much time on this issue already. Cant think of anything else really. It does look perfect in FF


    Everyone has said this already: how can you expect it to look exactly the same when you’re using completely different markup. It’s a tiny difference that the average person will not notice. What you should be spending your time on is updating the `

    ` version of the header to be like the one that you’ve created.
Viewing 10 posts - 1 through 10 (of 10 total)
  • The forum ‘CSS’ is closed to new topics and replies.