View Full Version : js ie div height question

07-28-2008, 05:21 PM
Hi everyone,

I'm having problems setting the height of a div correctly using js.
The page is appended below.
There are two parts in the page.
The top part is in HTML and is what I really want.
The bottom part is what I want to achieve but using js but it does not work.

In both parts, the goal is to put three divs together.
The outmost div is just to hold everything (it's in green).
The second div is to create a border.
The innermost div is the actual 'content' div where I actually want to put some texts, background, etc.
The second div is black and the innermost div is in white.

The green divs for the top and bottom are the same.
But the other two (black border and white content) are different.
In IE, the js creates a border and content div that larger than 12px in height.
You can see visually that the js created boxes

(btw the js does work in FF).

Thanks in advance.

- jon

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">



<div style="width:500px; height:22px; background-color:#00ff00"> <!-- container -->
<div style="padding:1px 1px 1px 1px; background-color:black; width:200px; height:12px"> <!-- border -->
<div style="width:200px; height:12px; background-color:white"><!-- content -->
</div> <!-- end content -->
</div> <!-- end border -->
</div> <!-- end container -->


<div id="container" style="width:500px; height:22px; background-color:#00ff00"> <!-- container -->


function init(){
var container = document.getElementById('container');

var border = document.createElement("div");
border.style.paddingTop = "1px";
border.style.paddingBottom = "1px";
border.style.paddingLeft = "1px";
border.style.paddingRight = "1px";
border.style.backgroundColor = "black"
border.style.width = '200px';
border.style.height = '12px';
border.innerHTML = '<!-- border -->';

var content = document.createElement("div");
content.id = 'content';
content.style.backgroundColor = "white"
content.style.width = '200px';
content.style.height = '12px';
content.innerHTML = '<!-- content -->';




07-28-2008, 05:37 PM
Use a valid URL DOCTYPE to force IE into 'almost standards' mode. Replace this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

With either (basically what you had, only with the URL):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

or with (preferred for most new work, but excludes some deprecated elements):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

07-31-2008, 10:27 PM
Hi John,

I got my js to work properly on IE and FF using strict.dtd.


- jon