...

View Full Version : FireFox 4 line-height issue?



chump2877
05-15-2011, 09:29 AM
Take a look at the following page: [deleted]

In Firefox 3 it looks OK, but in Firefox 4 the text in certain parts of the page seems to have extra space around it -- which generally seems to be pushing the text (and layout) "down".

I've spent some time researching the cause of this, and my best guess is that it has something to do with the way Firefox 4's rendering engine interprets css line-height and/or this:


If you're using Firefox 4 on Windows 7, and you notice that fonts look different, its because the entire Firefox GUI is now 100% hardware accelerated on Windows Vista and 7 by Direct2D (a 2D acceleration subsystem introduced in Windows Vista). The reason fonts look different is because Firefox now renders using DirectWrite, and it has a different way of rendering fonts compared to GDI (the old Windows graphics subsystem). (http://forums.furaffinity.net/threads/95193-Disabling-ClearType-in-Firefox-4)

I'm leaning towards the former idea.

Also, I know there are some validation errors in the code, but if you look at the w3 validator output, I'm not convinced that any of the errors displayed have anything to do with the current issue. (If you disagree, please let me know which specific validation error might cause this.)

Any ideas what is going on here? Thanks.

AndrewGSW
05-15-2011, 12:28 PM
You have a <style> tag in the middle of your document. It can only occur within the <head> tag.

You have a space at the very beginning of your document. I know it's probably not likely to be an issue, but nothing should occur before the <!DOCTYPE> declaration.

Once corrected, if the problem persists, it might be worth searching Mozilla or mozillaZine forums (http://forums.mozillazine.org/viewforum.php?f=38) to see if someone has experienced similar issues.

chump2877
05-15-2011, 01:09 PM
You have a <style> tag in the middle of your document. It can only occur within the <head> tag.

You have a space at the very beginning of your document. I know it's probably not likely to be an issue, but nothing should occur before the <!DOCTYPE> declaration.

Once corrected, if the problem persists, it might be worth searching Mozilla or mozillaZine forums (http://forums.mozillazine.org/viewforum.php?f=38) to see if someone has experienced similar issues.

Hi, thanks for the reply. I tried eliminating the space before the DOCTYPE and also moving the styles into the <head> section of the document. No dice either way.

I'll try the forum that you mentioned.

My concern is that this is a FireFox 4 issue and not necessarily a code issue, per se. So, if that's the case, then I may need separate styles just for FireFox 4+ (because FireFox 4 styles might not work in FireFox 3). And, also, if that's really and truly the case, maybe I should instead wait (or hope?) for a fix to be released by Mozilla before I start "fixing" things myself...

I'll keep searching...Any other ideas are welcomed...

chump2877
05-15-2011, 03:20 PM
Well, after an agonizing several hours spent trying to fix this issue, I realized the problem actually was the line-height -- but it wasn't because the Firefox 4 rendering engine renders line height differently now. It's because FF 4 apparently sets a different "default" line height (different than FF 3) for certain page elements that don't have their line height explicitly set. So, in my experience, I had to explicitly set the line height of p, label, and ul elements in order for them to render exactly as they do/did in FF 3.

Well I hope this helps someone else! Too bad this issue isn't documented better on the Internet and by Mozilla....it really threw me for a loop :rolleyes:

AndrewGSW
05-15-2011, 08:05 PM
A lot of people use reset.css (http://meyerweb.com/eric/tools/css/reset/). If you attach it as the first stylesheet it attempts to equalize browsers by first removing all the assumptions that they make about things like line-height.

However, it's probably more useful when starting a new site. Interesting idea though. Andy.

chump2877
05-15-2011, 08:09 PM
A lot of people use reset.css (http://meyerweb.com/eric/tools/css/reset/). If you attach it as the first stylesheet it attempts to equalize browsers by first removing all the assumptions that they make about things like line-height.

However, it's probably more useful when starting a new site. Interesting idea though. Andy.

Good idea!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum