found drama

I spent a little time this past weekend trying to wrap up my “for Ortho 0.5″ to-do list.  Fixed a few obscure bugs, polished up a few items that had bugged me, deferred a few others to the Ortho 1.0 to-do list.  And I was basically ready to close the book on Ortho 0.5 if not for IE6’s various inexplicable float bugs:

What you see is a carved-out screenshot from this recent post.  Looks fine in any decent, modern browser.  But as you can see from that screen cap, looks like shit in Internet Explorer 6.  My gut reaction is to take a page from Mr. John Gruber:

If Daring Fireball looks like shit in your browser, you’re using a shitty browser that doesn’t support web standards. Internet Explorer, I’m looking in your direction. If you complain about this, I will laugh at you, because I do not care.

But the evidence in my logs suggests that a significant-enough portion of my pages are getting served up to IE6 ¹ and so I feel like I should make a best effort to resolve something that so seriously screws up the layout.  So web standards aside, IE6 mockery aside, there was the challenge of getting things to look right.

Now as a brief aside:  I have no intention of bending over backwards on this issue.  The site’s footer looks pretty shitty in IE6.  And probably for the same reason (viz. the floats) that the images do.  But the footer is way down there and generally not something that folks are spending too much time worrying about.  And so I’m spending no extra effort on the footer.  Though I, incidentally, believe that once I get this thing with the image floats figured out, the fix for the footer will seem downright trivial.

Now where was I?  Oh right, the float styles that are applied to the images.

This isn’t something that I made up on the spot back in March of ’07.  I did not pull these styles out of my ass.  I did what any smart coder would do:  I ripped it off from somewhere else – somewhere where I knew it to be working.

Now, there is the obvious argument that ripping off code from one place and dropping it into a new context is no guarantee that it will work the way that you expect it to.  After all, you didn’t write it, so you can’t very well say that you know all of what it’s doing.  What else does it depend upon? &c.

But let’s brush off that argument as irrelevant.  I understand these dozen-or-so lines of CSS well enough to know what they’re supposed to do, that they function well enough on their own without additional supporting code, and that I haven’t created any conflicts.

Or at least:  no conflicts that I know of.

In the screenshot above, the image has a class of alignright applied to it.  The “meat” of this class is as follows:

img { border: none; }
.post-body img, .post-body * img {
    margin: 0.25em;
    padding: 2px;
    border: 1px solid #666;
    max-width: 100%;
}
img, .alignleft, .alignright { display: inline;/*forIE*/ }
.alignright, img[align="right"] {
    float: right;
    margin-right: 0px;
}

Or so it was at the time I began my examination.  I did a couple of searches for IE6 float bugs and how to resolve them.  I found a lot of stuff about sidebars, three-column layouts, and the usual forum posts with the usual litany of complaints that either go unanswered or else answered by unhelpful trolls.  I did manage to find two interesting pieces ² but nothing that seemed to solve the problem I was experiencing.  I was already using the “it’s so simple, it’s almost stupid” display:inline fix so I felt as though I could safely assume that wasn’t the answer.  So I tried…:

1. adding clear:none to accompany display:inline (no luck)
2. adding width:auto to accompany display:inline (and though that partially helped with the otherwise unusually large size of next/previous links, I still wouldn’t call it a win)
3. adding width:auto and clear:none to accompany display:inline (no luck here either)

Leaving me pretty much out of ideas.  Baffling!  Everything I have found so far seems to suggest that setting display:inline is enough and (where it’s not) you probably just need to set a width (e.g., width:auto) and you’re good to go. The clear:none business was just me grasping at straws.

Any readers out there with ideas on this one?

UPDATE: In case you’re curious: (1) I also wound up removing the position:relative from #page ³ and (2) the current state of the CSS applied to the img elements stands as such:

img { border: none; width: auto; }
.post-body img, .post-body * img {
    margin: 0.25em;
    padding: 2px;
    border: 1px solid #666;
    max-width: 100%;
}
img, .alignleft, .alignright { display: inline;/*forIE*/ }
.alignright, img[align="right"] {
    float: right;
    margin-right: 0px;
}

And again: ideas? Because I still can’t seem to track this down – despite trying to recreate this one from scratch by reverse engineering it. Such a dilly of a pickle.

1. But my site stats log also tells me that the #6 browser visiting blog.founddrama.net is something called “porn_viewer larbin2.6.3” so who really knows what’s up with all of that.[↩]
2. Position Is Everything has probably the classic explanation of IE6’s float/double-margin bug and Smashing Magazine had a “CSS Float Theory” round-up with some useful nuggets.[↩]
3. Which appeared to make sense given the outcome of a reverse-engineering exercise but alas did nothing helpful nor harmful…[↩]

About Rob Friesel