getting this page to work in IE using CSS

Hi

I have the code below but i cant get it to work in IE, it works perfectly in mozilla but when in ie it messes up, i tried to re create it a different way but i keep having problems aligning the footer,

if anyone can help or can edit it so it just works in IE and not mozilla it would be a great help as i can then do a browser check and load the apropriate stlye sheet.

cheers

CSS
body { /*sets properties for the body of the document*/
background-color:#ffffff;
margin:0px 0px 0px 0px;
}
#container { /*sets the properties for the container that all the elements are placed in.*/
margin-top: 50px; /*distance from top of browser window*/
margin-left: 50px; /*discance from left of browser window*/
margin-right: 50px; /*distance from right of browser window*/
margin-bottom: 50px; /*distance from bottom of browser window*/
padding: 0px; /*padding for the edges of the container*/
background-color: #66ccff; /*sets the background colour to blue*/
width: 80%; /*sets the width of the container*/
min-width: 241px; /*sets the minimum width of the container*/
}

#footer { /*sets the properties of the footer container*/
padding: 0px; /*sets the padding*/
position: relative; /*sets the position so it is relative to the container its in*/
background-color: #FFFFFF; /*sets background colour to white*/
width: 100%; /*sets width to 100% of the container*/
clear:both; /*clears around the container....vital dont remove it.*/
}

#content { /*sets the properties for the content*/
margin-left: 180px; /*margin from the left of the container...leaves space for leftnav*/
height: *%; /* sets height of content to fill all availble space*/
background-color: #66ccff; /* sets background colour to blue*/
align: right; /*aligns content frame to right of the container*/
min-height: 250px; /*sets the minimum height for the window...same as bg image for left nav*/
padding-left: 5px; /*sets the content padding to 5px so there is some space between txt and edge of frame*/
/*overflow:hidden; can also be set to visible this causes some silly problems*/
border-left: 2px solid; /* sets the left border.. needed so when the content stretches the border stretches with it*/
border-color: #663300; /*sets border colour to brown*/
}

#leftnav { /*sets properties for the left nav bar*/

float:left; /* floats the navigation panel on the left of container*/
background-color : #66ccff; /* sets bg colour to blue*/
width: 180px; /*sets withd of the left nav*/
padding-top: 30px; /*sets padding from top of container*/
border-right: 2px solid; /*sets border so that when nav is extended border continues*/
border-color: #663300; /*sets border colour to brown*/
}


#topleftspace { /*sets properties for the top left space where the rounded corner will go*/
position: absolute; /*sets positioning for element*/
background-color: #66ccff; /*sets bg colour to blue*/
width: 180px; /*sets witdh of element*/
height: 20px; /*sets height of element*/
}

#toprightspace { /*sets propertiese for the top right space where the rounded corner goes.*/
margin-left: 180px; /*sets positioning for element*/
background-color: #66ccff; /*sets bg colour to blue*/
height: 20px; /*sets witdh of element*/
padding-left:5 px; /*sets height of element*/
}

#topleftcorner { /*sets properties for the top left corner...where the gif goes*/
text-align: left; /*aligns the rounded corner gif*/
}

#toprightcorner { /*sets properties for the top left corner...where the gif goes*/
text-align: right; /*aligns the rounded corner gif*/
}

#topleftwhite { /*sets the top white space where text could possibly go*/
position: absolute; /*sets position*/
background-color: #FFFFFF; /*sets bg colour to white*/
width: 180px; /*sets width*/
height: 30px; /*sets height*/
border-right: 2px solid; /*sets border*/
border-color: #663300;/*sets border colour to brown*/
}

#toprightwhite { /*sets the top white space where text could possibly go*/
margin-left: 180px; /*sets margin from the left of the page to cope with topleftwhite*/
background-color: #FFFFFF; /*sets bg colour to white*/
height:30px; /*sets height*/
padding-left:5px; /*sets padding*/
}

#bottomleftspace { /*sets the space where the bottom rounded corner goes*/
position: absolute; /*sets position*/
background-color: #66ccff; /*sets colour*/
width: 180px; /*sets width*/
height :20px; /*sets height*/
border-right: 2px solid; /*sets border*/
border-color: #663300; /*sets border colour*/
}

#bottomrightspace {/*sets space where rounded corner will go*/
margin-left: 180px; /*sets left margin to cope with left spaces*/
background-color: #66ccff; /*sets bg colour*/
height: 20px; /*sets height*/
padding-left: 5px; /*sets padding*/
}

#bottomleftcorner { /*sets properties for the bottom corner gif*/
text-align: left; /*aligns the gif*/
}

#bottomrightcorner { /*sets properties for the bottom corner gif*/
text-align: right; /*aligns the gif*/
}

#bottomleftwhite { /*sets the white space for the bottom*/
position: absolute;/*sets position*/
background-color: #FFFFFF; /*sets the bg colour*/
width: 180px; /*sets width*/
height: 30px; /*sets height*/
border-right: 2px solid; /* sets border*/
border-color: #663300; /*sets border colour*/
}

#bottomrightwhite {/*sets the white space for the bottom*/
margin-left: 180px; /*sets margin width to cope with left space*/
background-color: #FFFFFF; /*sets bg colour*/
height: 30px; /*sets height*/
padding-left: 5px; /*sets padding*/
}

#heading1 { /* sets the main heading properties*/
font-size: 22px ; /* font size*/
font-weight: bold; /* font weight*/
color: black; /* font colour*/
}

#contenttext {/*sets content text style*/
font-size: 12px; /*font size*/
color: #663300; /*font colour*/
}

HTML

<div id="container">
<div id="topleftwhite"></div>
<div id="toprightwhite"></div>

<div id="topleftspace">
<div id="topleftcorner"><img src="images/t-left-corner.gif" width="20" height="20"</div>
</div>


<div id="leftnav"><img src="images/home-menu.gif" width="179" height="251"> </div>

<div id="toprightspace"><div id="toprightcorner"><img src="images/t-right-corner.gif" width="20" height="20"</div></div>
<div id="content"><div id="heading1">Heading 1</div><div id="contenttext"> This is where the content would go This is where the content would go This is where the content would go
This is where the content would go This is where the content would go This is where the content would go
This is where the content would go This is where the content would go This is where the content would go
This is where the content would go This is where the content would go This is where the content would go </div></div>

<div id="footer">
<div id="bottomleftspace">
<div id="bottomleftcorner"><img src="images/b-left-corner.gif" width="20" height="20"</div>
</div>
<div id="bottomrightspace">
<div id="bottomrightcorner"><img src="images/b-right-corner.gif" width="20" height="20"</div>
</div>
<div id="bottomleftwhite"></div>
<div id="bottomrightwhite"></div>
</div>

Looks to me like you have too many unnessesary divs, but with out your images, and content for the menu and footer, its very difficult to see what it should look like.
Do you have this online somewhere, or attach a zip with the images and an example of the menu and footer text, and I might be able to see what it is you want to achieve. From what I can gather so far, it looks like a fairly simple layout, and I should be able to help with that...

Hi, thanks for offering to help, i have attached the file with the images and containing some text, i cant give u the url as its on a secure server and i dont have the password to give out ;o(

the images in the zip file should be put in a folder called images.

cheers
A

Woah, that took some doing.

Its not perfect, so maybe someone else would like to have a go, esp as it falls apart in Opera. On the pluss side its perfect in Moz, and almost there in IE, only a couple of tiny gliches depending on window size...

Thanks, ill take a look now, it doesnt mattter about it not working in opera as the page is for internal people only and no one uses it.
cheers