View Full Version : Huge Font Size Differences

Nov 5th, 2009, 10:32 PM
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)?

Nov 5th, 2009, 11:03 PM
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 ...

Nov 6th, 2009, 01:44 PM
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.asp?filename=trycss_dim_line-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.

Nov 6th, 2009, 04:02 PM
Wow, learn something every day!
And I even thought the validator was just missing it.