CSS Help

[raf051888]

I have developed website for a professor's scholarship program. However, I have noticed in Firefox 4 the menu bar does not display correctly. I'm trying to correct this specifically for FF4 in CSS.

http://babbage.cs.missouri.edu/~rlp9p8/Increace%20Site/

The menu is rendered correctly in IE9. I can provide the contents of the CSS via PM if necessary. Any help is appreciated.

 

[Crusty]

I just changed the font size of the menu items to be 1em and they all fit on one line... is that your problem?

 

[raf051888]

I tried that as well. However, when viewed in other browsers the text does not fit the correctly. I'm looking to try and implement the change for FF4 only if possible.

 

[PhatoseAlpha]

You're using arial narrow, and that's going to create problems for you in Firefox 4. Arial Narrow isn't actually a font per se, it's modification to Arial. This usually isn't a problem, and GDI handles it for the browser, but Firefox 4 doesn't used GDI for text rendering.

The CSS3 replacement is "Font-stretch", but it's not supported anywhere near enough to be usable as a replacement.

I'd suggest reconsidering your design to use a different font.

 

[raf051888]

Thanks PhatoseAlpha. I'll look for a replacement font.

 

[Kr@n]

Also, keep in mind that there are discrepancies in font-metrics between GDI (FF3.6, Chrome, etc.) and DirectWrite (FF4) rendering. IE9 seems to compensate a bit for these discrepancies (in order to obtain the same line height with or without hardware acceleration) and Mozilla is considering doing the same for FF5.

However, there will still be discrepancies (char width, etc), and even more if you consider non-Windows browsers (which will be using another text renderer, with possible differences in metrics). You should try not to depend on fixed heights/widths when dealing with text in your web designs and instead use « em » units to accommodate to the metrics, or force pixel perfect line height and item width with « overflow: hidden » and « line-height: Npx » rules ...

Hope that helps.