Flutterby™! : IE bugs

Next unread comment / Catchup all unread comments User Account Info | Logout | XML/Pilot/etc versions | Long version (with comments) | Weblog archives | Site Map | | Browse Topics

IE bugs

2003-08-24 19:59:48.680795+00 by Dan Lyke 14 comments

Aaargh. So I have an idea, I code it up in HTML[Wiki] and CSS[Wiki], 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[Wiki](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.

[ related topics: Web development Microsoft moron Web Standards Project - WaSP ]

comments in ascending chronological order (reverse):

#Comment Re: [Entry #6462] IE bugs made: 2003-08-24 21:21:03.603886+00 by: Shawn

Would you care to share your idea? I've become reasonably good at cross-platform HTML/CSS. Maybe a second pair of eyes would help.

#Comment Re: IE bugs made: 2003-08-24 21:27:47.866393+00 by: Dan Lyke

I'm having a problem with a background image on a "div". The problem is that on IE[Wiki] 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'll try to slap an example up in a bit.

#Comment Re: IE bugs made: 2003-08-24 23:24:21.320907+00 by: dws [edit history]

I'm able to get images centered in <div>s by including

  background: #ffffff url('../images/footer.gif') no-repeat top center;
in the stylesheet. Works fine on IE6.

#Comment Re: IE bugs made: 2003-08-25 16:03:02.840715+00 by: Dan Lyke

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.

It's at http://www.flutterby.com/indexnew.html (yes, I know, the center background image is off by a pixel...) if anyone else wants to take a look at it.

#Comment Re: [Entry #6462] Re: IE bugs made: 2003-08-25 17:51:03.565754+00 by: Shawn

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?

Like it, BTW :-)

#Comment Re: IE bugs made: 2003-08-25 18:44:39.971295+00 by: Dan Lyke

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.

#Comment Re: [Entry #6462] Re: IE bugs made: 2003-08-27 21:36:04.205039+00 by: Shawn

On Mon, 25 Aug 2003 18:46:03 +0000 (UTC), Dan Lyke wrote:

> 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.

#Comment Re: IE bugs made: 2003-08-28 03:45:25.919952+00 by: Pete [edit history]

Grumble, grumble... I am so a participant!

#Comment Re: IE bugs made: 2003-08-28 04:38:48.476035+00 by: Dan Lyke

Then go put some links in your User Info!

(Yes, versions have, on and off, had that disclaimer at the top).

#Comment Re: IE bugs made: 2003-08-28 21:54:45.613924+00 by: Dan Lyke

Shawn, just tried to replace the "margin-left" with a "left", and got no change in IE[Wiki], but Mozilla started displaying it like IE[Wiki] displayes the one with the stretched margin.

#Comment Re: IE bugs made: 2003-08-28 21:59:05.202012+00 by: Dan Lyke

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.

#Comment Re: [Entry #6462] Re: IE bugs made: 2003-08-30 22:56:03.70631+00 by: Shawn

On Thu, 28 Aug 2003 21:56:03 +0000 (UTC), Dan Lyke wrote:

> Shawn, just tried to replace the "margin-left" with a "left",

Um... that's not quite what I meant. Here's the "fixed" css sections that are working for me:

#centercontent { position: absolute; left: 181px; top: 128px; margin-left: 0px; margin-right:0px; margin-top: 0px; background:#fff url(adbanners/centerback.jpg) no-repeat top left; padding-top: 32px; padding-left: 10px; padding-right: 200px; /* width of #rightcontent */ }

html>body #centercontent { margin-left: 0px; margin-right:0px; }

This gives [what I think to be] the desired result in both IE 6 and Mozilla 1.0.2

#Comment Re: [Entry #6462] Re: IE bugs made: 2003-08-31 15:31:03.784182+00 by: Unknown, from NNTP

Dan Lyke <danlyke@flutterby.com> writes:

> Then go put some links in your User Info!

I can't get my weblog name to be anything other than 'Flutterby!', FWIW.

john. -- Golly, I'd hate to have a kid like me! -- Calvin

#Comment Re: IE bugs made: 2003-09-02 23:47:04.081848+00 by: Dan Lyke

Whoops. Okay, try again, that apparently got hosed when Mark were doing the multiple weblogs changes.