Opened 10 years ago

Closed 9 years ago

Last modified 9 years ago

#515 closed Bug (fixed)

Tables are rendered in quirks mode

Reported by: alfonsoml Owned by:
Priority: Normal Milestone: FCKeditor 2.5 Beta
Component: General Version: FCKeditor 2.4.2
Keywords: Confirmed Cc:

Description

This is a strange behavior:

Set in the config file a doctype to trigger standards mode like

FCKConfig.DocType = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">' ;

now go to edit and in the source mode insert this test code

<div style="width:300px; border:20px solid black; padding:30px">If this is rendered in standars mode it will have the same width as the red bar</div>
<div style="width:300px; background-color:blue;">&nbsp;</div>
<div style="width:400px; background-color:red;">&nbsp;</div>

<div style="font-size:10px; font-family:Verdana">
	Text outside the table
	<table border="1">
		<tr>
			<td>Text in the table</td>
		</tr>
	</table>
	If this is rendered in standards mode the text size inside the table will be the same as this one.
</div>

Expected results: the content is rendered using the standards mode.

Actual results:
Firefox: divs OK, but the font in the table isn't inherited.
IE6: divs OK (so it's using the correct box model), but again the fonts are wrong inside the table.
Opera 9.2: the same behavior, divs OK, table wrong.

That doesn't make sense, if the page is rendered in standards mode then the styles should be inherited in the table (and checking the compatMode in Firefox show that it's set right)

Now use full page mode (example 7), the full page content now is:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
		<title>Quirks test</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<body>

<div style="width:300px; border:20px solid black; padding:30px">If this is rendered in standars mode it will have the same width as the red bar</div>
<div style="width:300px; background-color:blue;">&nbsp;</div>
<div style="width:400px; background-color:red;">&nbsp;</div>

<div style="font-size:10px; font-family:Verdana">
	Text outside the table
	<table border="1">
		<tr>
			<td>Text in the table</td>
		</tr>
	</table>
	If this is rendered in standards mode the text size inside the table will be the same as this one.
</div>


</body>
</html>

And now the results are:
Firefox: no change, divs OK, tables wrong
IE6: wops!, divs OK AND tables OK. everything works.
Opera: as IE, now both divs and tables OK, everything works

What's more, trying to get a testcase to find if this is a problem with designMode itself shows it correctly in Firefox also

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
<html>
	<head>
		<title></title>
		<style>

		</style>
		<script language="javascript">
			function editDocument()
			{
				var html = document.body.innerHTML;
				document.designMode='on'; 
				document.body.innerHTML = html;
			}
		</script>
	</head>
	<body>
	<input type="button" onclick="editDocument(); return false;" value="Enable designMode">

<div style="width:300px; border:20px solid black; padding:30px">If this is rendered in standars mode it will have the same width as the red bar</div>
<div style="width:300px; background-color:blue;">&nbsp;</div>
<div style="width:400px; background-color:red;">&nbsp;</div>

<div style="font-size:10px; font-family:Verdana">
	Text outside the table
	<table border="1">
		<tr>
			<td>Text in the table</td>
		</tr>
	</table>
	If this is rendered in standards mode the text size inside the table will be the same as this one.
</div>

	</body>
</html>

Attachments (1)

test2.html (1.4 KB) - added by alfonsoml 9 years ago.
simplified test case for firefox

Download all attachments as: .zip

Change History (6)

comment:1 Changed 10 years ago by fredck

  • Keywords Confirmed added
  • Milestone set to FCKeditor 2.5
  • Version set to FCKeditor 2.4.2

Well... it sounds really weird. Mainly the IE and Opera different behaviors if FullPage.

Let's make a deeper investigation spot the problem. I have the impression that FF uses the mode running in the parent window, or the window that creates the editable IFRAME, ignoring the DOCTYPE.

comment:2 Changed 9 years ago by alfonsoml

I think that the only bug is really in Firefox, the behavior of IE and Opera might be due to the style set in the default StyleSheet for body and td, so I'll forget about it for the moment (I was so annoyed with Firefox that I started seeing bugs everywhere).

The attached testcase represents a minimal testcase. Removing the

	oIFrame.src = 'javascript:void(0)' ;

Makes Firefox behaves properly.

Opera and Safari don't have any problem at all with this testcase.

Tomorrow I'll search for a filed bug in bugzilla. If I'm correct the reason of 'javascript:void(0)' is to avoid errors in IE if the server is in a https server, right?

Then we could set that line only if the browser is IE or it isn't Firefox, whatever brings us less troubles.

Changed 9 years ago by alfonsoml

simplified test case for firefox

comment:3 Changed 9 years ago by alfonsoml

Filed https://bugzilla.mozilla.org/show_bug.cgi?id=387872 and added the testcase to the browserbugs repository

comment:4 Changed 9 years ago by alfonsoml

  • Resolution set to fixed
  • Status changed from new to closed

I've commited the change as described yesterday: the iframe of the editing area now isn't set to an initial src and that fix the behavior of Firefox.

With regards to the rest of the initial report: it was due to the rule for td in fck_editorarea.css, removing it makes all browsers behave the same. I've filed #960 to change the default doctype to one that does trigger standards mode and so remove that td rule from the stylesheet.

comment:5 Changed 9 years ago by alfonsoml

ups, the commit for the changes is [442]

Note: See TracTickets for help on using tickets.
© 2003 – 2016 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy