Your Favorite Web Browser Sucks

12/11/04

I swore to myself I’d take a little vacation, as far as the design of this site goes, and just use good clean unhacked CSS without worrying too much about testing in every possible browser.

But damn, IE can make the cleanest code do the ugliest things. (It’s not like I was asking for miracles, either; all I wanted was for display:inline to, you know, display inline. And don’t even get me started on PNG support.) So I relented a little and included some hacks to make it at least readable in IE. Though you’re missing all the beyootiful dropshadows.

But if you’re still using Netscape 4 you’re on your own. Not even my corporate clients require compatibility with NS4 anymore.

Here’s the problem, and how I solved it:

On the photo pages, I wanted a simple grid of images in a liquid layout. I also wanted to include those fancy dropshadows (which you IE users can’t see because they’re PNGs, and I had to disable them in IE because the transparency handling is perversely bad; it doesn’t just fail, it fails to some odd shade of gray just to rub in the fact that it’s failing. And yes, I’m aware of DXImageTransform.Microsoft.AlphaImageLoader and use it when it can be used, as in

<span style="width: 100px; height: 100px;"><img src="png.png" width="100" height="100" border="0"></span>

…which is groovy and all except for when you want to use a PNG as, well, anything but a single inline image, but what I really wanna know is if they already had support for 8-bit transparency built into the browser using their custom filter then why the cruddy crud didn’t they just apply it to the damn PNGs in the first place?)

(But I digress.)

So that grid. Dropshadows. Yeah. Which means that each element in the grid is more than just an ‘img’ tag, it’s actually a table (because I’m not a CSS zealot; I use tables when they’re cleaner than the standards-compliant alternatives) which wouldn’t necessarily float inline with each other.

So, easy. Set display:inline on those tables, add some padding, and you’re good to go.

In everything except IE, which interprets display:inline to mean “display:overlapping-everything-else-on-the-page-and-while-you’re-at-it-don’t-bother-staying-inside-the-bounds-of-the-parent-element-to-give-it-that-so-hot-right-now-negative-bleed-effect-by-shoving-things-half-off-the-page”. Which is cute, but not what I was looking for.

(What it appears to actually be doing is perversely positioning the bottom edge of the element instead of the top, so that if the element is taller then the line-height it’ll overlap anything above it. I’m unclear on what situation that would be useful, but I’m sure they know what they’re doing.)

Using display:anything-else puts it all in one vertical column. Applying float:left caused everything to be in the same horizontal row. I could have ditched the liquid layout and just forced a new row every three or four elements but — proof that there is poetic justice in the world — some of IE’s weaknesses can be used against it. Judo.

Most browsers are under the impression that ‘html’ is the root of every web page. It’s the first thing on the page, after all. Internet Explorer, somewhat poetically, is under the impression that there’s something else containing that node, something which cannot be named directly but which is out there anyway: it’s either a touching oblique reference to the world at large or to some platonic ideal Internet, or else it’s an ominous pointer to the parent corporation, but the upshot is that if you use the following construction:

* html div {your css here}

(which translated to english would mean something like “any ‘div’ which is contained somewhere within an ‘html’ tag, which is in turn contained within The Node Which Must Not Be Named”), then IE will see it, and normal browsers will not. Doesn’t have to be a div; can be anything you like; the * html is all you need to remember to tell IE completely different things from what you tell the rest of the world. So (and this bit would’ve been the whole post, if I weren’t procrastinating and under deadline at the moment) here’s the solution. Pretend for the moment that each element to be put in the grid is a div with class=”grid”, and that after every fourth one is an extra div like so:

<div class="IEFloatHack"><br clear="all"></div>

The CSS is then:

div.grid { display:inline; } * html div.grid { float:left; display:block; } div.IEFloatHack {display:none; } * html div.IEFloatHack { display:inline; }

Everybody sees the normal instructions, IE then promptly overrides them with the ‘* html’ ones; everybody gets a nice liquid grid except for IE which gets forced to four columns no matter what. Hey, you can’t have everything. Obviously.