✔ Problem mit CSS-Layout

Status
Nicht offen für weitere Antworten.
M

Meikel25

Erfahrenes Mitglied
Hallo zusammen,

ich habe ein kleies Problem mit einem CSS-Layout (siehe Grafik).
Im FF funktioniert es einwandfrei, aber im Sch... IE... *heul*

Hier mal der CSS-Code:
HTML: 
#content{
	position:static;
	width: 770px;
	height: 614px;
	margin: auto;
	margin-top: 30px;
	overflow: none;
	background: #fff url(../pics/back.jpg) no-repeat top left;
}

#content .navi{
	margin-top: 65px;
	margin-left: 320px;
	width: 150px;
	color: #e8e8e8; 
	font-size: 10px; 
	font-family: Verdana, Helvetica, Arial, sans-serif; 
	line-height: 28px; 
	text-decoration: none; 
	}


#content .flash{
	position:static;
	margin-left: 543px;
	width: 203px;
	height: 547px;
	}

#content .footer{
	width: 245px;
	height: 15px;
	margin-left: 524px;
	margin-top: 65px;
	overflow: none;
}

Also der Container soll im zentriert im Browser ausgerichtet werden und alle anderen <div> ebend an diesem ausgerichtet.

Kann mir da einer weiterhelfen.
Ich bin schon am verzweifeln...

Gruß und Danke schon mal.

Meikel25
 

Anhänge

  • Unbenannt-1.jpg
    Unbenannt-1.jpg
    13,8 KB · Aufrufe: 23
Hi,

ich kann da mit dem gezeigten CSS-Schnipsel keine Unterschiede zwischen Firefox und IE feststellen.

Außerdem gibt es keinen Wert "none" für die overflow-Eigenschaft, sondern:

  • visible
  • hidden
  • scroll
  • auto
  • inherit
 
Der IE zerstört da schon was.
Er positioniert die <div>'s innerhalb des Containers nicht so wie im FF.

Hier mal mein HTML-Code dazu:

HTML: 
<div id="content">
    	<div class="navi">
			<ul>
				<li><a href="#"><strong>//</strong>&nbsp;&nbsp;unternehmen</a></li>
				<li><a href="#"><strong>//</strong>&nbsp;&nbsp;leistungen</a></li>
				<li><a href="#"><strong>//</strong>&nbsp;&nbsp;projekte</a></li>
				<li><a href="index.html"><strong>//</strong>&nbsp;&nbsp;startseite</a></li>
			</ul>
		</div>
        <div class="text"></div>
      <div class="button">
   		<ul>
				<li><a href="impressum.html" class="aktuell">1</a></li>
				<li><a href="impressum2.html"><strong>&nbsp;&nbsp;/</strong>&nbsp;&nbsp;2</a></li>
			</ul>
      </div>
	  <div class="flash">&nbsp;
        </div>
    <div class="footer">
			<ul>
				<li><a href="#">kontakt</a></li>
				<li><a href="#" class="aktuell"><strong>//</strong>&nbsp;&nbsp;impressum</a></li>
				<li><a href="#"><strong>//</strong>&nbsp;&nbsp;disclaimer</a></li>
			</ul>
	</div>
</div>

Er zerhackt es einfach. :confused:
 
Ich häng dir mal zwei Schnappschüsse an, und dann sagst du mir bitte, wo der IE da etwas anders positioniert bzw. "zerhackt"?

Bild 1 = FF 2.0.0.6 / Bild 2 = IE6

ff.jpg ie.jpg
 
// EDIT

So ich habe mal den ganzen Kram entfernt und nur das Objekt der Begierde reingearbeitet.

Hier mal der Quellcode:

HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style>
body {
	background-color:#000000
}
#content_home{
	position:static;
	width: 808px;
	height: 597px;
	margin: auto;
	margin-top: 30px;
	overflow: none;
	background: #000;
}

#content_home .navi{
	position:absolute;
	margin-top: 65px;
	width: 150px;
	height: 200px;
	background-color:#00FF66;

	}

#content_home .footer{
	width: 245px;
	height: 15px;
	margin-left: 560px;
	margin-top: 65px;
	overflow: none;
	background-color:#00FF66;
}

#content_home .text{
	width: 355px;
	height: 390px;
	margin-left: 210px;
	margin-top: 190px;
	background-color:#00FF66;
}



#content_home .button{
	background-color:#FF9900;
	margin-left: 500px;
	margin-top: 185px;
	width: 40px;
}


#content_home .flash{
	margin-left: 581px;
	margin-top: 5px;
	width: 203px;
	height: 547px;
	background-color:#FF00FF;
	}
</style>
</head>

<body>
	<div id="content_home">
    	<div class="navi">&nbsp;</div>
        <div class="text">&nbsp;</div>
      <div class="button">&nbsp;</div>
	  <div class="flash">&nbsp;</div>
<div class="footer"></div>
</div>
</body>
</html>

Es scheint irgend eine Instanzen-Sachen zu sein, aber ich sehe den Wald vor lauter Bäumen nicht mehr. Kann mir da keiner bei helfen? :confused:

Gruß
 
Zuletzt bearbeitet:
Na klar. :)

Ich habe mich einfach noch mal hingesetzt und geguckt, wo der Hase langläuft.
Und siehe da, nach einer halben Flasche Rotwein viel es mir wie Schuppen aus den Augen.

Hier der Quelltext.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style>
body {
	background-color:#000;
	margin:0;
}
#content_home{
	position: relative;
	width: 808px;
	height: 597px;
	margin: auto;
	margin-top: 30px;
	overflow: none;
	background: #000 url(pics/back_home.png) no-repeat top left;
}

#content_home .navi{
	position: absolute;
	margin-top: 65px;
	width: 150px;
	height: 200px;
	background-color:#00FF66;
	}

#content_home .text{
	position:absolute;
	width: 355px;
	height: 390px;
	left: 210px;
	top: 190px;
	background-color:#00FF66;
}

#content_home .button{
	position:absolute;
	background-color:#FF9900;
	left: 310px;
	width: 40px;
}

#content_home .flash{
	position:absolute;
	left: 581px;
	top: 5px;
	width: 203px;
	height: 547px;
	background-color:#FF00FF;
	}
#content_home .footer{
	position:absolute;
	width: 245px;
	height: 15px;
	left: 560px;
	top: 620px;
	overflow: none;
	background-color:#00FF66;
}
.clearer {clear: both;}
</style>
</head>

<body>
	<div id="content_home">
    	<div class="navi">&nbsp;</div>
        <div class="text">&nbsp;
			<div class="button">&nbsp;</div>
		</div>
		<div class="flash">&nbsp;</div>
		<div class="footer">&nbsp;</div>
</div>
</body>
</html>

Ich habe alle innerhalb verschachtelter div's absolute positioniert und den Container eben relative. Fertig war der Braten.

Der berühmte Wald vor Bäumen, eben.

Gruß und Danke trotzdem.
 
Bleibt von meiner Seite nur anzumerken, dass es den Wert "none" für die overflow-Eigenschaft weiterhin nicht gibt - siehe Post #2.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück