✔ Problem mit DIV und IE

Status
Nicht offen für weitere Antworten.
mschlegel

mschlegel

Erfahrenes Mitglied
Hi

Ich bin gerade dabei ein Template für OpenCMS mittels JSPs zu bauen und komme im Moment nicht weiter. Das erste was ich gemacht habe, ist, das grobe Layout der Seite mittels DIVs und CSS zu formatieren. Es ist kein sehr komplexer Aufbau, aber dennoch habe ich gerade ein Problem mit dem Internet Explorer.

Hier mal der Aufbau
HTML: 
<div class="c_page">
   <div class="c_head" />

   <div class="c_content">
      <div class="nav" />
      <div class="content" />
      <div class="special" />
   </div>

   <div class="c_foot" />
</div>
Der prefix c steht für Kontainer.
Die Elemente innerhalb von c_content nutzen alle float: left;. Das erste Problem, welches ich aber schon lösen konnte, war dass ich für den IE und c_foot die Eigenschaft clear: left; nutzen musste (FF 3 b2 hat auch ohne diesen Eintrag alles korrekt dargestellt).

Jetzt zum eigentlichen Problem: Im IE werden sämtliche Angaben für c_content ignoriert! Es handelt sich dabei lediglich um background-color und min-height (FF wiederum macht alles richtig).

Zum Vergleich mal schnell 2 Screenshots

Firefox: 1.jpg IE7: 2.jpg

Schon mal Danke im Voraus
 
Hi,

kannst du bitte auch das dazugehörige Stylesheet posten?

Was schon mal auffällt, ist der Umstand, dass du diverse DIVs nicht ordnungsgemäß mit dem </div>-Tag schliesst, denn sie zählen nicht zu den inhaltsleeren Elementen, wie beispielsweise das img-Element.
 
Danke für die fixe Antwort.

Maik hat gesagt.:
Hi,
kannst du bitte auch das dazugehörige Stylesheet posten?
Zum Vergrößern anklicken....
CSS: 
.c_page {
	width: 1024px;
	overflow: hidden;
	border: thin;
	border-color: black;
	border-style: solid;
}

.c_head {
	height: 200px;
}

.c_content {
	overflow: hidden;
	min-height: 500px;
	background-color: silver;
}

.c_foot {
	clear:left;
	padding: 2px;
	text-align: right;
	font-size: small;
	height: 20px;
	border-top: thin;
	border-top-color: black;
	border-top-style: solid;
	color: white;
}

.navigation {
	float: left;
	overflow: hidden;
	margin: 10px;
	background-color: white;
	width: 150px;
}

.content {
	float: left;
	overflow: hidden;
	margin: 10px;
	background-color: red;
	width: 550px;
}

.special {
	float: left;
	overflow: hidden;
	margin-top: 10px;
	margin-left: 10px;
	margin-bottom: 10px;
	margin-right: 0px;
	background-color: blue;
	width: 244px;
}
Maik hat gesagt.:
Was schon mal auffällt, ist der Umstand, dass du diverse DIVs nicht ordnungsgemäß mit dem </div>-Tag schliesst, denn sie zählen nicht zu den inhaltsleeren Elementen, wie beispielsweise das img-Element.
Zum Vergrößern anklicken....
Ich hab das nur hier gemacht, um etwas mehr Übersicht zu schaffen. Im Code ist das schon alles korrekt geschlossen.
 
Bei mir werden die besagten Formatierungen für das DIV c_content vom IE7 korrekt interpretiert und ausgeführt.

Kann es sein, dass du das Dokument nicht im Standardsmode, sondern im Quirksmode übergibst? Denn in diesem Fall ignoriert der IE7 auch bei mir die min-height-Eigenschaft.
 
In was für einem Modus? Quirkwas? :-)

Davon hab ich noch nie etwas gehört. Ich nutze den IE eigentlich gar nicht, nur eben jetzt für die Kontrolle. Hab das Ding mit den Patches installiert und dann nie wieder etwas daran eingestellt.
 
Mit Hilfe der Doctype-Deklaration lassen sich die beiden genannten Darstellungsmodi bestimmen.

Siehe hierzu:

  1. Workshop Doctype-Switch: Teil 1 - Doctype-Switching
  2. Workshop Doctype-Switch: Teil 2 - Browser-Übersicht
Von daher tippe ich jetzt mal, dass du derzeit keinen Dokumenttyp für das Dokument angegeben hast, und die Seite folglich im Quirksmodus übergeben wird, was zu den Problemen im IE7 führt.

In meiner Testseite habe ich folgenden Doctype deklariert, mit dem die Seite im Standardsmode übergeben wird:

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
...
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück