My site layout

[eyegraphix]

I recently got off my ass and "relaid" my website using style sheets and XHTML transitional pages. I validated both my css and my xhtml but then I opened up IE7 and the page looks horrible, however great in Firefox 2.0. Here's the link: www.eyegraphix.net . The sidebar and shoutbox do not show up at all which are in the #left div but no matter what I do I cannot even get this stuff to show up. Any help or suggestions? Much appreciation.

[code]#left {
position:absolute;
left:0;
top:286px;
bottom:50px;
width:212px;
overflow:auto;
background-repeat:repeat-y;
background-color: #000000;
background-image: url(images/sideback.gif);
height: 100%;
}[/code]


And finally the entire css code
[code]/* CSS Document */

<style type="text/css">
html {
height:100%;
max-height:100%;
padding:0;
margin:0;
border:0;
background:#FFFFFF;
font-size:76%;
font-family:Arial, Helvetica, sans-serif;
/* hide overflow:hidden from IE5/Mac */
overflow: hidden;
color: #FFFFFF;/* */

}
hr {
border: thin dotted #CCCCCC;
}
body {
height:100%;
max-height:100%;
overflow:hidden;
padding:0;
margin:0;
border:0;
background-color: #333;

}
h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 24px;
color: #FFFF00;
}

#content {
overflow:auto;
position:absolute;
z-index:3;
top:286px;
bottom:50px;
left:230px;
right:0px;
background-color: #333333;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFFFF;
padding-right: 250px;
}

* html #content {
top:0;
left:0;
right:0;
bottom:0;
height:100%;
max-height:100%;
width:100%;
overflow:auto;
position:absolute;
z-index:3;
border-top:100px solid #fff;
border-bottom:50px solid #fff;
border-left:200px solid #fff;
background-color: #333333;
}


#head {
position:absolute;
margin:0;
top:0;
left:0;
display:block;
width:100%;
height:286px;
background-position:0 0;
background-repeat:repeat-x;
font-size:4em;
z-index:5;
overflow:hidden;
color:#fff;
background-color: #000000;
background-image: url(images/backtop.gif);
}
#foot {
position:absolute;
margin:0;
bottom:0;
left:0;
display:block;
width:100%;
height:20px;
font-size:12px;
z-index:5;
overflow:hidden;
background:rgb(76,76,76);
color:#FFFFFF;
border-top-width: thin;
border-top-style: dashed;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
border-top-color: #000000;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}

#left {
position:absolute;
left:0;
top:286px;
bottom:50px;
width:212px;
overflow:auto;
background-repeat:repeat-y;
background-color: #000000;
background-image: url(images/sideback.gif);
height: 100%;
}

* html #left {height:100%; top:0; bottom:0; border-top:100px solid #fff; border-bottom:50px solid #fff; color:#fff;}

#content p {padding:10px;}
.bold {font-size:1.2em; font-weight:bold;}

dd {display:none;}


#nav {
display: block;
float: none;
height: 0px;
margin: 0;
padding: 0;

}

#nav ul, #nav li {
list-style-type: none;
padding: 3px;
float: none;

}

#nav a, #nav a:link {
background: #333333;
border-left: 5px solid #C6C600;
color: #FFFFFF;
display: block;
font: bold 10px/22px verdana, arial, sans-serif;
text-decoration: none;
border-top: 1px dotted #C6C600;
border-right: 1px dotted #C6C600;
border-bottom: 1px dotted #C6C600;
position: static;
width: 85%;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 15px;
padding-top: 2px;
padding-right: 3px;
padding-bottom: 2px;
padding-left: 3px;
}

#nav a:hover {
background: #FFFF00;
color: #000000;
border-top: 1px dotted #C6C600;
border-right: 1px dotted #C6C600;
border-bottom: 1px dotted #C6C600;
text-indent: 10px;
}

#nav a.active, #nav a:link.active, #nav a:hover.active {
background: #fff;
border: 1px solid #520;
border-left: 1px solid #520;
color: #000;

}
#shout {
position: absolute;
top: 266px;
left: 25px;
}
a:link {
color: #FFFF00;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
}
a:visited {
color:#FFFF00;
font-size: 20px;
}
a:hover {color:#FFFF99;}
body {
margin:0px;
font-size:100%;
text-align:left;
}
.xsnazzy h1, .zsnazzy h1 {margin:0; font-size:1.2em; padding:0 10px 5px 10px; border-bottom:1px solid #444;}
.xsnazzy p, .zsnazzy p { margin:0; padding:5px 10px; font-size:10px;}
.xsnazzy {
background: transparent;
width:240px;
float:right;
position: absolute;
margin: 0px;
}

.xtop, .xbottom {display:block; background:transparent; font-size:1px;}
.xb1, .xb2, .xb3, .xb4 {display:block; overflow:hidden;}
.xb1, .xb2, .xb3 {height:1px;}
.xb2, .xb3, .xb4 {background:#fff; border-left:1px solid #444; border-right:1px solid #444;}
.xb1 {margin:0 5px; background:#444;}
.xb2 {margin:0 3px; border-width:0 2px;}
.xb3 {margin:0 2px;}
.xb4 {height:2px; margin:0 1px;}

.xboxcontent {display:block; border:0 solid #444; border-width:0 1px; height:auto;}
* html .xboxcontent {height:1px;}

.color_a {background:#c9ba65; color:#fff;}
.color_b {background:#d4d8bd; color:#000;}
.color_c {background:#758279; color:#fff;}
.color_d {background:#b2ab9b; color:#000;}

#sbox
{
border-width: 0 0 0 0;
border-color: #FFFF00;
border-style: dotted;
width: 170px;
}


.textbox
{
border-width: 0;
font-size: 9px;
color: #D5D500;
font-style: normal;
font-family: Tahoma, Arial;
text-decoration: none;
background-color: #333333;
}
</style>
[/code]

[eyegraphix]

Fixed the problem myself, just a small bug....please mark as solved.