Live! Preview and XHTML Compatibility

by vivin

I’ve added a new feature called “Live Preview”. You can see your comment as it will appear, right as you type it. I randomly just came up with the idea yesterday – I figured I could use the same code I have in place for the preview, for the Live Preview as well. I just trap the onkeyup event for the textarea. It works pretty well. Of course, there is a lag, but it’s not too bad. Oh yeah, I also removed the numbers in the comment list and replaced them with little blurbs that I made. The blurbs won’t show correctly in IE, because IE is stupid and doesn’t handle PNG transparencies well.

Then there’s XHTML compatibility. I’ve been trying really hard to get this page to validate. I was finally able to get rid of all the errors. This page validates (if you set the DOCTYPE to XHTML 1.1 explicitly, but I’ll get to that later) without any errors, as does all the CSS. However, the problem comes when I add in the DOCTYPE. The page validates perfectly, but displays completely messed up in Firefox (IE can’t handle the mime type so I didn’t even bother checking it with IE). I tracked the problem down to the Javascript. Basically, I can’t set any DOM object attribute values from Javascript. It’s as if all attributes are read-only. It’s really quite bizarre. I’ve posted the problem on a message board, so we’ll see what happens. If any of you know why I could be facing this problem, please let me know.

Here’s what the DOCTYPE (and other information) looks like:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Also, I have a sandboxed version of the website here. You can see the problem directly there.