Mailing List Archive: IE6 rendering bug fixing

IE6 rendering bug fixing

adrian at gossamer-threads

Mar 31, 2009, 9:15 PM

Post #1 of 7 (4973 views)

Hi,

I've been doing some IE6 rendering fixes for WHO today and one of the
biggest problems is what looks like to be the slightly excessive usage
of "easy clearing"
(http://www.positioniseverything.net/easyclearing.html). I say slightly
excessive because it really should only be used when the element has
children which are floated. I've actually never seen this method of
clearing floats cause issues like this, but it's causing havoc in IE6
with Bricolage.

Issues like this are a real pain to get to the root of, but the solution
I've found just works (and is the reason I'm hesitant to commit it).
The patch is attached below.

A few notes:
- I just removed the IE-mac cruft (horribly old and unsupported browser).
- Used a new IE6/7 star hack (*height) instead of the * html one.
- Undo the clearing class hack for the clearboth class for IE6 which is
the one that seems to be causing problems.

The problem I see with this is that if someone uses the clearboth class,
IE6 doesn't get it. I already see one place where it's used and is
needed (the field names inside the container on the story profile page),
but from what I can see, it seems to fix more than it breaks.

What do you guys think?

Adrian

Index: comp/media/css/style.css
===================================================================
--- comp/media/css/style.css (revision 8532)
+++ comp/media/css/style.css (working copy)
@@ -889,27 +889,10 @@
.desk_item .head,
form .row,
.paginate,
-.viewmeta { display: inline-block;}
-/* Hides from IE-mac \*/
-* html .clearboth,
-* html .desk-top,
-* html .desk .item,
-* html .desk .item .head,
-* html .desk .item .actions,
-* html .desk_item .head,
-* html form .row,
-* html .paginate,
-* html .viewmeta {height: 1%;}
-.clearboth,
-.desk-top,
-.desk .item,
-.desk .item .head,
-.desk .item .actions,
-.desk_item .head,
-form .row,
-.paginate,
-.viewmeta {display: block;}
-/* End hide from IE-mac */
+.viewmeta { *height: 1%; }
+.clearboth {
+ _height: auto;
+}

/* double list manager. */
table.dlman select { width: 40em; } /* IE-specific setting */

Re: IE6 rendering bug fixing [ In reply to ]

david at kineticode

Apr 1, 2009, 9:26 AM

Post #2 of 7 (4834 views)

On Mar 31, 2009, at 9:15 PM, Adrian Yee wrote:

> I've been doing some IE6 rendering fixes for WHO today and one of
> the biggest problems is what looks like to be the slightly excessive
> usage of "easy clearing" (http://www.positioniseverything.net/easyclearing.html
> ). I say slightly excessive because it really should only be used
> when the element has children which are floated. I've actually
> never seen this method of clearing floats cause issues like this,
> but it's causing havoc in IE6 with Bricolage.

Stoopid IE6.

> Issues like this are a real pain to get to the root of, but the
> solution I've found just works (and is the reason I'm hesitant to
> commit it). The patch is attached below.

If it works, and works in FF and Safari, why are you hesitant?

> A few notes:
> - I just removed the IE-mac cruft (horribly old and unsupported
> browser).

+1 (Back in the day, it was the most advanced browser on the planet.
Tantek++)

> - Used a new IE6/7 star hack (*height) instead of the * html one.

Oh, that's much more succinct.

> - Undo the clearing class hack for the clearboth class for IE6 which
> is the one that seems to be causing problems.

I don't see a browser detection hack to make it work only with IE6. Am
I missing it?

> The problem I see with this is that if someone uses the clearboth
> class, IE6 doesn't get it. I already see one place where it's used
> and is needed (the field names inside the container on the story
> profile page), but from what I can see, it seems to fix more than it
> breaks.
>
> What do you guys think?

I'm not sure I follow you. If you can fix the problem on IE without
horking [/me adds “horking” to spell-check] other browsers, what's the
question? :-)

Best,

David

Re: IE6 rendering bug fixing [ In reply to ]

adrian at gossamer-threads

Apr 1, 2009, 3:27 PM

Post #3 of 7 (4826 views)

>> Issues like this are a real pain to get to the root of, but the
>> solution I've found just works (and is the reason I'm hesitant to
>> commit it). The patch is attached below.
>
> If it works, and works in FF and Safari, why are you hesitant?

