Debugging CSS in Radio's WYSIWYG editor

In a prior post, I talked about how certain DOCTYPE statements in a web page can cause Radio's WYSIWYG editor toolbar to disappear in IE6. Yesterday, I decided to see if I could pinpoint exactly what Radio does that causes this effect. I did find the cause, and I posted my findings on Radio Userland's discussion forum. Here is the text of that posting:

I figured out why the WYSIWYG editor toolbar does not display when IE6 is rendering in "standards-compliant" mode.

Some of the CSS generated by the <%radio.macros.weblogEditBox ()%> macro is not within CSS1 standards, and IE6 ignores these "invalid" CSS attributes when it is rendering in "standards-compliant" mode. Depending on the particular CSS attribute involved, this can cause significant differences in rendering between "standards-compliant" mode and "buggy" mode.

Microsoft has an MSDN article which talks about this:

Stricter Style Sheet Parsing

When you use the !DOCTYPE declaration to switch on standards-compliant mode, Internet Explorer 6 or later ignores style sheet declarations that do not comply with CSS1. Earlier versions of Internet Explorer permit you to use certain invalid declarations, such as leaving out the leading '#' sign at the beginning of a hexadecimal RGB value.

One line in particular prevents the WYSIWYG editor toolbar buttons from appearing. Here is the line of code, which is buried in system.verbs.builtins.html.editor.wysiwygEditor (it is within the "div id=idBox" / "script" bundle of code):

s+="<span style='position:relative; height:26;width: " + buttons[i] + "'><span style='position:absolute; margin:0px;padding:0;height:26; top:0;left:0;width:" + (buttons[i]) + ";clip:rect(0 "+buttons[i]+" 25 "+0+");overflow:hidden'><img border='0' src='[[toolbarImgUrl]]' style='position:absolute;top:0;left:-" + left + "' width=290 height=50";

This is a snippet of javascript code which builds the html for the toolbar, one button at a time. The html output by this javascript for the second button would look something like this:

<span style="position:relative; height:26;width: 23"><span style="position:absolute;margin:0px; padding:0;height:26;top:0;left:0; width:23;clip:rect(0 23 25 0);overflow:hidden"><img border="0" src='[[toolbarImgUrl]]' style="position:absolute;top:0;left:-24" width=290 height=50></span></span>

In this one line of code, there are two errors, each committed multiple times -

1. Lengths (such as height and width) have no units (such as px). From the above linked MSDN article:

Missing Unit Type Identifiers Treated as Pixel Values

According to CSS1, length values must specify a unit type identifier, such as cm, mm, in, pt, pc, or px. Values without unit type identifiers and values with white space between the number and the unit type identifier are ignored. Earlier versions of Internet Explorer treat numbers without any unit type identifier as pixel units -- as if "px" were appended to the string.

Within the first span's style:
height:26; should be height:26px;
width: 23 should be width: 23px

Within the second (nested) span's style:
height:26 should be height:26px;
width:23; should be width:23px;

Within the img tag's style:
left:-24 should be left:-24px

When IE6 is in "standards-compliant" mode, none of these CSS attributes are recognized or applied.

2. Span elements are assigned invalid style attributes (height and width). Again from the MSDN article:

Width and Height of Inline Elements

Inline elements such as SPAN, B, and I do not support width or height properties. If you want to set the width or height property of an inline element with standards-compliant mode switched on, you must set the display property of the element to inline-block.

The above line of code assigns both a height and width to each span. As in the error above, IE6 will not recognize or apply a height or width to a span when it is rendering in "standards-compliant" mode (unless the display:inline-block attribute is set).

By correcting these two errors in that one line of code, IE6 will display the WYSIWYG editor toolbar even in "standards-compliant" mode:

s+="<span style='display:inline-block; position:relative;height:26px;width: " + buttons[i] + "px'><span style='display:inline-block;position:absolute; margin:0px;padding:0; height:26px;top:0;left:0;width:" + (buttons[i]) + "px;clip:rect(0 "+buttons[i]+" 25 "+0+");overflow:hidden'><img border='0' src='[[toolbarImgUrl]]' style='position:absolute;top:0;left:-" + left + "px' width=290 height=50";

These are by no means the only CSS errors in the code. The following div, which is the container div for the 4 drop-down formatting boxes just above the toolbar, also has a height with no units (px):

<div id="tb2" style="width: 100%;height:25;overflow:hidden; background:gainsboro;" onselectstart="return false" ondragstart="return false">

This div, which happens to be the container div for the WYSIWYG editor toolbar, has three errors:

<div id=idBox style="width: 100%;text-align: left; ;visibility: hidden, height:25;overflow:hidden; background:gainsboro" ID=htmlOnly>

1. Like the div above, this div has a height with no units (px).

2. The visibilty attribute ends with a comma instead of a semi-colon.

3. There are *two* id attributes in this div. At the beginning is "id=idBox", and at the end is "ID=htmlOnly".

I had hoped that these problems could be overcome with some appropriate declarations in the style sheet. Unfortunately, this is not possible.

The width for each toolbar button's span element needs to be set in the style sheet in order for this to work, but the width varies from button to button. The left attribute in the img tag needs to be set as well, and it varies from button to button too.

Until Radio Userland's programmers fix up the code for the <%radio.macros.weblogEditBox ()%> so that it outputs valid CSS, the only option available to users is to not use DOCTYPE statements in their templates that cause IE6 go into "standards-compliant" rendering mode.