

The IE CSS Bug Which Cost Me A Month’s Salary - patio11
http://www.kalzumeus.com/2009/10/23/the-ie-css-bug-which-cost-me-a-months-salary/

======
sosuke
In case you weren't already aware, Microsoft provides free images of XP and
Vista with IE 6, 7 and 8. You have to get a new image every few months but
they work great for making sure this doesn't happen. Only takes a few seconds
to boot up the virtual pc and check your layout and functionality.

[http://www.microsoft.com/Downloads/details.aspx?FamilyID=21e...](http://www.microsoft.com/Downloads/details.aspx?FamilyID=21eabb90-958f-4b64-b5f1-73d0a413c8ef&displaylang=en)

~~~
billturner
But last I tried to use them (a month or so ago) they no longer work in
anything other than MS Virtual PC. VirtualBox, VMWare, etc wouldn't work. So,
now you need to be on a Windows PC to use their images.

~~~
danl
Microsoft have recently released Super Preview - a very handy (and free)
browser tester. You can compare IE6,7 and 8 side by side.

Download it here:

[http://www.microsoft.com/downloads/details.aspx?FamilyID=8e6...](http://www.microsoft.com/downloads/details.aspx?FamilyID=8e6ac106-525d-45d0-84db-
dccff3fae677&displaylang=en)

~~~
qeorge
Super Preview sucks - its basically an app wrapped around a service like
browsershots.org. All you get are flat screenshots, which isn't enough.

You're going to need to find a way to test on a real version of the app.
Xenocode(.com) used to have sandboxed versions of all the browsers available,
which was perfect, but they've since removed the page. So now the images
provided by MS (referenced in parent) are your best best.

~~~
rufo
Xenocode just moved it, and they linked to the new page from the old one:

<http://spoon.net/Browsers/>

~~~
qeorge
Unfortunately they now require a plugin and launch from the web, they used to
offer an exe of each browser you could download. Its too bad, was one of the
best tools available for browser testing.

~~~
rufo
Ah - I'd always used the browser launch version, I wasn't aware they had .exe
downloads.

I still think it's invaluable - rather than setting up three separate VMs, I
can just have one on IE6, and launch 7/8 as needed (I usually just save-state
at that point so I'm not constantly launching them).

------
rimantas
To prevent that in he future: 1) Test in all browsers you are supporting 2)
Learn about <input type="img"…>

BTW article linked in OP suggest you can use any format for the image, and
suggests .jpg. This is very bad choice—save jpegs for larger photos, this
format does not work well for icons/buttons, PNG (preferred) or GIF would be
much better option.

~~~
filosofo
Or use the <button> element with the text-indent background image trick. That
works in IE6.

~~~
qeorge
Came to say the same thing. Even better is just leaving out the background-
image/text-indent trick altogether, and using the image's alt tag:

<button><img src="/img/sign_up_button.png" alt="Sign Up" /></button>

The versatility of the <button> element is really remarkable, and it works
fine in all browsers. I highly recommend anyone currently using <input
type="submit"> to change to <button type="submit">

------
patio11
About a year ago a blog post dissecting a minor-but-critical bug on my site
was pretty popular here. ( <http://news.ycombinator.com/item?id=383108> ) I
discovered another one today, which was so frustratingly infuriating (mostly
at myself) that I had to write about it, if for no other reason than to keep
pulling my hair out.

~~~
ecaron
The beauty of IE is that once you've found a bug, there's nothing you can do
about it. I gave up trying to bring the bug I stumbled across -
<http://crashie8.com/> \- to Microsoft's attention after I kept hearing "oh,
your HTML isn't valid."

 _grumbles about Netscape letting go of its mantle..._

------
thaumaturgy
Ouch. I sympathize with the author -- various CSS quirks have cost me an awful
lot of time and money over the years.

I'm currently solving this with two approaches:

First, use crossbrowsertesting.com -- they are really great people, I was
among their first users, they keep improving their site and service, it's
easy, and for the money it's absolutely worth it. Every time I make changes to
my libraries which might even possibly be handled differently by different
browsers, I log in to CBT and test the browsers. (I've found the best order to
be FF -> Safari -> Chrome -> IE 8 -> IE 7 -> IE 6; usually by the time I get
to IE 6, everything's working OK.)

Second, stop using CSS for (fancy) layout. It wasn't really intended to do it,
and I don't expect CSS3 support to fix the usual problems I have with CSS2.
So, one of my more recent projects is a simplified layout language parsed in
JavaScript that makes certain things very easy. It's also very fast.

------
sachinag
If you don't want to set up Selenium yourself, you can use
<http://saucelabs.com/>, which does it in the cloud for you. hugs (Jason
Huggins) pops up here on HN from time to time, as well.

~~~
patio11
Thanks, that looks like exactly what the doctor ordered. It will still take me
a while until I a) understand Selenium well enough to use it productively and
b) can write a comprehensive test suite for the high-value customer-visible
stuff and c) can figure out how to have the test suite not break
(unnecessarily) every time I do an A/B test.

