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.
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.
well, I think you should post pictures of what it should look like because your explanation in the first post doesn’t make sense. I don’t have a mac, so I can’t go check. But using firebug, I can see that your ul with the class of dropdown is positioned low.
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.
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!