Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 1 of 1
  1. #1
    New to the CF scene
    Join Date
    Jul 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    ie js div height

    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

    Code:
    <!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>
    Last edited by Kor; 07-29-2008 at 11:38 AM. Reason: wrap the code [code][/code]


 

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •