• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

falsche darstellung im internet explorer, aber firefox richtig

B

baileys

New member
Hey Leute, ich hab ein Layout realisiert, was im Firefox auch richtig angezeigt wird. Aber im Internet Explorer leider falsch. Das "menüFoot"-Div ist im IE rechts unten, obwohl es unter das "menüContent"-Div soll. Könnt ihr mir helfen, dass es auch im IE richtig angezeigt wird?? Ich hab schon viel versucht, nur leider hab ich noch zu wenig Erfahrung. Hier mein Code...

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"> 

<html> 
<head> 
	<link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body>
<div id="center" >
	<div class="head"></div>
	<div class="menuHead">menü head</div>
	<div class="mainHead">content head</div>
	<div class="menuContent">menü content</div>
	<div class="mainContent">
		main content<br>
	
	</div>
	<div class="menuFoot">menü foot</div>

	<div class="mainFoot">main foot</div>

<div style="clear: both;"></div>
	
</div>

</body>
</html>

Code: 
body{
	margin:0px; 
	padding:0px;
}

#center
{
	width: 1000px;
	background-image: url("images/layout2/menu.jpg");
    max-height: 840px;
	margin: 0px auto;
	border: 1px black solid;
} 

DIV.head
{
	width: 1000px;
	height: 200px;
	background-image: url("images/layout2/head.jpg");
		
}

DIV.menuHead
{
	width: 185px;
	height: 60px;
	background-image: url("images/layout2/menuHead.jpg");
	float: left;
}

DIV.mainHead
{
	width: 815px;
	height: 60px;
	background-image: url("images/layout2/mainHead.jpg");
	float: left;

}

DIV.menuContent
{
	width: 185px;
	background-image: url("images/layout2/menuContent.jpg");
	float: left;
	min-height: 300px;

}

DIV.mainContent
{
	width: 815px;
	background-image: url("images/layout2/mainContent.jpg");
	float: left;

}

DIV.menuFoot
{
	width: 185px;
	height: 60px;
	background-image: url("images/layout2/menuFoot.jpg");
	float: left;
	position: absolute;
	margin-top: 300px;
}

DIV.mainFoot
{
	height: 80px;
	width: 1000px;
	background-image: url("images/layout2/foot.jpg");
	float: left;
}
 
Hab mal ein bisschen probiert. Meinst Du so
PHP: 
body{
	margin:0px;
	padding:0px;
}

#center
{
	width: 1000px;
	background-image: url("images/layout2/menu.jpg");
	max-height: 840px;
	margin: 0px auto;
	border: 1px black solid;
}

div.head
{
	width: 1000px;
	height: 200px;
	background-image: url("images/layout2/head.jpg");
}

div.menuHead
{
	width: 185px;
	height: 60px;
	background-image: url("images/layout2/menuHead.jpg");
	float: left;
}

div.mainHead
{
	width: 815px;
	height: 60px;
	background-image: url("images/layout2/mainHead.jpg");
}

div.menuContent
{
	width: 185px;
	background-image: url("images/layout2/menuContent.jpg");
	float: left;
	min-height: 300px;
}

div.mainContent
{
	width: 815px;
	background-image: url("images/layout2/mainContent.jpg");
}

div.menuFoot
{
	width: 185px;
	height: 60px;
	background-image: url("images/layout2/menuFoot.jpg");
	margin-top: 300px;
}

div.mainFoot
{
	height: 80px;
	width: 1000px;
	background-image: url("images/layout2/foot.jpg");
 	margin-top: 20px;
}

Allerdings springen bei mir im IE 7 die oberen Divs. Das hängt mit der height-Angabe im Div head zusammen. Da musst Du noch was ändern.
 
Ich hab mir das im FF angesehen. Nimm mal die Bilderpfade aus Deinem Code raus, dann siehst Du, was ich meine. Mit meinem geposteten CSS sind die Div-Texte im FF und IE7 identisch positioniert.

Ohne Live-Link ist die Sache nicht ganz einfach, dkdenz hat nicht umsonst darauf hingewiesen. Ich hab jetzt mal alle Divs mit Rahmen versehen, um in etwa die Anordnung nachvollziehen zu können. Du hast ja bereits im Div 'DIV.menuFoot' position stehen. Da kannst Du dann mit den Angaben left und bottom den Div auf Linie bringen.
left, right, top, bottom: Positionieren: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Ansonsten: stell ne Beispielseite online.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben