Monday, November 02, 2009

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:
strong { font-weight:bold; }
em { font-style:italic; }
em.strong {font-weight:bold;}
strong.em {font-style:italic;}
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:

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

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


Mark D said...

I have just recently come across this issue. Your workaround seems to fix the issue for strong and em tags, but what about the spacing issue caused by the first part you mentioned?

Paul Alkema said...

This was really helpful. Thanks.

Rick Root said...

So, the bug is closed.. but the bug tracker doesn't seem to show a resolution or anything.

Anonymous said...

I noticed that if I launch a CFWindow on page that has a Youtube embedded video that the border of the Cfwindow winds up behind the youtube video.

Has anyone else seen this?

It's quite possible it's an error on my part. If anyone has an insight, it would be appreciated.

Andrew said...

Just come across this myself.

Notice however that as part of the cfajaximport tag you can specify a csssrc attribute. I.e. you can point to your own css file for the ajax controls to use.

Can't you simply copy the existing css (and images) and then edit those lines in your site/local css copy as required? Could also change things around that way as well.
Can also