~~~
jedc
A friend of mine has what might be a friendly/easy solution. <http://go-
test.it> does hosted, automated testing and even handles complex javascript.

------
axod
A little while ago I had a similarly silly bug in Mibbit.

The advertising is specifically setup to refresh every few minutes with new
adverts relevant to the discussion.

Only problem is, I had typo'd:

setTimeout instead of setInterval = only one refresh!

Bugs like that and patio's are a little hard to spot, since everything is
still working, money is still being made, just not as well as it should be :)

~~~
patio11
Yeah. Its like filling a bucket with a hole in it -- the water level is still
rising, so you don't notice that you're losing half of what you're putting in.

Except in my case, the bucket was used to stop a shotgun blast and then I
started filling it from a fire hydrant.

------
Poiesis
Thanks, Patrick, for your unceasing dedication to A/B testing for web signup
interfaces. Why--if you hadn't actually bothered to track how well users that
don't see buttons convert, well, let's just say I don't think anyone else
would have done it. [knowingly. :)]

Thanks for taking one for the team. Many dollars died to get this information.

------
wvenable
Using text-indent: -1000px is a terrible hack anyway. Some hacks are necessary
but when you're moving elements off the page to achieve an effect, you're
definitely doing it wrong.

~~~
thaumaturgy
I want to downvote you but I'll reply instead: I've noticed this sort of
response on HN more lately, where someone is criticized for the way they did a
thing, or their approach in solving a problem, but the criticism is completely
unhelpful.

patio11 clearly said in his blog post that CSS wasn't his bailiwick. Instead
of simply saying, "You did it wrong!", you might say:

Here's a link to some popular CSS image replacement techniques: <http://css-
tricks.com/css-image-replacement/>

It's also worth pointing out that, in that article, patio11's text-indent hack
is cited as probably the most-commonly-used method.

~~~
mtts
Let's not be excessively gentle here: text-indent -1000 is a _terrible_ hack
(try input type="img" instead) and while I'm not mean enough to think the
author deserved what he got, I also don't think we should feel overly sorry
for him learning about how HTML works the hard way.

If you've been at it for a few (and I do mean "a few") years, building sites
that work in all major browsers (FF, IE 6 - 8, well, alright, Safari) turns
out to be not the most difficult thing in the world.

------
JshWright
"(Word to the wise: trying to fix a Rails application by editing files in vi
through a web console to your Slicehost VPS is not recommended.)"

Maybe it's because I use Linode and not Slicehost, or Python rather than
Rails, but this doesn't sounds like that scary a prospect to me...

In fact, it sounds a lot like my development environment (simply s/web
console/ssh session/).

~~~
ionfish
It's nothing to do with the server environment; a Linux install is a Linux
install. Hacking your live application is generally still a bad idea
regardless.

~~~
JshWright
I was being facitious suggesting that somehow a Linux install would be
substantially different from one VPS provider to the next (likewise that
Python would be any easier or harder to hack on than Ruby).

While I agree that playing with production code is generally a bad idea, there
are certainly times it's called for (granted, 2AM may not be one of those
times, if a few hours later you can be in your "normal" development
environment)

------
Semiapies
There's nothing wrong with designing in Chrome or Firefox, but I think you
_have_ to have IE 7 open as well and at least give it a look every few minutes
to make sure it matches what you see in your primary browser.

(Then, of course, check how it looks in IE 6 and 8. I say keep IE 7 open
because surveys have said it has the most users of any IE version at the
moment.)

