As a website developer who specialises in CSS-based designs, I obviously hang around (i.e. read blogs of, participate in mailing lists with) other like developers. One of the legitimate concerns many—if not all—of them have is the relatively less support Internet Explorer has for CSS 2.1. Part of the reason for this is the fact that the current version of IE is nearly three years old, while every other popular, standards-compliant browser has had a major release within the past year.
A common issue such designers have is users having the ability to resize webpage text to meet their level of reading comfort. All modern browsers have resizing capabilities; however, some have more powerful capabilities than others do. For example, IE can only size text to five sizes (smallest, smaller, medium, larger, and largest) while Opera can resize text and images from 20% to 1000% of the original size. As well, IE can only resize relatively sized text (i.e. em, pt, cm, in, %), while other browsers can resize even absolutely sized text (i.e. px, pt, cm, in).
Given the common and predominant disapproval of IE’s relatively low support for CSS 2.1, many people often attribute IE’s inability to resize absolutely sized text as a bug. Some even go as far as saying IE is broken in this regard. I strongly disagree with this notion.
IE is not broken. It does exactly what the designer tells it to do. If a designer specifies s/he wants a font sized based on 12 pixels then it renders the fonts based on 12 pixels. In actuality, it is the other browsers that are “broken†since they incorrectly render the text in an effort to allow users to resize text.
I repeat, IE is not broken.
That being said, pixel-based text is a bad practise for copy. Any user coming to your website should be able to resize at least the copy text. This ability should not be hampered at all, and should be independent of what browser s/he uses. Ideally, all text should be resizable, and images should not be used to solely present text.
In conclusion, the inability to resize text in Internet Explorer is not the fault of Microsoft engineers; it’s the fault of inconsiderate website developers.
hi – Google found your blog based on a question i asked about IE not resizing my website’s text. So, what do you suggest I do in lieu of pixel-based css? Many of my customers are mac based and are using safari, modzilla, etc. It seems to just be IE on windows that is the issue. Thanks for your feedback.
If you’re using pixel-based CSS on your websites, then you can’t do anything. If you want IE users to be able to resize text, then you need relative sizing (ems, points, percentages, etc).
You have things wrong:
“As well, IE can only resize relatively sized text (i.e. em, pt, cm, in, %), while other browsers can resize even absolutely sized text (i.e. px).”
Relative sizes: em, %, px
Absolute sizes: pt, cm, in
Now, once we have that sorted out, there are ways of getting IE to resize px based font sizes as well, based on the user preferences: http://www.webmasterworld.com/forum83/8396.htm
Try again.
It may require a login, though.
DrDoc, your link doesn’t work. It returns a 404.
Hmmm…interesting solution. I’m not sure I see the wisdom in using such a solution, when it seems simpler to just design in relative font sizes, but it’s an alternative.
Fully agree :)
Relative font sizes is the better solution IMO too.
I always rely on em for the sizing of my text. I agree with your point here.
“IE is not broken. It does exactly what the designer tells it to do. If a designer specifies s/he wants a font sized based on 12 pixels then it renders the fonts based on 12 pixels. In actuality, it is the other browsers that are “broken†since they incorrectly render the text in an effort to allow users to resize text.”
The reason why modern browsers support resizing of pixels is because many (probably even most) designers abuse it. px was to be used for elements that visually shouldn’t be resized, such as banner header text and slogans. Unfortunately, since IE didn’t resize pixel sized fonts, users with disabilities couldn’t effectively access sites they needed to access. And correct me if I am wrong, but doesn’t IE 7 support resizing of pixel sized fonts? Isn’t this taking a step backwards?
“IE is not broken. It does exactly what the designer tells it to do.”
Oh, really? Try creating an element with padding, a hefty border, and a nice margin.
Next, try centering this element on the page the standards way: margin: 0 auto. No, don’t use text-align center, silly. Why the hell would you try to center an element with a text property?
Get back to me, and let me if it works as expected in IE.
This is a just a couple big examples of IE’s MANY problems. Sure there are fixes for these problems (some simple, some a bit more difficult), but my point is that IE is broken. Yes, the more familiar you become with CSS, the less problems you will have with cross-browser support, but don’t go ranting that IE isn’t broken.
Let me repeat. IE is broken.
I just realized this post is a couple years old, but nevertheless, what I said still would hold true.
I am sure you have changed your mind by now.
“Oh, really? Try creating an element with padding, a hefty border, and a nice margin.Oh, really? Try creating an element with padding, a hefty border, and a nice margin.Next, try centering this element on the page the standards way: margin: 0 auto. No, don’t use text-align center, silly. Why the hell would you try to center an element with a text property?Get back to me, and let me if it works as expected in IE.”
What does that have to do with pixel-based fonts?
Anyhow, I do these all the time without any problems in IE, but I am always sure to use a doctype.
“What does that have to do with pixel-based fonts?”
FYI: The title of your article is “Internet Explorer Is Not Broken”
What does your title have to do with pixel based fonts? Something like “Internet Explorer (Arguably) Does One Thing Correctly” may be more appropriate here.
And I’m sorry, but setting a doctype isn’t going to fix all of IE’s problems.
“What does your title have to do with pixel based fonts?”
Read the article.
“setting a doctype isn’t going to fix all of IE’s problems.”
I didn’t say it does. But it does address the scenario you presented.
If we are talking about relative sizes I am afraid that px simply is a relative measurement. It is relative to the pixel density of the monitor.
From:
http://www.w3.org/TR/REC-CSS2/syndata.html#values
”
There are two types of length units: relative and absolute. Relative length units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a computer display to a laser printer).
Relative units are:
em: the ‘font-size’ of the relevant font
ex: the ‘x-height’ of the relevant font
px: pixels, relative to the viewing device
”
How difficult is it for the developers of IE to get their app to work out how to multiply a pixel value? How come every other browser has managed this feat?
Oh well – IE10 maybe?
True, but pixel-based sizing is only relative in that it changes as the “pixel density” changes (i.e. changing the resolution of your monitor).
Ive heard they are about to release IE99
with added security !!
Yes i had heard that it was IE101 and at had spots !
I’m all for total design control.
finding how to get CSS to work on all the different levels of IE and still look good has created some very fustrating evenings trying to build up my webs.
i’ll keep an eye on this site as it has some good points raised.