Grow your CSS skills. Land your dream job.

Cross Browser CSS issue: Safari extra margin/padding issue

  • # June 6, 2013 at 11:19 am

    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.

    http://www.sleepright.com/blog/ http://www.sleepright.com/pillows-cushions.php

    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

    # June 6, 2013 at 11:29 am

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

    http://dowebsitesneedtolookexactlythesameineverybrowser.com/

    # June 6, 2013 at 11:34 am

    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.

    # June 6, 2013 at 11:42 am

    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_

    # June 6, 2013 at 11:49 am

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

    http://www.sleepright.com/blog/

    http://www.sleepright.com/pillows-cushions.php

    # June 6, 2013 at 11:56 am

    >It is a big issue

    Really..it’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

    SleepRight

    This…

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

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

    # June 6, 2013 at 12:02 pm

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

    # June 6, 2013 at 12:05 pm

    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.

    # June 6, 2013 at 12:14 pm

    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

    # June 6, 2013 at 12:16 pm

    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)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".