Troubles getting nav to line up crossbrowser and cross OS

[Historical Forums User]

Hey all!

example: http://austindw.com/onesource/index.html

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.

[cybershot]

have you applied a css reset to your css file? this could help big time.

[Historical Forums User]

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?

[cybershot]

I don’t see a problem. the site looks fine to me.

[Historical Forums User]

Really?

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.

[attachment=0]dropdown_example.png[/attachment]

[attachment=1]dropdown_correct.png[/attachment]

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.

[cybershot]

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.

[Historical Forums User]

Uh, I already did.

[Historical Forums User]

Okay, it’s definitely based on the fonts, because when I use firebug to enable and disable the font-family specification, the alignment is incorrect and correct, respectively.

Chris, you around? You’d probably be able to fix this in 2 seconds.

[Historical Forums User]

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?

[TheDoc]

Fonts are going to change from system to system and browser to browser. You’re design shouldn’t be tied into a font’s height or width, as users have far too much control over those elements.

[Historical Forums User]

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: https://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!

[Author]

Posts