Internet Explorer & Firefox converts inline CSS to weird stuff

I have some HTML that I insert into a div using java开发者_高级运维script. But it converts the inline CSS to something weird. Like for example if I put in the div the following HTML (using document.getElementById("element").innerHTML = ...):

<td valign=top style= border: 0; padding: 0;>

When I see what is actually in the div element(using FireBug) this is what it is:

<TD vAlign=top 0; padding:>

Is it me that is causing this error somehow? Do you find this happens to you also when you insert some HTML with inline CSS into a div using javascript? Any info would be really helpful

Attribute values must have quotes around them:

<td valign="top" style="border: 0; padding: 0;">

Also, since this HTML is embedded as a string in Javascript, be careful with the quotes. I recommend single quotes (') to start/end Javascript strings, and double quotes (") to start/end attribute values:

document.getElementById('element').innerHTML =
    '<td valign="top" style="border: 0; padding: 0;">';

have you tried quoting your attributes?

<td valign="top" style="border: 0; padding: 0;">

also, note that valign="top" is very much deprecated. use

vertical-align: top;

lastly, I would strongly urge you to avoid inline css.

Try wrapping them in quotation marks:

<td valign=top style="border: 0; padding: 0;">