cfwindow css bug workaround

Last week I posted about a bug I found in the ColdFusion 9 Ajax. In particular it referred to some display errors that were introduced by usage of cfwindow, cflayout-border, or (possibly) other Ajax containers. After a bit of head scratching and testing today, I have found a workaround. The workaround is kind of hackish, and doesn't work will with the CF rich text editor, but it is a start.

The Problem
Research and testing has shown that the problem was caused by the ext-all.css file. When you use or import cfwindow or cflayout-border on your page, ColdFusion automatically adds a few css and ajax files into your page's output HTML. One of these css files, ext-all.css, appears to be causing the problem.

If you open ext-all.css, you will find the following towards the very beginning of the file (emphasis and whitespace added for easier viewing):

html, body, div, dl, dt, dd, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {margin:0; padding:0;}

This line appears to be causing the table padding problems.

Two lines farther down the file, you will find this:

address, caption, cite, code, dfn, em, strong, th, var {font-style:normal; font-weight:normal;}

This line appears to be causing text surrounded by <em> and <strong> tags to display as plain text.

The Workaround
The workaround is simple. In CSS, which ever style declaration comes last, wins. So, simply add the following to the bottom of your page:

<style>
strong { font-weight:bold; }
em { font-style:italic; }
em.strong {font-weight:bold;}
strong.em {font-style:italic;}
</style>

Line 1 is a style open tag.
Line 2 modifies the strong tag back to bold.
Line 3 modifies the em tag back to italics.
Line 6 closes the style tag.

So what are lines 4 and 5 for? Simple. Lines 2 and 3 of the workaround cause text to render bold or italics, but not both. So, Line 4 allows you to modify an em tag to be both italics and bold. Line 5 does the same in reverse.

A Simpler Workaround
Incidentally, you probably noticed that there is a simpler (though more extreme) workaround. You could just remove td, th, strong, and em from the offending lines of ext-all.css . If you are going to do this, however, you probably want to backup your copy of ext-all.css first; how this will affect the ajax controls and/or pages that use them is unknown.

Why Bother? Who cares? Why not just use inline styles? Who uses strong or em tags anymore anyway?
Good question. The answer is: Adobe, or, more importantly, their products. ColdFusion has the slick CKEditor (formerly called FCKEditor) built into it. CKEditor uses strong and em tags to modify text. This means that any content that you generate using the CKEditor (e.g. in a homegrown CMS), will be rendered plain text by ext-all.css. This is a problem.

Also, when coding with DreamWeaver, if you hit Ctrl-b for bold, or Ctrl-i for italics, DreamWeaver is going to insert em and strong tags to enforce the bold & italics. If ext-all.css renders that text plain, you now have a lot of pages on your site unexpectedly showing up with a lot of plain text, and unpadded table cells. This is an even bigger problem.

Please Vote
Workaround notwithstanding, if you think that this bug is as big of a problem as I do, please vote for Adobe to fix it here:

http://cfbugs.adobe.com/cfbugreport/flexbugui/cfbugtracker/main.html#bugId=80530

Also, you may like to vote to have Adobe fix a related bug here:

http://cfbugs.adobe.com/cfbugreport/flexbugui/cfbugtracker/main.html#bugId=80421

Thanks for your votes. I am looking forward to seeing Adobe fix this problem.