Dynamically loaded DIVs CSS not visible in IE 7 but is in FireFox

Good Morning All,
I am trying to expand my use of CSS to replace Tables in my code and have run into an issue.
I am trying to Dynamically generate DIVs with javascript and add them to an existing to DIV.
Odd number divs are being with 'Left' properties and Even are being set with 'Right' properties.
The oddest thing is happening, FireFox (3) is rendering it properly but IE 7 acts like the class is not being set at all. I am use to my CSS working better in IE than FireFox
The code below includes a Div set i hard coded to verify my style sheets work at all, and they do in both IE & FireFox.
The issue is with the dynamically loaded ones in the 'dynamic' div

Please help
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
        function DynamicallyDivLoad(num) {
 
            for (var i = 0; i < num + 1; i++) {
 
                //var framediv = document.getElementsById('dynamic');
                var framediv = document.getElementById('dynamic');
                var newdiv = document.createElement('div');
                var divName = 'div' + i;
                var content = '';
                newdiv.setAttribute('id', newdiv);
 
                if (i % 2 == 0) {
                    newdiv.setAttribute('class', 'LeftPanel');
                    content = 'Left ' + i;
                }
                else {
                    newdiv.setAttribute('class', 'RightPanel');
                    content = 'Right ' + i;
                    
                }
                newdiv.innerHTML = content;
                framediv.appendChild(newdiv);
            }
        
        }
    
    </script>
    <style type="text/css">
        
     .Frame
     {
     	width:600px;
     	border: solid 1px black;
 
     }
    .TopLeft
    {
    	background-color:Aqua;
    	width:300px;
    	float:left;
    }
    .TopRight
    {
    	background-color:Fuchsia;
    	width:300px;
    	float:right;
    }
    .MiddleLeft
    {
    	background-color:Gray;
    	width:300px;
    	float:left;
    }
    .MiddleRight
    {
    	background-color:Green;
    	width:300px;
    	float:right;
    }
    .BottomLeft
    {
    	background-color:Lime;
    	width:300px;
    	float:left;
    }
    .BottomRight
    {
    	background-color:Maroon;
    	width:300px;
    	float:right;
    }
    .LeftPanel
    {
    	background-color:Lime;
    	width:300px;
    	height:75px;
    	float:left;
    	position:relative;
    }
    .RightPanel
    {
    	background-color:Green;
    	width:300px;
    	height:75px;
    	float:right;
    	position:relative;
    	margin-left:300px;
    	margin-top:-75px;
    }
    </style>
</head>
<body>
    <img src="images/spacer.gif" onload="DynamicallyDivLoad(6)" />
<div id="static" class="Frame">
<div class="TopLeft">Top Left</div>
<div class="TopRight">Top Right</div>
<div class="MiddleLeft">Middle Left</div>
<div class="MiddleRight">Middle Right</div>
<div class="BottomLeft">Bottom Left</div>
<div class="BottomRight">Bottom Right</div>
</div>
<div id="dynamic" class="Frame">
 
</div>
</body>
</html>

Open in new window

jvancojrAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

s8webCommented:
What is the URL of the page where this is implemented?
0
jvancojrAuthor Commented:
This is only in my local dev enviroment but i can post it externally
0
irf44zCommented:
For IE, you have to use className as the attribute >> newdiv.setAttribute('className', 'LeftPanel');
But, it won't work in FF.

For cross-browser compatibility, use:
   newdiv.className = 'LeftPanel';
         and
   newdiv.className = 'RightPanel';

This works on all browsers
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jvancojrAuthor Commented:
0
jvancojrAuthor Commented:
Works perfect..
Thank you very much and have a good day,
Joe
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.