IE bugs

Aaargh. So I have an idea, I code it up in HTML and CSS, it looks great in current versions of Opera and Mozilla, I think "great, I'll migrate Flutterby", then I think to go over to Windows and check it in IE(pronounced "aiieee"). Sigh. There goes my momentum. Of course it just now occurred to me that I might be able to solve the problem by yet another nesting of "div"s. It's almost enough to make someone wanna join the Web Standards Project.

I'm having a problem with a background image on a "div". The problem is that on IE it anchors at the outer "margin", on Mozilla and Opera it anchors where I think it should, at the base of the padding. An extra nested "div" puts a blank line in, and I haven't gone and chased that one yet.

I want it top left, not top center, but it gets top center wrong too, although it's less noticeable because it's half the number of pixels of the margin offset left from the center of the visible region of the div.

And when I do a nested div, I get a blank line in the outer div unless I put borders around things to debug it.

Um... I can't seem to find the CSS that defines the weblogentry class. The
only sheet I see you importing is fcms.css, but it's not there.

As for the problem, it appears to me that what you've got is severe
clipping issues. In IE6 (with the latest patches, downloaded yesterday)
the div in question looks like it extends all the way to the left page
margin. If I add a "border: solid" style to the div, the left-most border
shows up lower down on the page - after it comes out from behind the Links
To Participants box.

Here's a
screenshot (I removed some content (from a local copy) so I could get
it all on one screen).

I've got some errands to run today but I'll try to hack on it a bit
tonight. Are you wanting to avoid using tables?

The weblogentry class is irrelevant. The only things that count are the "banner", "rightcontent", "centercontent" and "leftcontent".

And yes, that border (and the extent of that div) is exactly the problem. According to Eric A. Meyer's CSS Pocket Reference page 12 (and the implementations in both Mozilla and Opera, margin occurs outside the border, padding inside the border. In this case the left margin appears to be inside the border.

> The weblogentry class is irrelevant. The only things that count are the
> "banner", "rightcontent", "centercontent" and "leftcontent".

Okay, I've had a chance to dig and hack at this some more.

Personally, I've never had any luck mixing absolute positioning (in
anything more than the simplest context) with normal page flow. From what
I'm seeing, that's what's biting you here.

Correct me if I'm not reading this right, but you're letting #centercontent
sprawl across the page (left to right), using the padding to make room for
the sidebars, and then [absolute] positioning the sidebars on top of
#centercontent. As you've found, IE does downright wonky stuff when you do
things like this.

I've had better luck absolutely positioning #centercontent (don't forget to
set your right-/left-margins to zero) and then giving it a right-padding to
equal the width of #rightcontent.

IE's take on the matter (I don't know what exactly the spec says) appears
to be that padding only applies to text (and/or wrapping). I have to admit
I can see a case for their interpretation.

Oh yeah, Pete: I'm trying as much as possible to make Flutterby a system. Deriving the "sites Dan reads" from my bookmarks was part of that, but, in my mission to make this the site I wanted to read, I wanted something that exposed me to new sites. So the "Links to Participants" is derived from folks who've made comments, sorted most recent comment at the top, who have URLs in their User Info. I probably need to do some sanity checking on those URLs for security's sake, but since that stuff wasn't being used for anything but "click on the name", and I don't run the blog ads any more, I thought it was a good start.