Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts

    FireFox 4 line-height issue?

    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/thread...e-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.
    Last edited by chump2877; 05-15-2011 at 03:23 PM.
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    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 to see if someone has experienced similar issues.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Quote Originally Posted by AndrewGSW View Post
    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 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...
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #4
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    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
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!

  • #5
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    A lot of people use reset.css. 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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • Users who have thanked AndrewGSW for this post:

    chump2877 (05-15-2011)

  • #6
    Senior Coder chump2877's Avatar
    Join Date
    Dec 2004
    Location
    the U.S. of freakin' A.
    Posts
    2,778
    Thanks
    19
    Thanked 155 Times in 146 Posts
    Quote Originally Posted by AndrewGSW View Post
    A lot of people use reset.css. 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!
    Regards, R.J.

    ---------------------------------------------------------

    Help spread the word! Like my YouTube-to-Mp3 Conversion Script on Facebook !! :)
    [Related videos and tutorials are also available at my YouTube channel and on Dailymotion]
    Get free updates about new software version releases, features, and bug fixes!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •