Ticket #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;"> </div> <div style="width:400px; background-color:red;"> </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;"> </div>
<div style="width:400px; background-color:red;"> </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;"> </div>
<div style="width:400px; background-color:red;"> </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>
