...

View Full Version : Problem with Firefox's designMode and down-level revealed IE conditional comments



koyama
12-20-2007, 01:53 AM
Question: Is Firefox doing a bad job in designMode when one copies and pastes bullet lists from Microsoft Word into the Firefox document?

The test


Create a Microsoft Word document containing a bullet list. (you can use this one (http://koyama.dk/demos/firefox-designmode/one-two-three.doc) which is Word 97-2003 compatible)
Create a blank HTML document which is set to go into designMode via a window onload event.
Open the HTML document in Firefox 2. (live example (http://koyama.dk/demos/firefox-designmode/designmode.html) to be opened in Firefox 2/3)
Copy and paste the bullet list from Microsoft Word into Firefox. Screen shot (http://koyama.dk/demos/firefox-designmode/screen-shot-after-copy-paste.png) of what it should look like after doing this.
Inspect the generated source using e.g. the Web Developer Extension (https://addons.mozilla.org/en-US/firefox/addon/60) saying (View Source > View Generated Source)

What one sees is this kind of code as a result of pasting:



<p class="MsoListParagraphCxSpFirst" style="text-indent: -18pt;">
<a name="OLE_LINK5"></a><a name="OLE_LINK4"><span style="">
<!--[if !supportLists]--><span style="font-family: Symbol;" lang="DA">
<span style="">·<span style="font-family: &quot;Times New Roman&quot;;
font-style: normal; font-variant: normal; font-weight: normal;
font-size: 7pt; line-height: normal; font-size-adjust: none; font-stretch:
normal;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span></span><!--[endif]--><span style="" lang="DA">
one<o:p></o:p></span></span></a></p>

As expected when copying from Word one gets messy markup. But notice the conditional comments highlighted in red. They look like this:



<!--[if !supportLists]-->...<!--[endif]-->


As first sight they may appear to be fine, but they are not. Notice how the above line looks like in Internet Explorer. Live example (http://koyama.dk/demos/firefox-designmode/broken-conditional-comment.html) or IE screen shot (http://koyama.dk/demos/firefox-designmode/screen-shot-ie6-broken-conditional-comment.png). As can be seen, the entire comment is displayed as plain text in IE because of the broken syntax (more below). No matter whether it is IE6 or IE7.

But where do these conditional comments come from? Is there a problem with the HTML produced by Microsoft Word in the Window clipboard? No, not really. By direct inspection of the raw Windows clipboard using ClipView (http://www.peterbuettner.de/develop/tools/clipview/index.html) one finds this HTML in the clipboard after copying from MS Word.


<p class=MsoListParagraphCxSpFirst style='text-indent:-18.0pt;mso-list:l0 level1 lfo1'>
<a name="OLE_LINK5"></a><a name="OLE_LINK4"><span style='mso-bookmark:OLE_LINK5'>
<![if !supportLists]><span lang=DA style='font-family:
Symbol;mso-fareast-font-family:Symbol;mso-bidi-font-family:Symbol;mso-ansi-language:DA'>
<span style='mso-list:Ignore'>·<span style='font:7.0pt "Times New Roman"'>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</span></span></span><![endif]><span lang=DA style='mso-ansi-language:DA'>one<o:p></o:p>
</span></span></a></p>

Notice that the HTML in the clipboard uses non-validating downlevel-revealed conditional comments (http://msdn2.microsoft.com/en-us/library/ms537512.aspx).


<![if !supportLists]>...<![endif]>

Apparently, Firefox is trying to convert the comments to validating conditional comments here shown again:


<!--[if !supportLists]-->...<!--[endif]-->

As mentioned this is not how to do it. It should have looked like this:


<!--[if !supportLists]><!-->...<!--<![endif]-->


The above seems to be causing trouble when WYSIWYG text editors such as TinyMCE (http://en.wikipedia.org/wiki/TinyMCE) and FCKeditor (http://en.wikipedia.org/wiki/FCKeditor) are used together with Firefox for managing contents in various blogs and when copy-paste is done from Microsoft Word.

Above test was done on Windows XP using Microsoft Word 2007, Firefox 2, and Internet Explorer 6.

Is this a Firefox bug?

Actinia
12-20-2007, 02:57 PM
This stuff appears in Firefox because that is what is in the Word-generated code. If you save your doc file as a web page, you can see this.

You need save as web page and then strip out the superfluous stuff that word inserts. I would have suggested my XPFilter (http://php.uel.ac.uk/XPFilter.php) (php script), but this does not seem to work. This is probably because your file was generated with Word 2007 rather than Word XP. This seems to add anchor tags in which my php script was not expecting.

John Rostron

koyama
12-21-2007, 04:35 AM
You need save as web page and then strip out the superfluous stuff that word inserts. I would have suggested my XPFilter (http://php.uel.ac.uk/XPFilter.php) (php script), but this does not seem to work. This is probably because your file was generated with Word 2007 rather than Word XP. This seems to add anchor tags in which my php script was not expecting.
Thank you for showing me your script. I tried your utility which I may find useful in the future. Indeed, it does seem to be effective for cleaning up HTML documents created by Microsoft Word.


This stuff appears in Firefox because that is what is in the Word-generated code. If you save your doc file as a web page, you can see this.
Yes, you are right, I am aware of this. But in the first place my concern was actually not so much about how to strip off the conditional comments and other junk code within the HTML generated by Microsoft Word. Rather, what is worrying me is Firefox's way of dealing with the invalid code, namely the downlevel-revealed conditional comments.

Thanks to your remark about saving the doc file as a web page I can now show a much simpler example illustrating the problem. Forget about my previous post for a while, but instead consider this:

Here is an invalid HTML document. It is invalid because it contains downlevel-revealed conditional comments. Nevertheless, this kind is to be expected in HTML documents created by Microsoft Word. Notice that it looks the same in both Internet Explorer and Firefox. Live demo (http://koyama.dk/demos/firefox-designmode/hello.html).


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Firefox, Save Page, and Downlevel-revealed conditional comment</title>
</head>
<body>
<div>
<![if IE]>hello<![endif]>
</div>
</body>
</html>

But what happens when one saves the above document in Firefox via File > Save Page As ? Here is the resulting saved document. But look how the downlevel-revealed conditional comments have been transformed into regular comments, but of a type IE will not recognize. Therefore rendering is broken in IE where the comments are displayed as plain text. Live demo (http://koyama.dk/demos/firefox-designmode/hello-saved-by-firefox.html).


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Firefox, Save Page, and Downlevel-revealed conditional comment</title>
</head>
<body>
<div>
<!--[if IE]-->hello<!--[endif]-->
</div>
</body>
</html>

The broken rendering in IE is hardly desirable. I believe this could have been avoided if Firefox upon save instead had created the following which wouldn't break rendering in Internet Explorer. Live demo (http://koyama.dk/demos/firefox-designmode/hello-the-way-it-should-have-been-saved-by-firefox.html).


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Firefox, Save Page, and Downlevel-revealed conditional comment</title>
</head>
<body>
<div>
<!--[if IE]><!-->hello<!--<![endif]-->
</div>
</body>
</html>

Again, is this not something that ought to be corrected in Firefox, or did I miss something?

_Aerospace_Eng_
12-21-2007, 05:05 AM
Its not something that should be corrected. Firefox is just trying to make them normal html comments. It doesn't care what is in between the <! and > parts. The down-level revealed comments are meant to be understood by IE only. Other browsers see them as normal comments. BTW this is a valid downlevel-revealed conditional comment

<!--[if !IE]>-->hello<!--<![endif]-->

koyama
12-22-2007, 01:28 AM
Its not something that should be corrected. Firefox is just trying to make them normal html comments. It doesn't care what is in between the <! and > parts.
It looks like you are right. I tested, and just like you are saying Firefox is converting

<!anything>
into

<!--anything-->
when you save the web page.

Clearly, that operation performed by Firefox breaks the down-level revealed conditional comments as mentioned. Unfortunately, as a consequence, the conditional comment is seen as plain text when the saved page is viewed in Internet Explorer.

Why Firefox is converting <!anything> into <!--anything--> I don't know. One may argue that it would be a better choice if Firefox had simply removed the invalid tag/declaration from the saved paged. This would give less problems in IE it seems.


BTW this is a valid downlevel-revealed conditional comment

<!--[if !IE]>-->hello<!--<![endif]-->
Taking into account comment 21 on this page (http://www.456bereastreet.com/archive/200511/valid_downlevelrevealed_conditional_comments/) I think I would in general still stick with those extra two characters <!

<!--[if !IE]><!-->hello<!--<![endif]-->
Even Microsoft seems to acknowledge this syntax. In “About Conditional Comments” (http://msdn2.microsoft.com/en-us/library/ms537512.aspx) look at the section “Fixing Validation Errors”. This has been added recently I'm quite sure.

Thanks again for your helpful reply.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum