is a blog about design, technology and culture written by Khoi Vinh, and has been more or less continuously published since December 2000 in New York City. Khoi is currently Principal Designer at Adobe. Previously, Khoi was co-founder and CEO of Mixel (acquired in 2013), Design Director of The New York Times Online, and co-founder of the design studio Behavior, LLC. He is the author of “How They Got There: Interviews with Digital Designers About Their Careers”and “Ordering Disorder: Grid Principles for Web Design,” and was named one of Fast Company’s “fifty most influential designers in America.” Khoi lives in Crown Heights, Brooklyn with his wife and three children.
Some people just think that my efforts to warn Internet Explorer users that the fidelity of this site is compromised when viewed in that Web browser is just a showy way of picking a fight. Maybe a little. But I’m being genuine when I say that the way Subtraction.com renders in I.E. is maddeningly imperfect, and I just haven’t the time or patience really to try and troubleshoot the problems. What I do have time for is a nitpicking catalog of those imperfections.
Three’s a Crowd (of Pixels)
What drives me the most crazy is the well-documented 3-pixel Text-Jog, which effectively nudges over any body of text that runs past a float by, you guessed it, three pixels. This is a problem I encountered when designing version Six.5 of this site, but, having had more free time at that stage and less care for keeping my HTML clean, I threw in another enclosing <div> around the body text. That fixed the problem but added yet another layer of complexity to the markup.
This time, I couldn’t bring myself to do that — depending on your point of view, my philosophy on code has gotten either more precious or more aware — so I just left it as is. Some people may not notice it at all, but it screams out loud and clear to me, especially as it’s plainly evident on the home page. It can also be seen in action in the Remarks section at the bottom of most individual article pages, and because the leading (line-spacing) is tighter there, it’s perhaps more noticeable too.
Above: The 3-pixel Text-Jog bug in full effect on the home page and the Archives page.
I.E. renders a similar indentation problem on the right column of Archives page, where the title of each category appears to hang out a little further to the left than the descriptions of that same category just below. Again, this is layout trainspotting, but it’s an irritation to me.
Below: Rolling over a nav box doesn’t work, though Fitt’s law — and my code — says it should. Directly rolling over the text does, but an unexpected border appears at the top.
Giving Me Fitt’s
Perhaps more seriously, I.E. doesn’t care much for the way I coded the navigation, to the point of almost breaking it, or at least crippling its usability seriously. If you hover over any part of a box in the navigation using Safari, Firefox etc., you’ll be able to activate the hyperlink without having to directly target the text itself. This, as a reader pointed out, is the behavior recommended by Fitt’s Law. However, if you roll over any navigation box in I.E., you must target the actual text directly with your mouse, or no roll-over will occur. What’s more, when the roll-over does occur — when the box turns orange — then an odd, single-pixel black border appears at the top. Another superficial imperfection, but by now you get a sense of how freakin’ uptight I am.
Update 16 Jan 2005
Thanks to some very generous and detailed tips from Shaun Inman, this little Internet Explorer bug has been fixed, and Fitt’s Law should be operative again in that browser. For this, and for his other, more widely beneficial areas of expertise, I’m one of many people in debt to him.
More Flaws
Predictable rendering errors, like the 3-pixel Text-Jog bug, are one thing, but inconsistent errors are another. Here’s one that only shows up at odd times: a double-rule effect that appears over some headlines on the home page and on monthly archives. I know exactly where the rule comes from; there’s a -1px margin-top on the headline to lay the top border on the headline directly on top of the longer border that demarcates the day. I.E. seems to know how to deal with this, but on erratic occasions, it flubs the effect somehow.
Above: Occasional double-border rendering. Below: Extra space in the Remarks form.
A more serious layout bug occurs in the Remarks form that appears at the bottom of most article pages. Again, these forms render fine when using the usual suspects, but I.E. adds a gaping white space above the first field, for a reason that I admittedly never investigated too seriously but that I don’t really understand nevertheless. To be fair, using CSS to apply layout precision to a Web form is an act of self-torture in any browser — which probably explains the dearth of documentation on how to do this. A List Apart, I’ve got an article idea for you.
My Secret Love for I.E.
All of which goes to prove that I.E. is sorely lacking in layout prowess (to say nothing of security). This is probably not news to very many designers, but it’s an obscure enough fact that I felt that I should point it out to open-minded readers who may be enticed to give Firefox a shot. That’s an altruistic explanation for my decision, but to be honest, I saw an opportunity to just ignore I.E.’s quirks outright, something that many CSS/XHTML advocates daydream about. This site is, after all, a personal endeavor that I’m doing for no financial remuneration; why not do whatever the hell I want?
That said, I was careful not to flagrantly offend I.E. users beyond my attention-getting caveat. It’s true that you can read every single line of text and every single page in this site with Internet Explorer, design flaws and all; this was a conscious decision. What’s more, as another reader pointed out, the style sheet specifies Arial for body text, with Helvetica as the back-up. Now, I really dislike Arial, finding it a pathetic imitation of Helvetica, but the fact remains that Helvetica looks pretty bad at 12 points on a Windows machine, where Arial looks… inoffensive. I wanted to ensure some level of visual competency for body text, so Arial won out. This is a decision I may reverse at some point, but for now, I’m sticking with it. As you can see, Internet Explorer users, I got yer back.
+
18 Comments
Hugo Jenkins
Before I relate this story, let me confess to being an Opera man through and through. And let me confess also to noticing a minor layout bug on this very page, using Opera 7.54. Although I’m loathe to mention it, lest Mr. Vinh lose another weekend’s worth of sleep! =)
Recently I had the misfortune to style a database output system for a client’s intranet. It was a fairly simple header-3columns-footer layout, and the client specified Internet Explorer 6 as their unified browser. With some strict DOCTYPE control and keeping the markup as clean as possible, we managed to finish the project ahead of time and budget. I must say that coding for a specific browser (even IE in this case) was amazingly liberating; not having to worry about how the site looked in browsers other than IE6 was fantastic, even given aforementioned browser’s lack of compliance. Everyone should try it once in a while, get an intranet project and get a feel for web coding as it is _supposed_ to be.
It was very very dishearting to return to browser-wide coding. Why? Why, IE?
I’m a great fan of Firefox and no great fan of IE. I find that I can get something sitting how I want it on my own web site in Firefox, only to find that in IE there are minute differences. The reverse is true though… get it looking fine in IE and it can be wonky in Firefox.
However, I have another beef with IE. When Firefox crashes (and this has only happened twice in my memory) it closes gracefully and comes back with no problems. When IE crashes it sometimes takes the OS with it. And Microsoft say it’s an advantage to have the browser no tightly coupled with Windows.
“However, if you roll over any navigation box in I.E., you must target the actual text directly with your mouse, or no roll-over will occur. What’s more, when the roll-over does occur — when the box turns orange — then an odd, single-pixel black border appears at the top.”
Maybe I’m missing something, but it seems to me that all that’s needed to make this work as intended in IE is to put width: 92px in ul#navlist li a.
Jimmy: another reader wrote in with a similar suggestion that lets I.E. interpret outsized anchor elements more faithfully. It turns out to be a pretty easy hack, actually — though it’s still a hack. I plan to implement it later today, and then add a note to this post about why my complaints turned out to unfounded.
Hugo: are you talking about a glitch in the right-hang column, where that column appears just a little bit higher than the main column in Opera? If so, I hadn’t noticed it until now but you’re right, it drives me bats.
Given the audience for your site, Khoi, I doubt you’ll find many readers who champion the IE cause. I, too, cherish the though of dumping IE support in the ongoing redesign of my site, particularly because I have a completely unreasonable fondness for liquid layouts, which make use of CSS which highlights IE’s gross incompetence.
My recent trip to India, however, made me change my mind about dumping IE support (and, for that matter, dumping 800px-wide screen support). I travel quite a bit and usually make a fair number of friends in the process–all of whom use internet cafes when they travel. I didn’t find one single internet cafe which had a browser other than IE or a monitor/video card combination which supported more than 800px-wide resolution. Also, very few of my relatives and friends abroad have sufficient computing acumen to even want to install a program when they’re told what it is and how it may help them.
I’m not saying that you should reconsider IE support–I’m quite glad you’ve taken the steps you have to write IE off and I wholeheartedly commend you for this–given your (perhaps largely professional) audience. We can only hope that in the near future Mozilla will be a household name in non-geek households.
Great comments, Narayan, thanks. You bring up a good point about I.E. in Internet cafes especially in Asia; its continued prevalence there shouldn’t be dismissed. I can only hope that this will change at some point, but I agree — I have relatives in Viet Nam who would probably not be particularly inclined to go and find Firefox, download it over their 56 kbps (or 28.8 kbps!) modem and install it. That’s part of the reason I didn’t want to completely break the site for I.E. Similarly, the main column of this site measures about 650px wide, so it should at least be readable in an 800 x 600 screen. The huge-ass picture on the front page is another story… I freely grant that’s it’s definitely not friendly to older computers on dial-up modems.
Ah, yes, dialup. Forgot about that one. Many of the cafes, particularly in remote regions, operate several computers off of what I could have sworn was a 9600baud connection. I was looking around for acoustic couplers, and not finding any, started searching for tin cans and taut string.
I’m strongly considering a lo-fi version. I don’t think every page/template requires a stripped down version, but CSS & CMS templates make this quite easy.
Also–maybe it’s my browser cache, but I don’t see a picture of a huge ass on the front page. 🙂
This is my first visit her and I have to say that I was slightly bothered when I was told that I was using IE and that I should switch. But then I saw that you aren’t hiding any content from me and that I can see all of the content (although things may be off by a few pixels), so I’m happy.
I use IE because it is the fastest on my old Windows 98 machine … integrated into the operating system and full of flaws it may be, but I just don’t have time to wait for firefox to load my pages. New laptop == no more IE, though. I can’t wait. 😀
Brian N.
I’ve never used Safari yet, in person, so I’m just wondering how the page renders in Safari?
I know it uses KHTML (like Konquerer in KDE), but heh, haven’t been using an OS other than Windows for the past year, and I didn’t really care about CSS layouts before that.
Does it render correctly (in comparison with the W3C standards, and in comparison with FF and IE)?
Click my name link for an example of the Opera bug that I noticed. I didn’t notice the right-col glitch… but now I can’t look away! Argh!!
But like I said, don’t lose any sleep over it, I know that coding for Opera is just stupid, what with the 2% browser audience it has. I can’t help but use it though, I love it. Much faster than Firefox in my experience, but I lay that at the feet of the quirks of my particular setup. Firefox is a great browser and a great alternative to IE.
The site renders perfectly in Opera 8.00 beta on the Mac as far as I can see, so I wouldn’t lose too much sleep working around the bug others mentioned. Opera people are pretty good at upgrading when new releases come out – I don’t attempt to support Opera 4 anymore, for instance. 🙂
Aah, Internet Explorer, the sole reason I use Virtual PC for. Every time I make an alteration to one of my sites’ design (XHTML 1.1 + CSS, standards-compliant), I run VPC to test the site in IE6, and then IE5.5. I probably also should have a third virtual machine with IE5.0, but that might be just too much for me.
I’ve stopped striving to make my sites 100% IE-compatible. I just fix the most annoying glitches, or hide elements which IE won’t display correctly, and which are not crucial to navigating my sites, from IE users. Many of them, like CSS-based pull-down menus, won’t be displayed by IE to begin with.
Personally, I’m in favor of warning IE users about the glitches they may encounter. This way, there is a chance that instead of saying “There’s something wrong with this site” they will say “There’s something wrong with my browser.”
Your empty space at the top of #comment_form is due to IE having a default top margin on forms. Explicitly set margin-top: 0px; and you’ll be laughing.
In order to avoid this kind of cross-browser irritation, I now start all my CSS explorations with
* {
margin: 0;
padding: 0;
}
and thus get decent control over where and when whitespace appears.
Kainien Morel
I would make the switch over to Firefox, if it wasn’t for the regretable fact that there doesn’t seem to be any compatability between Firefox and Norton.
Though, I suppose you can’t get the best of all worlds anyway.
Ryan
There is one thing that IE did get right and that every other browser and the w3c got wrong.
The Box model. IEs quirks mode box model is clearly superior. It’s far more logical and should be the standard.
Who cares about the width of text? You care about the width of the chunk of stuff you are inserting into the page. It makes no sense whatsoever to have to calculate that on the fly out of paddings and borders and text widths etc.
Plus, the IE Box model fits reality. If you ask someone for the dimensions of a box, you aren’t going to expect the interior space as the answer, so why should you in CSS?
Some people just think that my efforts to 
Before I relate this story, let me confess to being an Opera man through and through. And let me confess also to noticing a minor layout bug on this very page, using Opera 7.54. Although I’m loathe to mention it, lest Mr. Vinh lose another weekend’s worth of sleep! =)
Recently I had the misfortune to style a database output system for a client’s intranet. It was a fairly simple header-3columns-footer layout, and the client specified Internet Explorer 6 as their unified browser. With some strict DOCTYPE control and keeping the markup as clean as possible, we managed to finish the project ahead of time and budget. I must say that coding for a specific browser (even IE in this case) was amazingly liberating; not having to worry about how the site looked in browsers other than IE6 was fantastic, even given aforementioned browser’s lack of compliance. Everyone should try it once in a while, get an intranet project and get a feel for web coding as it is _supposed_ to be.
It was very very dishearting to return to browser-wide coding. Why? Why, IE?
I’m a great fan of Firefox and no great fan of IE. I find that I can get something sitting how I want it on my own web site in Firefox, only to find that in IE there are minute differences. The reverse is true though… get it looking fine in IE and it can be wonky in Firefox.
However, I have another beef with IE. When Firefox crashes (and this has only happened twice in my memory) it closes gracefully and comes back with no problems. When IE crashes it sometimes takes the OS with it. And Microsoft say it’s an advantage to have the browser no tightly coupled with Windows.
“However, if you roll over any navigation box in I.E., you must target the actual text directly with your mouse, or no roll-over will occur. What’s more, when the roll-over does occur — when the box turns orange — then an odd, single-pixel black border appears at the top.”
Maybe I’m missing something, but it seems to me that all that’s needed to make this work as intended in IE is to put width: 92px in ul#navlist li a.
Jimmy: another reader wrote in with a similar suggestion that lets I.E. interpret outsized anchor elements more faithfully. It turns out to be a pretty easy hack, actually — though it’s still a hack. I plan to implement it later today, and then add a note to this post about why my complaints turned out to unfounded.
Hugo: are you talking about a glitch in the right-hang column, where that column appears just a little bit higher than the main column in Opera? If so, I hadn’t noticed it until now but you’re right, it drives me bats.
Given the audience for your site, Khoi, I doubt you’ll find many readers who champion the IE cause. I, too, cherish the though of dumping IE support in the ongoing redesign of my site, particularly because I have a completely unreasonable fondness for liquid layouts, which make use of CSS which highlights IE’s gross incompetence.
My recent trip to India, however, made me change my mind about dumping IE support (and, for that matter, dumping 800px-wide screen support). I travel quite a bit and usually make a fair number of friends in the process–all of whom use internet cafes when they travel. I didn’t find one single internet cafe which had a browser other than IE or a monitor/video card combination which supported more than 800px-wide resolution. Also, very few of my relatives and friends abroad have sufficient computing acumen to even want to install a program when they’re told what it is and how it may help them.
I’m not saying that you should reconsider IE support–I’m quite glad you’ve taken the steps you have to write IE off and I wholeheartedly commend you for this–given your (perhaps largely professional) audience. We can only hope that in the near future Mozilla will be a household name in non-geek households.
Great comments, Narayan, thanks. You bring up a good point about I.E. in Internet cafes especially in Asia; its continued prevalence there shouldn’t be dismissed. I can only hope that this will change at some point, but I agree — I have relatives in Viet Nam who would probably not be particularly inclined to go and find Firefox, download it over their 56 kbps (or 28.8 kbps!) modem and install it. That’s part of the reason I didn’t want to completely break the site for I.E. Similarly, the main column of this site measures about 650px wide, so it should at least be readable in an 800 x 600 screen. The huge-ass picture on the front page is another story… I freely grant that’s it’s definitely not friendly to older computers on dial-up modems.
Ah, yes, dialup. Forgot about that one. Many of the cafes, particularly in remote regions, operate several computers off of what I could have sworn was a 9600baud connection. I was looking around for acoustic couplers, and not finding any, started searching for tin cans and taut string.
I’m strongly considering a lo-fi version. I don’t think every page/template requires a stripped down version, but CSS & CMS templates make this quite easy.
Also–maybe it’s my browser cache, but I don’t see a picture of a huge ass on the front page. 🙂
I just have one thing to say…
http://www.anybrowser.org/campaign/
This is my first visit her and I have to say that I was slightly bothered when I was told that I was using IE and that I should switch. But then I saw that you aren’t hiding any content from me and that I can see all of the content (although things may be off by a few pixels), so I’m happy.
I use IE because it is the fastest on my old Windows 98 machine … integrated into the operating system and full of flaws it may be, but I just don’t have time to wait for firefox to load my pages. New laptop == no more IE, though. I can’t wait. 😀
I’ve never used Safari yet, in person, so I’m just wondering how the page renders in Safari?
I know it uses KHTML (like Konquerer in KDE), but heh, haven’t been using an OS other than Windows for the past year, and I didn’t really care about CSS layouts before that.
Does it render correctly (in comparison with the W3C standards, and in comparison with FF and IE)?
Click my name link for an example of the Opera bug that I noticed. I didn’t notice the right-col glitch… but now I can’t look away! Argh!!
But like I said, don’t lose any sleep over it, I know that coding for Opera is just stupid, what with the 2% browser audience it has. I can’t help but use it though, I love it. Much faster than Firefox in my experience, but I lay that at the feet of the quirks of my particular setup. Firefox is a great browser and a great alternative to IE.
Oh, that’s ugly. Shit, the controls don’t even make any sense. I apologize to Opera users. That goes on the bug list straight away.
I figured it out in the end, hehe. However, in the same browser, it seems to forget all my info every time anyway.
I bet you love me now! =)
The site renders perfectly in Opera 8.00 beta on the Mac as far as I can see, so I wouldn’t lose too much sleep working around the bug others mentioned. Opera people are pretty good at upgrading when new releases come out – I don’t attempt to support Opera 4 anymore, for instance. 🙂
Aah, Internet Explorer, the sole reason I use Virtual PC for. Every time I make an alteration to one of my sites’ design (XHTML 1.1 + CSS, standards-compliant), I run VPC to test the site in IE6, and then IE5.5. I probably also should have a third virtual machine with IE5.0, but that might be just too much for me.
I’ve stopped striving to make my sites 100% IE-compatible. I just fix the most annoying glitches, or hide elements which IE won’t display correctly, and which are not crucial to navigating my sites, from IE users. Many of them, like CSS-based pull-down menus, won’t be displayed by IE to begin with.
Personally, I’m in favor of warning IE users about the glitches they may encounter. This way, there is a chance that instead of saying “There’s something wrong with this site” they will say “There’s something wrong with my browser.”
http://www.positioniseverything.net/explorer.html
Your empty space at the top of #comment_form is due to IE having a default top margin on forms. Explicitly set margin-top: 0px; and you’ll be laughing.
In order to avoid this kind of cross-browser irritation, I now start all my CSS explorations with
* {
margin: 0;
padding: 0;
}
and thus get decent control over where and when whitespace appears.
I would make the switch over to Firefox, if it wasn’t for the regretable fact that there doesn’t seem to be any compatability between Firefox and Norton.
Though, I suppose you can’t get the best of all worlds anyway.
There is one thing that IE did get right and that every other browser and the w3c got wrong.
The Box model. IEs quirks mode box model is clearly superior. It’s far more logical and should be the standard.
Who cares about the width of text? You care about the width of the chunk of stuff you are inserting into the page. It makes no sense whatsoever to have to calculate that on the fly out of paddings and borders and text widths etc.
Plus, the IE Box model fits reality. If you ask someone for the dimensions of a box, you aren’t going to expect the interior space as the answer, so why should you in CSS?
Ridiculous. :o)