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 4 of 4
  1. #1
    New Coder
    Join Date
    Jan 2009
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Huge Font Size Differences

    Any idea why the font size for the content on this page: http://www.truckerstracks.com
    ...looks great in Firefox/Safari but looks terrible in Internet Explorer (very very large font)?

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Hello joshmccord,
    I see several instances of errors like this - line-height:1;

    That needs to have a measurement unit of some sort... px or em usually. The way it is now you are telling the browser 1, but the browser doesn't know one what.

    I'm not sure that will fix your problem ...
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts

    line-height is fine like that

    umm.. I don't mean to come off like a know it all or anything because I am actually quite certain that Excavator's knowledge of CSS runs much deeper and broader than my own. However line-height is one property which does not need a unit.

    A unit can be given for the property but it is fine to use a number without any unit. line-height:1.5; in CSS means 1.5 times the current font size and would be the same as line-height:150%;, and as far as I can tell should also be functionally identical to 1.5em as well..

    http://www.w3schools.com/css/pr_dim_line-height.asp and http://www.w3schools.com/css/tryit.a...-height_number

    Now maybe there is something that I don't know about some browser specific issues regarding this, so please do correct me if I am missing something here Excavator.

    Sorry I can't be of any more help for the OP but I really am a novice to all this. I did look over your page and I will share my thoughts with you but please don't put too much stake in anything I have to say. Your best bet is to follow Excavators advice and clean up your code. He may know something I don't or he may have simply given a poor example with line-height as needing a unit of measurement, but I suspect he is right that you should clean up your code since even my untrained eye noticed a fair amount of redundant code.

    I did notice that your first choice for fonts is Helvetica Neue. To trouble shoot you might try setting the font to a regular font like Arial first. Get rid of the font-size:100%; in your resets since as far as I know all the browsers will use 100% font-size by default anyway. It is also odd that you set font-size to 100% then you set the font-size on your <body> element to 75% and then you set it to 100% for your actual content. This is hard for me to think about.. Is that going to end up giving you 100% of the browsers default font-size (as set by the user) or is it going to give you 100% of 75% (which should still be 75%) of the default font size. It looks like it actually switched it back to 100% of the default because looking at the page in FF that text is certainly larger than 75% (looks like 100% default size in FF and in IE7 I also see the giant text so it isn't a setting in your browser anyway). I think you might do better to use em values instead of percentages for your font-sizes too (don't ask me why though - I just recall someone telling me that a few weeks ago). It could just be the IE is getting mixed up by the cascading percentage changes? It is odd to set such a small font size on your body anyway, 75% is pretty much too small so why would you set it that small and then try to make it bigger from there. Oh maybe that is something that found its way into your code because you were trying to fix the big fonts in IE?

    The other thing to try is to just remove all font-size references from all CSS files and see how it looks in the different browsers, then go from there, adding the sizes back in should be fairly quick and easy - I wouldn't be surprised if the problem was no longer present once you were done doing that.


    Good luck.
    Last edited by linehand; 11-06-2009 at 01:46 PM. Reason: fixed a typo

  • Users who have thanked linehand for this post:

    Excavator (11-06-2009)

  • #4
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,744
    Thanks
    22
    Thanked 1,838 Times in 1,822 Posts
    Wow, learn something every day!
    http://www.w3schools.com/css/pr_dim_line-height.asp
    And I even thought the validator was just missing it.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Tags for this Thread

    Posting Permissions

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