Darstellungsproblem mit dem IE und DIV-Layern

[Valentin-]

Hallo zusammen,
ich habe ein kleines Problem mit dem IE und DIV-Layern.
Mein CSS-Code sieht wie folgt aus:

body {
	background-color: #fff1c4;
	scrollbar-3dlight-color:#FFFFFF;
	scrollbar-arrow-color:#FFFFFF;
	scrollbar-darkshadow-color:#000000;
	scrollbar-face-color:#8F8174;
	scrollbar-highlight-color:#FFFFFF;
	scrollbar-shadow-color:#000000;
	scrollbar-track-color:#8F8174;
	text-align:center;
}

#mainBody {
	margin: auto;
    margin-top: 0;
	padding: 0;
    width: 1000px;
	height: 750px;
	border: thin;
	border-color: #333333;
}
#menu {
	background-image: url(../images/logo.jpg);
	background-repeat: no-repeat;
	background-position: 0px 0px;
	background-color: #fff1c4;
	top: 0px;
	height: 100px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	
}
#spacerTop {
	background-image: url(../images/spacerTop.jpg);
	background-repeat:repeat-x;
	position:relative;
	top: 1px;
	height: 8px;
}
#content {
	position: relative;
	top: 1px;
	height: 450px;
	width: inherit;
}
#left {
	float:left;
	width: 600px;
	height: 450px;
	background-color:#000000;
	}
#right {
	float: right;
	width: 400px;
	height: 450px;
	background-color:#000000;
}
#spacerBottom {
	background-image: url(../images/spacerBottom.jpg);
	background-repeat:repeat-x;
	position: absolute;
	width: inherit;
	height: 8px;
}
#subMenu {
	height: 200px;
	width: inherit;
	background-image:url(../images/ornament.jpg);
	background-repeat:no-repeat;
}
#contact {
	width: 150px;
	float:right;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #5f3a31;
	text-align: right;
	padding-right: 20px;
	padding-top: 5px;
	}

Während der FF alles richtig darstellt macht der IE bei den Spacer und der positiernierung der Contentelemente nur käse.
Zu sehen hier:
http://www.american-guitar-center.com/index.php

Ich wäre dankbar, wenn ihr mir helfen könntet, bin echt am verzweifeln.

Liebe Grüße

Valle

 

[Maik]

Hi,

probier es mal mit den folgenden Änderungen und Ergänzungen im Stylesheet:

#spacerTop {
        background-image: url(../images/spacerTop.jpg);
        background-repeat:repeat-x;
        position:relative;
        top: 1px;
        height: 8px;
        overflow: hidden;
}

#spacerBottom {
        background-image: url(../images/spacerBottom.jpg);
        background-repeat:repeat-x;
        position: relative;
        width: inherit;
        height: 8px;
        overflow: hidden;
}

Ansonsten kann ich derzeit in den beiden Browsern keine Unterschiede in der Seitendarstellung entdecken.