✔ <div>-Tags werden im IE falsch dargestellt!

[Freak Junior]

Sehr geehrte Damen und Herren,

habe Probleme mit meiner Menüstruktur. Im FF wird alles richtig dargestellt(siehe Bild1 im Anhang), im IE 6 leider nicht(siehe Bild2 im Anhang).

Was habe ich Falsch gemacht?

Hier der HTML-Code:

<div align="center">
	<div id="contentbg">
		<div id="header">
			<div id="abstand_box1">
				<div id="contentbox">
	                <div id="profil"><a href="profil.html">><b>Profil</b><</a></div>
					<div id="projekte"><a href="projekte.html">><b>Projekte</b><</a></div>
					<div id="impressum"><a href="impressum.html">><b>Impressum</b><</a></div>
				</div>
			</div>
		</div>
	</div>

Und hier der CSS-Code:

#header
{
	background-image: url(images/banner.png);
	width: 1024px;
	background-repeat: no-repeat;}
#contentbg
{
	background-image: url(images/contentbg.gif);
	width: 1024px;
	background-repeat: repeat-y;}
#contentbox
{
	background-image: url(images/contentbox.gif);
        height: 419px; width: 703px;
	background-repeat: no-repeat;}
#abstand_box1
{
	padding-top: 370px;
	padding-left: 80px;}
/*MENU*/
#profil
{
	background-image: url(images/knopf.gif);
	height: 31px; width: 146px;
	background-repeat: no-repeat;
	position: absolute;
	margin-left: 75px;
	margin-top: 10px;
	padding-top: 7px;}
#projekte
{
	background-image: url(images/knopf.gif);
	height: 31px; width: 146px;
	background-repeat: no-repeat;
	marign-left: 300px;
	position: absolute;
	margin-left: 280px;
	margin-top: 10px;
	padding-top: 7px;}
#impressum
{
	background-image: url(images/knopf.gif);
	height: 31px; width: 146px;
	background-repeat: no-repeat;
	position: absolute;
	margin-left: 485px;
	margin-top: 10px;
	padding-top: 7px;}

 

[Maik]

Hi,

das hängt mit dem align="center"-Attribut im ersten DIV zusammen, das du zum horizontalen Zentrieren der nachfolgenden Boxen verwendest, und die der IE an alle nachfolgenden Elemente vererbt.

Entweder "hebst" du in der Box #contentbg die horizontale Zentrierung mittels text-align:left auf:

#contentbg
{
        background-image: url(images/contentbg.gif);
        width: 1024px;
        background-repeat: repeat-y;
        text-align:left;}

oder du zentrierst die Box anstelle des align-Attributs mittels margin:0 auto im Anzeigebereich des Browserfensters:

#contentbg
{
        background-image: url(images/contentbg.gif);
        width: 1024px;
        background-repeat: repeat-y;
        margin:0 auto;}

mfg Maik