Cross Browser CSS issue: Safari extra margin/padding issue

[maria1984]

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

[Paulie_D]

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/

[maria1984]

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.

[Paulie_D]

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_

[maria1984]

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

[Paulie_D]

>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

This…

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

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

[maria1984]

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

[iknowdavehouse]

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.

[maria1984]

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

[TheDoc]

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.

[Author]

Posts