------
jacquesm
You could turn the lessons learned here into a service, something that you
give a url and it will render it in all browsers known to man, then highlight
the differences between the various renderings.

~~~
quizbiz
<http://browsershots.org/> does this. Very poor execution. I would love to see
a member of the HN community do better.

~~~
fnid
I love browsershot.org Don't agree about the poor execution. I think it's
great.

~~~
quizbiz
I just don't like the design of the site and how you have to wait for an
email. There is no instant gratification so there is room for improvement,
albeit difficult to execute.

~~~
fnid
Wow, you're hard to please! ;)

Have you looked at how they have it set up? Your link goes into a queue for
the servers that are called "Factories." It is a massive distributed computing
environment like SETI where people volunteer their computers to take the
screen shots and upload them to the web for you to view.

------
dstorrs
Some other options for x-browser testing:

<http://litmusapp.com/browser-testing> <http://www.browsera.com/>
<http://www.spoon.net/browsers/>

The last doesn't work for me (Mac using either FF or Safari) but the other two
seem to. I haven't used any of these personally, and am not affiliated with
them, just listing some options for others to check out.

------
bcl
I use the IE Collection for this -
<http://finalbuilds.edskes.net/iecollection.htm>

Every possible build of IE that you might want to test against. It is too bad
he got hit by this bug, but he and/or his designer should be looking at the
site with the same tools as his customers. Thanks to non-standard standards
you really can't trust that anything you make is cross-browser until you
confirm it.

------
Nycto
I had issues loading this site... Looks like Google has a cached copy for
anyone else looking for a mirror:

[http://74.125.155.132/search?q=cache:http://www.kalzumeus.co...](http://74.125.155.132/search?q=cache:http://www.kalzumeus.com/2009/10/23/the-
ie-css-bug-which-cost-me-a-months-salary/&hl=en&strip=1)

------
recurser
> However, IE6/IE7 treat text-indent as moving the background image as well

Great post - any chance you could also post the css that caused the problem? I
use negative text indent all the time to do exactly this and haven't noticed
any IE problems - it'd be handy to know what combination of styles causes this
for future reference!

~~~
patio11
Sure. Here's the old HTML for your reference.

[http://www.bingocardcreator.com/files/old-
site/registration....](http://www.bingocardcreator.com/files/old-
site/registration.html)

The CSS links in that are good, but the relevant snippet is the following. The
second definition is the one that, when added on top of the first, fixes it
for IE.

<http://www.pastie.org/666918>

------
ashleyw
The site's down for me right now, so I don't know exactly what it's about. But
since everyone's mentioning cross-platform testing, here's how I test for
(basic) design differences:

<https://browserlab.adobe.com/>

…and then fall back on a VMWare of XP with IETester.

------
bemmu
This post inspired me to re-check my app on Safari & IE, and discovered it no
longer worked on either. Reason: if you say "thingy.attribute === undefined",
and thingy itself happens to be undefined, then it works on Firefox only.
Ooopsie.

~~~
philfreo
try "typeof thingy.attribute === 'undefined'"

------
benofsky
More like: "The lack of testing which cost me a month's salary".

------
tlrobinson
<http://browsershots.org/> FTW.

Obviously won't work for dynamic apps, but it would have caught this one.

------
theycallmemorty
A little off topic but if you're doing testing in IE8 you can switch it into
compatibility mode to see how the page would render in IE7.

~~~
rgrove
IE8's IE7 compatibility mode is not perfect, especially when it comes to
JavaScript. If it really matters that your site work in IE7, you need to
actually test it in IE7.

------
frankus
Somehow I read that domain name as kalamazeus. Which actually wouldn't be a
bad name for a web app of some sort.

------
andybak
<http://www.kronenberg.org/ies4osx/>

------
thangalin
<http://browsershots.org>

------
pbhjpbhj
In other news he's taking about $5000 USD per month on his bingo creator from
direct sales. I think I'd have been more thorough in testing. Maybe.

------
motters
IE + CSS = DO NOT WANT

------
_ck_
IETester will let you effortlessly see your site in IE 5.5, 6, 7, and 8
(simultaneously and free and fast) - if you are on Windows of course

<http://my-debugbar.com/wiki/IETester/HomePage>

It's the only multi-IE solution I've found (other than VMs) that keeps form
elements working properly across versions.

