Friday, October 30, 2009

CF 9 Ajax breaks site CSS and formatting

Thesis
JavaScript/CSS includes for cfwindow, cflayout-border (and possibly others), kill some formatting elements, such as <strong> & <em> tags, and negatively affects table display such as padding / margins. This is a problem.

The details
Consider the following simple cfm page:

<p>Not Bold</p>
<p><em><strong>Bold and italics</strong></em></p>
Not unexpectedly, the above displays one line of plain text, and one line of formatted text. The above works in both CF8 and CF9, and looks something like this:
Not Bold
Bold and italics
Now we try importing the javascript & css for cfwindow. Consider the following small but important change:

<cfajaximport tags="cfwindow" />
<p>Not Bold</p><br>
<p><em><strong>Bold and italics</strong></em></p>


In the above, the formatting for the page breaks. All you get is plain text on both lines, something like this:
Not Bold
Bold and italics

The "strongs" and "ems" are completely ignored. Some testing has shown that this also happens when you import "cflayout-border". Worse, it also seems to goof-up table formatting and padding. Oh, and the same problem occurs when using the <cfwindow> tag directly, instead of just importing the cfwindow ajax and creating thru JavaScript.

Although I don't really use strong or em tags anymore, this will break a lot of legacy pages. Also, since the CKEditor included with ColdFusion uses <strong> and <em> tags instead of inline styles, any pages that use content generated by CKEditor will stop showing formatted text. This is a problem if you have implemented a homebrew CMS (as we have on a few pages).

I'll post a fix/workaround if I find one.

Notes
I am hesitant to post about this; last time I publicized what I thought was a bug in ColdFusion it turned out that I was just an idiot, and was doing something wrong (duh). So, on the one hand I hope that I am just an idiot (again), and that there is a simple workaround for this. Unfortunately I fear that I may have found a legitimate bug this time, and it complicates our plans (already in progress) to move to CF 9.

If this is a legitimate bug, I am surprised that something like this could have made it into final release code. It is easy to reproduce, and is immediately apparent in both FireFox and IE. I have read thru the CF 9 release notes, and performed an hour of two of testing, and haven't found any obvious workarounds. If you have an idea, please let me know. Otherwise, I think that we are going to have to look at waiting to upgrade to CF 9 for a little while. Bummer.

6 comments:

Henry Ho said...

Did you have <head></head> in your html file? In case u forgot, add them back in 'cause that's where the generated script are inserted.

Anonymous said...

Indeed, I have the same issue with table : padding.

Neil said...

@Henry: Yes, I did. Although the examples that I used in my post are trivial, in reality I tested a wide variety of cases, including cases with & without head tags, and with my CSS at both top and bottom of the page.

Neil said...

@Henry (and Anonymous): I have posted a simple workaround. It isn't perfect, but it is a pretty good start. You can find it here: http://nm1m.blogspot.com/2009/11/cfwindow-css-bug-workaround.html

Link Mckinney said...

Line 9 in ext-all.css

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

please disable this line.

Anonymous said...

I have been visiting various blogs for my term papers writing research. I have found your blog to be quite useful. Keep updating your blog with valuable information... Regards