js ie div height question
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">
<html>
<head><title></title></head>
<body>
<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 -->
<hr>
<div id="container" style="width:500px; height:22px; background-color:#00ff00"> <!-- container -->
</div>
<script>
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 -->';
container.appendChild(border);
var content = document.createElement("div");
content.id = 'content';
content.style.backgroundColor = "white"
content.style.width = '200px';
content.style.height = '12px';
content.innerHTML = '<!-- content -->';
border.appendChild(content);
}
init();
</script>
</body>
</html>
CSS Codes
Reply With Quote
Bookmarks