tags:

views:

228

answers:

3
Q: 

displaying a javascript-generated div in IE7

The following code shows what I expect in Firefox and Chrome: a small white square in a big green rectangle. I don't see the small square in IE7. How can I make it appear?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
<!--
function start()
{
    var g_Div = document.getElementById("bigdiv");
    var littleDiv = document.createElement('div');
    littleDiv.setAttribute('style', 
     'position:absolute;'+
     'left:300px;'+
     'top:300px;'+
     'width:5px;'+
     'height:5px;'+
     'clip:rect(0pt,5px,5px,0pt);'+
     'background-color: rgb(255, 255, 255);');
    g_Div.appendChild(littleDiv);
}
//-->
</script>
</head>
<body>
<div 
    id="bigdiv" 
    style="border: 1px solid ; margin: auto; height: 600px; width: 800px; background-color: green;" 
    > 
</div>
<script type="text/javascript">
<!--
start();
//-->
</script>
</body>
</html>
+4  A: 

This should do what you want, and should work across the major browsers:

function start()
{
    var g_Div = document.getElementById("bigdiv");
    var littleDiv = document.createElement('div');
    littleDiv.style.background = 'rgb(255, 255, 255)';
    littleDiv.style.width = '5px';
    littleDiv.style.height = '5px';
    littleDiv.style.left = '300px';
    littleDiv.style.top = '300px';
    littleDiv.style.position = 'absolute';
    g_Div.appendChild(littleDiv);
}
Tom  2009-02-08 14:43:17
Works great!!(except the black border that I don't want, but easy to remove)
Fabien  2009-02-08 14:52:26
Ha, oops. I left that in there when testing this. Removing it from this answer.
Tom  2009-02-08 15:22:33
+2  A: 

Use this approach to changing the style on the element:-

littleDiv.style.cssText = 'position:absolute;'+
    'left:300px;'+
    'top:300px;'+
    'width:5px;'+
    'height:5px;'+
    'clip:rect(0pt,5px,5px,0pt);'+
    'background-color: rgb(255, 255, 255)';
AnthonyWJones  2009-02-08 14:48:31
+1  A: 

setAttribute is pretty useless in ie especially for the style attribute.
You may have to use a class or element.style."propertyName"

quirksmode compatibility chart

meouw  2009-02-08 14:50:22

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?