Tinymce result and browser result was different for same html code

Question

I faced an issue with tinymce iframe. My testing engineer used same piece of html code in tinymce and browser. In browser it display correctly but tinymce it display in different format.

Html

<table>
<tr>
<td><font size=1 face=""Verdana""><b>Hello</b><br>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text  </font>
<tr>
<td><font size=1 face=""Verdana"">
Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
</font>
<tr>
<td>
<tr>
<td><font size=1 face=""Verdana"">Neque porro quisquam est qui dolorem ipsum quia dolor     sit amet, consectetur, adipisci velit...</font>
<tr>
<td>
<table>

Please view this link you can understand browser display result as row via but tinymce display column via.

http://fiddle.tinymce.com/jPdaab/1

I know that, this html have wrong structure. But my question is, why it given two different result. I want same result of how browser renders.

Answer 1

This is being caused by default css that TinyMCE is applying to your elements within the editor itself.

You can supply your own css file though as a configuration option when you initialise the editor using the content_css option: http://www.tinymce.com/wiki.php/Configuration:content_css

I don't know the default css styling that TinyMCE is using within your editor. But if you create your own content_css file you should be able to use that to set css that would match the defaults you would normally see in a browser.