Question

I have a website that allows a user to save text content and then display it as is.
The user can use HTML tags to create his data the way he wants – design, fonts, divs, tables and so on…

To display the data been saved I direct the user to a page with a header/footer of my own and he’s data in the middle. The problem happens when the user has some invalid HTML tags or un-closed ones, then it interfere with my own header/footer HTML and the whole page gets messed up.

Is there a way to encapsulate the user’s data so it would not harm the page?

Answer 1

The Iframe suggestion are good but was not enough. Because i wanted it to show like it was a part of the page and I didn’t know what is the length and size of the user data, the solution i’ve used is like that:

Created a page that shows the user data alone. Opened it in an iframe which was located between my main page header and footer.
Now for the trick – for when the user has a lot of data, to avoid scroll bars in the middle of the page i have used this script on the iframe onload event:

  function setHeight()
  {
  //get page height
  var the_height=
  document.getElementById('userFrame').contentWindow.document.body.scrollHeight;

  //set iframe height
  document.getElementById('userFrame').height=the_height;
  }

This way, when the page loads, the iframe height will change according to it’s size, pushing the footer to the bottom.
After that just needed to set the iframe border to “none” and the page looks normal.