title: Creating a cross-browser editable iframe
body: <p>I have been working on an HTML editor using an editable iframe that allows users to create and edit content. I have found that the HTML generated within the iframe varies depending upon the browser being used. For example, in IE and Opera, blocks of text are surrounded by <code>&lt;p&gt;</code> tags;</p>
  
  <pre><code>&lt;p&gt;Hello world!&lt;/p&gt;
  </code></pre>
  
  <p>In Firefox, blocks of texts end with <code>&lt;br&gt;</code> tags;</p>
  
  <pre><code>Hello world!&lt;br&gt;
  </code></pre>
  
  <p>And in Safari and Chrome, blocks of text are surrounded by <code>&lt;div&gt;</code> tags;</p>
  
  <pre><code>&lt;div&gt;Hello world!&lt;/div&gt;
  </code></pre>
  
  <p>This can be problematic if a user creates content in one browser and tries to edit it in another and can over time lead to inconsistencies in the HTML code.</p>
  
  <p>I have found that some HTML editors can produce the same format of HTML regardless of the browser being used. For example, in <a href="http://ckeditor.com/demo" rel="nofollow">CKEditor</a>, blocks of text are always surrounded by <code>&lt;p&gt;</code> tags, allowing the HTML to be cleanly created and edited in any browser.</p>
  
  <p><strong>Is there a way of forcing the iframe to use a specific set of HTML tags, mainly creating only <code>&lt;p&gt;</code> tags when someone creates a new paragraph or block of text regardless of browser?</strong> Can anyone offer me any tips, samples of code, or solutions to my problem? I know I could use an existing HTML editor, but it is only this particular aspect that I am interested in.</p>
  
  <p>Any help would be appreciated. Thank you.</p>