tags:

views:

26

answers:

2
+1  Q: 

Weird issues in setting style using JavaScript while using a DOCTYPE.

I am trying to add a <div> using JavaScript and then change its width/height/top/left attributes. But when I use the XHTML 1 Transitional doctype, it stops working.

This is how I am creating the <div>:

var div=document.createElement("div");
document.body.appendChild(div);
div.innerHTML='<div id="myID" style="z-index:9998;border: 1px solid #000000;
border-radius:3px;position: absolute; display: block;top:-10000;left:-10000; 
width:400; height:400;"></div>';

So initially myDiv is not visible to user as its left and top are out of the screen

Then on some click action I am doing the following:

var myDiv=document.getElementById("myID");
myDiv.style.top=200;
myDiv.style.left=200;

This works fine if I do not put a doctype in the HTML. As soon as I put the doctype, it stops working.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

With the doctype, it stops accepting top/left/width/height values. But if I set the width/height/top/left values with units (i.e. px) then it works fine.

myDiv.style.top="200px";
myDiv.style.left="200px";

So, what is the impact of the doctype on the execution of JavaScript while modifying the style (or may be other things as well)?

+3  A: 

Using raw numbers is technically invalid, even if the browser is letting you get away with it when you're not using a doctype (browsers do lots of funky things when you don't use a doctype).

The style properties really are like the CSS properties, strings with units on them. So "200px" is correct, 200 is incorrect. The properties (left, for instance) can be lengths like "200px" or "10em", or percentages (or auto or inherit). (Those links are to the CSS 2.1 spec.)

You also need to include units in your string when creating the myID div:

div.innerHTML = '<div id="myID" style="z-index:9998; ' +
    'border: 1px solid #000000; ' +
    'border-radius:3px;' +
    'position: absolute;' +
    'display: block;' +
    'top:-10000px;' +     // here
    'left:-10000px;' +    // here
    'width:400px;' +      // here
    'height:400px;"' +    // and here
    '></div>';
T.J. Crowder  2010-10-27 09:09:51
+1  A: 

Using the DOCTYPE tells the browser that you are using a specific standard (in your case, XHTML 1.0) - the browser then uses an exact render mode (instead of the quirks mode that it would use without a DOCTYPE).

This means that it will interpret your code much more strictly - the sizes should always have a unit with them (200px, 1.2em etc...). Just a number is meaningless, so the browser will ignore these values when not in quirks mode.

Oded  2010-10-27 09:12:34

related questions

Autosizing Textarea
Regular expression for parsing links from a webpage?
What are good tools for creating compiled HTML help files (.chm)?
Looking for WYSIWYG HTML editor
Any reason not to start using the HTML 5 doctype?
HTML comments break down
HTML Comments Markup
Setting a div's height in HTML with CSS
Wrapping lists into columns
Is a "Confirm Email" input good practice when user changes email address?
<XMP> Tag
HTML version choice
Options for HTML scraping?
How do you disable browser Autocomplete on web form field / input tag?
How do I make a checkbox toggle from clicking on the text label as well?
Html CSS Editor
Wordpress theme development offline tools
How do I give my web sites an icon for iPhone?
In HTML, how to word-break on a dash?
Detecting font in JavaScript
How do you test layout design across multiple browsers/OSs?
How do I print an HTML document from a web service?
Multiple submit buttons on a HTML form
How can I determine a web user's time zone?
Why doesn't the percentage width child in absolutely positioned parent work in IE7?