Troubles getting nav to line up crossbrowser and cross OS
# July 29, 2010 at 9:33 pm
I’ve stumbled across an odd problem. I’ve been working on my client’s site navigation recently and I discovered that the distance that the top of my nav appears varies. For instance, if you open the site in Firefox (mac) or Chrome (mac) everything should line up (the top of the nav list should just join the bottom of the header. However, on windows (chrome or firefox) the position is way different (the top of the drop down shows up higher on the page than it is supposed to).
I thought it could be solved using "em"s but where 1.75ems aligns perfectly on Windows, it’s too much on Mac.
Can someone offer a solution?
Thanks in advance.# July 30, 2010 at 11:43 am
Yep. The if you look at my style.css file, the first few lines are the Eric Meyer Reset.
One solution is to set a known height to the header and used a fixed position for each drop down menu. However, this isn’t dynamic/scalable, as each dropdown would have to be positioned independently with a different "left" parameter. Plus, when the window is resized, it all goes to hell.
It is possible to absolutely position the dropdowns with respect to the header, but again, each dropdown would have to be shifted over by hand in the CSS.
Any other ideas?# July 30, 2010 at 11:57 am
Well, I’m on a windows machine again, so let me show you what I’m talking about.
Do you see how the dropdown is above the bottom of the header in this picture? It should line up exactly, like the second image.
I believe it has something to do with the fonts. Since the fonts vary across machines, then somehow they adjust the position that the "top" value is measure from.# August 3, 2010 at 4:03 pm
Seriously? No body?
Well, I’ve made some developments, but they are not perfect.
If I use images for the top nav, and move the "font-family: "Gill Sans"…" declaration down to the "ul#dropdown li" section of the CSS code, it works pretty well. IE 8 still doesn’t line up perfectly, but Chrome does now.
And if I have the font-family decoration in both the top nav and the dropdown, the problem crops up again.
Does anyone know what is going on?# August 3, 2010 at 4:43 pm
Aha! Okay, The Doc, I’ve got it figured. You are right.
But also, the problem was that I was styling my fonts using ’em’ units. Well, as you so accurately pointed out, fonts very from system to system. 1em in one font is not the same height as 1em in another font. The fix actually occured to me by this article: http://css-tricks.com/css-font-size/
Once again, Chris Coyier saves my ass! Thanks everyone who helped and most of all, thanks Chris for this fantastic website of yours! I just had to find the right words to search for my problem and your website gave me the answer yet again! Thanks!
You must be logged in to reply to this topic.