Home › Forums › CSS › Same WP theme, one site looks as expected in Safari/Chrome the other the margin is off
- This topic is empty.
-
AuthorPosts
-
October 25, 2012 at 12:50 pm #40454
thestinger777
MemberHi,
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?
October 25, 2012 at 2:06 pm #112629thestinger777
Memberfigured it out. I needed a webkit filter:
@media screen and (-webkit-min-device-pixel-ratio:0) {
ul.menu {margin:-25px 0 0 0;}
}October 25, 2012 at 3:57 pm #112638thestinger777
MemberNevermind, 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 culpritOctober 26, 2012 at 10:29 am #112705thestinger777
Membercan you target an os + browser? it is only happening on a mac + safari or chrome….not windows 7 + chrome.
October 26, 2012 at 11:10 am #112700Senff
ParticipantThe 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.
October 26, 2012 at 4:19 pm #112667thestinger777
MemberIf I change webkit to 50px, it moves it back under the slider. Back to my initial problem.
October 26, 2012 at 5:45 pm #112669Senff
ParticipantYeah ok, but if the problem isn’t there, it’s a bit difficult for us to see what would/could be wrong.
October 26, 2012 at 9:54 pm #112737thestinger777
Memberthe 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)
October 27, 2012 at 9:00 am #112754wolfcry911
ParticipantThe 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).
October 29, 2012 at 7:33 pm #112906thestinger777
MemberThanks @wolfcry911! That solved the issue!!!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.