Click to See Complete Forum and Search --> : Largest font issue in IE others fine


poiuy
07-27-2006, 01:11 PM
Someone just pointed this out to me and i'm wondering if I should be concerned about it.

When viewing my website in FF or Opera if I hit ctrl + (or +) the font sizes get bigger on every page. Good for people with vision problems right...

However in IE if I change the text size to Largest/smallest nothing happens the fonts stay the same.

I seen some page using CSS for fonts that are done identical (from what I see) to mine but they don't have this problem in IE and I have also seen some sites (CNN.com to name one) that do have this issue.

Should I be concerned? Is there is a way to fix this and where do I start looking? I've got 20-20 vision and never use this but I don't want to make my site inaccessible to those who don't.

KDLA
07-27-2006, 01:24 PM
Can you send a link to the site in question?

poiuy
07-27-2006, 02:02 PM
I'd prefer not to only because the company wouldn't like it and not to mention I should be doing this at home and not on the clock ;)

Maybe I should have put this in the coffee lounge as a debate but it does relate to CSS websites. I'm not really concerned with fixing it but rather should I worry about it.

Reason being is I just did some random popular website checks and see this issue isn't just with me. (and yes you can tell by my sites I am in the US)

Sites with this issue - cbs.com, abc, nbc, cnn, foxnews, bloomberg, reuters, my local news site. (weird how they are all news oriented).

Sites without this issue -- msn, yahoo, amazon, ebay.

All sites use CSS to some extent. (Just noticed amazon has it in the page and not an external file) Now I'm wondering if this is a CSS issue or just another problem with IE because all of the above sites increase or decrease the fine in Firefox and Opera.

Centauri
07-27-2006, 02:04 PM
This is caused by using pixel sizes in your font definitions. IE seems to think this means always display them this size, but I believe this may have changed in IE7 (haven't got it, so not sure). Using em sizes should work ok, or make sure that the font sizes are large enough to be easily read without having to scale up.

Cheers
Graeme

poiuy
07-27-2006, 02:43 PM
This is caused by using pixel sizes in your font definitions. IE seems to think this means always display them this size, but I believe this may have changed in IE7 (haven't got it, so not sure). Using em sizes should work ok, or make sure that the font sizes are large enough to be easily read without having to scale up.

Cheers
Graeme

Ok that is the difference. I had a feeling that had something to do with it.

However I'm not sure what to do. Change my CSS or wait until IE fixes it. I guess looking at the sites with the issues and sites without the issue I not in a bad class leaving mine the way it is. I just don't like messing up accessibilty for people with vision problems or is that even a major issue? I'd guess by now they'd have spotted that and use Firefox and Opera already.

KDLA
07-27-2006, 02:54 PM
It couldn't hurt to change your CSS.
1em is about the equivalent of 16px, but that is relative to the font.

WebJoel
07-28-2006, 03:01 PM
Yes, making your default font-size in "em" units instead of "px" makes them 'scaleable'. They will resize if the user-agent (browser, etc) requests it.
This includes any/all <h> tags as well. I used to have a 'recommended sizes' for these, -pretty sure I no longer have it. Basically, <h1> is largest, <h2> is slightly smaller, etc. There is a 'good mix' of size-reductions to make this semantic. (In your STYLEs: ) -Not just h1 {font-size:4em} followed by h2 {font-size:3em} etc., as this leaves a lot of size possibilities unavailable to you.

You'd probably want these to also be rescaleable, even though they are almost certainly going to be the largest font on any screen.