Same WP theme, one site looks as expected in Safari/Chrome the other the margin is off

[thestinger777]

Hi,
I have two sites running the same theme and I recently noticed that one of the sites the navigation margin is acting differently in Safari/Chrome but fine in Firefox on a Mac. I can’t figure out what is driving this since both are using the exact same CSS.

Here are the two sites:
http://heieckconcord.wphajoca.com/ (nav works perfect in Safari, Chrome and Firefox)
http://heiecksancarlos.wphajoca.com/ (nav is pushed down behind the slider in Safari and Chrome but in Firefox it appears as expected)

I have read about resets and there is one in there already, plus how can it only be affecting one site and not the other?

[thestinger777]

figured it out. I needed a webkit filter:

@media screen and (-webkit-min-device-pixel-ratio:0) {
ul.menu {margin:-25px 0 0 0;}
}

[thestinger777]

Nevermind, spoke too soon. the issue is not resolved…

Now heieckconcord.wphajoca.com’s navigation is messed up!
Back to the drawing board on to try and pin down the culprit

[thestinger777]

can you target an os + browser? it is only happening on a mac + safari or chrome….not windows 7 + chrome.

[Senff]

The UL in the NAV has a top margin of 50 pixels in Firefox — I assume that’s correct.
In Webkit browsers however, it has a top margin of -25 pixels because of what you wrote three posts above.

Because of that, the menu is positioned completely different in various browsers. Not sure if you should want that in the first place.

[thestinger777]

If I change webkit to 50px, it moves it back under the slider. Back to my initial problem.

[Senff]

Yeah ok, but if the problem isn’t there, it’s a bit difficult for us to see what would/could be wrong.

[thestinger777]

the problem is still there but it’s on the other site now (remember both sites are using the same wordpress theme)

http://heieckconcord.wphajoca.com (now the navigation is wrong in webkit on this site only on a mac)

http://heiecksancarlos.wphajoca.com/ (it is now fixed in webkit with -25px margin here)

[wolfcry911]

The difference between the two sites is the length of the navigation – concord’s nav is shorter and will fit to the right of the floating logo. Sancarlos’ nav being longer must start below the floating logo and the negative margin pulls it back into place. An easy solution is to just position the header#logo absolute, taking it out of flow and not affecting the following floats. Then use the 50px top margin (and not the -25px).

[thestinger777]

Thanks @wolfcry911! That solved the issue!!!

[Author]

Posts