Radio Userland's weblog editor toolbar needs IE6's buggy CSS

| 3 Comments

Back in this post, I mentioned a problem I ran into while I was trying to make the html code on my blog "standards-compliant":

One thing I learned while I while trying to validate the html was how to break Radio Userland's WYSIWYG html editor. According to the W3C standards, the DOCTYPE in an html file is supposed to specify the full path to a DTD (document type definition) file. If such a path is specified, Radio Userland's WYSIWYG html editor no longer displays the formatting and linking toolbar at the top of the editor. (I have no idea why, but I suspect that it has something to do with the fact that the WYSIWYG editor code has an IFRAME tag in it.) It took me quite a while to figure out that this is what caused my toolbar to disappear.

While I was learning about how to use CSS (styles), I read about how CSS implementation was broken in Internet Explorer (IE's "broken box model", among other things), and that IE6 has a "standards-compliant" mode and a "buggy" mode of rendering CSS. I had no idea that rendering differences between "standards-compliant" mode and "buggy" mode were what caused the toolbar to disappear - until today.

While I was trying to find the answer to another problem, I ran across an MSDN (Microsoft Developers Network) article that talks about this very subject.

Versions of IE prior to IE6 do not render CSS in accordance with W3C standards. IE6 defaults to using the "buggy" mode (Microsoft calls it "compatibility" mode) in order to display pages similar to the way a prior version of IE would.

The "standards-compliant" mode is supposed to render CSS in accordance with the W3C standards. This mode is turned on if certain conditions are met by an html page's DOCTYPE. The following table shows which values of the DOCTYPE declaration turn on standards-compliant mode with IE6 or later.

Label Definition URL present URL not present
No !DOCTYPE present   Off (buggy) Off (buggy)
HTML (No Version Present)   Off (buggy) Off (buggy)
HTML 2.0   Off (buggy) Off (buggy)
HTML 3.0   Off (buggy) Off (buggy)
HTML 3.2   Off (buggy) Off (buggy)
HTML 4.0 No Definition Present On (compliant) On (compliant)
HTML 4.0 Frameset On (compliant) Off (buggy)
HTML 4.0 Transitional On (compliant) Off (buggy)
HTML 4.0 Strict On (compliant) On (compliant)
XHTML   On (compliant) On (compliant)
XML   On (compliant) On (compliant)
Unrecognized !DOCTYPE   On (compliant) On (compliant)

All of the themes that come with Radio Userland except one ship with the DOCTYPE highlighted in green above - HTML 4.01, Transitional, no URL. (The one exception has no DOCTYPE declaration at all.) Web pages rendered by Radio Userland therefore all use IE6's "buggy" mode of rendering CSS.

By adding the DTD URL to the DOCTYPE, I unknowingly switched IE6 from "buggy" mode to "standards-compliant" mode. Something in the code used to build the WYSIWYG html editor doesn't work right when IE6 is in compliance mode. The WYSIWYG html editor only shows up as a macro call in my template (radio.macros.weblogEditBox ()), so I would have to look at the rendered html to see what the macro is putting in there.

I don't know if this is something I can fix - it depends a lot on the actual html code used to build the editor. But at least now I know why the WYSIWYG html editor toolbar seemed to disappear at an odd time.

Update 22-Aug-2003: Sometime in the past, I thought I had seen something on this issue somewhere on Radio Userland's web site. While I was trying to solve this problem, I was unable to find that page. I was looking for something else today on Radio Userland's web site and found it again. Radio Userland has known (or at least suspected) this was an issue for several months now (since 01/31/2003). I guess it's nice that Radio Userland at least confirmed this problem's existence and the solution that I ended up figuring out on my own.

Update 24-Aug-2003: More details on this issue are available in this post.

3 Comments

Hi,
Have you tried using Conditional Statements to force IE to behave like NS, Mozilla, etc.?

It's something like this (place this between your tags, after you've loaded in your regular CSS file...)

The ie6hack.css is used to overwrite the settings set up in your regular CSS file, specifically for IE6 (or any other version of IE you choose). Inside ie6hack.css, you put the CSS to force IE to behave the way other browsers do.

Sorry, your blog doesn't like the < and > characters typed in directly. Try this:

<!--[if IE 6]><link href="css/ie6hack.css" rel="stylesheet" type="text/css"><![endif]-->

Sorry, I'll re-post the whole thing... your 'blog really doesn't like the < and > tags, it stripped out two parts of my comment...

Have you tried using Conditional Statements to force IE to behave like NS, Mozilla, etc.?

It's something like this (place this between your <head> </head> tags, after you've loaded in your regular CSS file...)

<!--[if IE 6]><link href="css/ie6hack.css" rel="stylesheet" type="text/css"><![endif]-->

The ie6hack.css is used to overwrite the settings set up in your regular CSS file, specifically for IE6 (or any other version of IE you choose). Inside ie6hack.css, you put the CSS to force IE to behave the way other browsers do.