IE bugs
2003-08-24 19:59:48.680795+00 by
Dan Lyke
14 comments
[ 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]](/adbanners/lookingglass.png)
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, but Mozilla started displaying it like IE 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.
