Internet Explorer is the root of all evil

I was reading a page about new (old) CSS3 propositions and the support different browsers offer. Any surprise as to what supported the least? (None, in fact.) Internet Explorer. Of course.

Internet Explorer is the bane of my existence as a designer. Because I don’t have to put up with it on a day-to-day basis, I’m not forced to put up with its crap. Lately because I’ve had the opportunity to check my designs on a PC while I’m working on them on my Mac, I’m discovering IE’s odd quirks. What renders beautifully in Safari will look the same 97% of the time in Firefox on PC, and maybe 85% in IE. I’m surprised that number is so high, but I’ve been careful and have learned a few solutions that I’ve kept on hand to avoid tearing my hair out. There remained one puzzle though:

WHY was there a gap under my images?

Solution? I googled my problem (turns out this is a good alternative to D.I.Y.) and found an easy solution: display:block. Ta-da! here’s an easy read about it and some more standards-compatibility charts. The funny thing is that I’ve never noticed this before.

Other problems: dimensions of boxes are wonky, positioning text within those boxes and having the padding being off, things difficult to get centered. Maybe I still have more learning to do, but why should it have to be this difficult when it works perfectly in two browsers? Because they’re designed better?

IE is still the most popular browser, but Firefox is smarter and IE is being… outfoxed.