Friday, January 9. 2009

IE6 HTML Comment Bug

While hacking on CSS image borders for a new site, I discovered yet another IE6 bug. (I know, you didn't think any more could fit. Haven't we expended our quota already?)

In short: HTML comments mess up IE6 layout for relatively position containers. Yup.

I searched Google to see if other people had problems with IE6 HTML comments, but I didn't find anything specific, so I'm demonstrating it for the good of webdesignerkind.

I was actually trying to understand Position Is Everything's "Four Sided PNG Drop Shadows" layout and extend it for IE6. After all, the December statistics for browser share show that 20% of visitors use it; I figured I'd use a dithered PNG-8 for them.

I built the HTML (substituting my own class names), assigning each div an arbitrary color so I could tell them apart. Then I started commenting pieces out to see how they affected the size of their containing div. With each step, I verified my understanding with Firefox. When I was done, I sent the final page to BrowerShots to see if IE6 had a problem with the layout or just the PNGs. Here's what FireFox had showed me:

Here's what the IE6 screenshot looked like:

I obviously couldn't experiment with BrowserShots, and I couldn't install IE6 because I run Linux. Luckily, my friend Don Chambers came to the rescue. With a IM and a little patience, we discovered that the HTML comments I had left in the page were messing up the display of the relative divs.

Just when you thought it couldn't get any worse: best practices mess up your layout.

I'm obviously not privy to IE6 source code, but looking at it from a programmer's point of view, I'd say that IE6 sets the comments to visibility:hidden to prevent their display, and the relatively positioned divs inherit the setting. But that's just a guess. I verified that removing the comments from the HTML repairs the layout.

If you have IE6 (upgrade if you can), you can see the IE6 comment bug example page and verify it for yourself. Feel free to download the file and abuse it any way you like.

Posted by

Judebert

in Web Activities at 10:55 | Comments (14)

Defined tags for this entry: bugs, comment bug, css, ie6

Related entries by tags:

Improving CSS Star Rating

Trackbacks

Trackback specific URI for this entry

No Trackbacks

Comments

Display comments as (Linear | Threaded)

This seems to be yet another IE6 bug (IE6 duplicate characters bug). The link below has a couple of work arounds for this issue.

http://www.positioniseverything.net/explorer/dup-characters.html

Either a css style property of display: inline; in the div preceding the comment, or applying this as a style for all floating divs seems to fix the issue. The other option is to use the <!--[if !IE]> syntax which is quite hideous IMO.

#1 evwannabe on 2009-01-11 15:01 (Reply)

I tried display: inline; in various combinations with buggy comments and I only got more breakage. Can you describe or show how you fixed this bug with that declaration?

#1.1 Big John (Homepage) on 2009-01-11 16:29 (Reply)

In Judebert's example, IE6 comment bug example page change line 61 to the following:

CODE:

The addition of this CSS property actually takes care of a few buggy issues in IE6, so it is recommended to apply this to all floating divs instead of defining it each time before a comment occurs as I did above.

The alternative is to use the following syntax:

CODE:

<!--[if !IE]>

which is not very pleasing to the eye IMHO.

#1.1.1 evwannabe on 2009-01-11 18:00 (Reply)

It is a little tough to get HTML source code to show up properly as you can see from the blank code line above

You can download a screen shot of the modification to Judebert's example at:

[url=http://fileupload.filetac.com/file/8f4a44e1092b3694bbaacc8e79b9d61760b8c01b[/url]

Line 61 contains the green cursor box.

#1.1.1.1 evwannabe on 2009-01-11 18:35 (Reply)

Thanks for the screenshot. I'll have to figure out why HTML snippets aren't working; I definitely want people to be able to leave technical comments!

#1.1.1.1.1 Judebert (Homepage) on 2009-01-13 17:12 (Reply)

I just installed the "HTML in comments" plugin. You should now be able to quote html source in the comment field, just by typing it in.

Note that <b>, <i>, <a>, and the rest won't actually work; they'll just be displayed instead of stripped.

#1.1.1.1.2 Judebert (Homepage) on 2009-04-21 12:42 (Reply)

I'd still like to know how that display fix is working, 'cause I can't make it work at all.

#1.1.1.2 Big John (Homepage) on 2009-01-13 17:20 (Reply)

Actually, I got the same results with the outside container absolutely positioned, and with only one example. It's possible it's the same bug, though; perhaps IE uses the same code for relatively-positioned and floated elements.

#1.2 Judebert (Homepage) on 2009-01-13 17:25 (Reply)

I don't think that the outer div is involved in the bug at all, regardless of how it's handled. It's the rel-shifted divs that are screwing up.

#1.2.1 Big John (Homepage) on 2009-01-15 21:00 (Reply)

Nice catch, Judebert! Just goes to prove that the IE engine is well and truly infested with demons. Oy...

#2 Big John (Homepage) on 2009-01-11 16:20 (Reply)

You are right, IE is the hell for everybody want to create a website. Hopefully, they are going to change this with the new version.

#2.1 bouly (Homepage) on 2011-10-13 11:13 (Reply)

perhaps IE uses the same code for relatively-positioned and floated elements. ??

#3 radyo dinle (Homepage) on 2009-07-28 16:43 (Reply)

It seems to me like IE8, while fixing this particular bug, has introduced many more. What a shame. Firefox for me.

#4 Brendan Purst on 2009-12-28 16:03 (Reply)

I actually got this same bug while working on a three floated column layout. The layout uses no browser specific rules nor any positioning. The column layout consists of three left floated divs each proceeded and followed by an html comment. As soon as I removed the comments the extra characters magically went away. Off topic, anyone know a really easy way to make floats not wrap on window resize? Is it possible to get a pixel perfect three column (any)percentage width layout in IE6? Sorry for going off topic and thanks for the post!

#5 Michael Ray on 2010-03-17 06:18 (Reply)

Add Comment

Name
Email
Homepage
In reply to
Comment: HTML-Tags will be converted to Entities.
Enclosing asterisks marks text as bold (*word*), underscore are made via _word_.
Standard emoticons like :-) and ;-) are converted to images.
BBCode format allowed
E-Mail addresses will not be displayed and will only be used for E-Mail notifications.

To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or your comment cannot be verified correctly.

Enter the string from the spam-prevention image above:
: Remember Information? Subscribe to this entry