Because it does slightly break things, but not as badly as having it in
there.

>> - Undo the clearing class hack for the clearboth class for IE6 which
>> is the one that seems to be causing problems.
>
> I don't see a browser detection hack to make it work only with IE6. Am I
> missing it?

*height: 1%; turns it on for IE7
then,
_height: 1%; turns it off for IE6.

>> The problem I see with this is that if someone uses the clearboth
>> class, IE6 doesn't get it. I already see one place where it's used
>> and is needed (the field names inside the container on the story
>> profile page), but from what I can see, it seems to fix more than it
>> breaks.
>>
>> What do you guys think?
>
> I'm not sure I follow you. If you can fix the problem on IE without
> horking [/me adds “horking” to spell-check] other browsers, what's the
> question? :-)

It breaks things in other places (but not as badly), and we lose the
ability to use the clearboth class in IE6, which you sort of need if you
want to properly clear floated elements.

The other thing is I hate doing things like this because it's really
just patching over the problem instead of really fixing it.
Unfortunately, properly fixing this problem properly would take a hell
of a lot of time because the CSS and markup is a huge mess.

Adrian

Re: IE6 rendering bug fixing [ In reply to ]

marshall at mroch

Apr 1, 2009, 4:21 PM

Post #4 of 7 (4827 views)

On Apr 1, 2009, at 6:27 PM, Adrian Yee wrote:
> It breaks things in other places (but not as badly), and we lose the
> ability to use the clearboth class in IE6, which you sort of need if
> you want to properly clear floated elements.

That clearboth hack has been superceded since it was implemented. See http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
(and the original clearfix hack from Position is Everything: http://www.positioniseverything.net/easyclearing.html)

--
Marshall

Re: IE6 rendering bug fixing [ In reply to ]

adrian at gossamer-threads

Apr 1, 2009, 7:22 PM

Post #5 of 7 (4827 views)

Marshall Roch wrote:
> On Apr 1, 2009, at 6:27 PM, Adrian Yee wrote:
>> It breaks things in other places (but not as badly), and we lose the
>> ability to use the clearboth class in IE6, which you sort of need if
>> you want to properly clear floated elements.
>
> That clearboth hack has been superceded since it was implemented. See
> http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/ (and
> the original clearfix hack from Position is Everything:
> http://www.positioniseverything.net/easyclearing.html)

I still prefer the clearfix hack as it's more flexible. With IE,
overflow doesn't work without setting a height or width anyways.

Adrian

Re: IE6 rendering bug fixing [ In reply to ]

david at kineticode

Apr 1, 2009, 7:50 PM

Post #6 of 7 (4824 views)

On Apr 1, 2009, at 3:27 PM, Adrian Yee wrote:

> It breaks things in other places (but not as badly), and we lose the
> ability to use the clearboth class in IE6, which you sort of need if
> you want to properly clear floated elements.
>
> The other thing is I hate doing things like this because it's really
> just patching over the problem instead of really fixing it.
> Unfortunately, properly fixing this problem properly would take a
> hell of a lot of time because the CSS and markup is a huge mess.

I believe that Matt was refactoring it. Matt, how's that coming?

Best,

David

Re: IE6 rendering bug fixing [ In reply to ]

rolfm at denison

Apr 2, 2009, 6:31 AM

Post #7 of 7 (4823 views)

On Apr 1, 2009, at 10:50 PM, David E. Wheeler wrote:

> On Apr 1, 2009, at 3:27 PM, Adrian Yee wrote:
>
>> The other thing is I hate doing things like this because it's
>> really just patching over the problem instead of really fixing it.
>> Unfortunately, properly fixing this problem properly would take a
>> hell of a lot of time because the CSS and markup is a huge mess.
>
> I believe that Matt was refactoring it. Matt, how's that coming?

The trunk that we're running is under a state of heavy construction.
So far, I've re-organized the css by declaration as opposed to
element, and that has cut the main css file by almost a third. But
I'm also making some incremental UI improvements, and that's made me
stop and think about what I'm doing.

Right now our ui is usable, but it's not pretty. I've spent a lot of
time ripping out the old stuff and not a lot of time putting things
back together. I'll hit it hard today and see where we are at the end.

-Matt