WCM Forum - Darstellungsfehler CSS bzw. HTML im Internet Explorer

WCM Forum (http://www.wcm.at/forum/index.php)

- Programmierung (http://www.wcm.at/forum/forumdisplay.php?f=17)

- - Darstellungsfehler CSS bzw. HTML im Internet Explorer (http://www.wcm.at/forum/showthread.php?t=201705)

Habe ich, er arbeitet net im Quircks ... Wenn du Transitional + XML Prolog verwendest, dann schickst du ihn in den Quircks Modus ...

Zitat:

Original geschrieben von Blauer Kuckuck

Das <ul> ist doch zugemacht worden! Unter dem Input mit der Besucherliste.

Aber ich wer es mal weiter nach oben verschieben...

Schau dir mal an was für Elemente (=Tags) wo erlaubt sind - das steht einerseits in der HTML Spezifikation, aber z.B. auch auf selfhtml: http://de.selfhtml.org/html/referenz/elemente.htm#ul

Zitat:

ul [...]
Kindelemente Darf folgendes andere HTML-Element enthalten (ein- oder mehrmal):
li

d.h. in einer <ul> dürfen nur[*] Tags vorkommen.

Zitat:

Original geschrieben von xpla
Da hilft auch nichts, ein wenig mit dem W3C zu validieren, der erkennt nur Syntax-Fehler aber keine Design/Aufbaufehler.

Validieren ist immer eine gute Idee. Die wahrscheinlichkeit das validierter Code wie gewünscht angezeigt wird ist ganz einfach höher - man schaltet eine Fehlerquelle aus.

Zitat:

Original geschrieben von Sesa_Mina
Der arbeitet immer im quirks modus ausser man verwendet das strict model. Kannst gerne mit diversen DIVs nachprüfen wenn dir fad is.

Ob der IE im quirks mode ist oder nicht muß man nicht ausprobieren - das verrät er einem:

Code:

<script type="text/javascript">

alert(document.compatMode);

</script>

Quelle: http://www.css4you.de/wsdoctypeswitch/index.html

Zitat:

IE6 für Windows schaltet in den Quirks Mode, wenn kein Doctype angegeben oder auf eine HTML-Version vor 4.0 verwiesen wird. Ebenso bei HTML 4 und HTML 4.01 bei Angabe der Transitional- und Frameset-DTD, wenn kein System Identifier vorhanden ist.

Quelle: http://www.heise.de/ix/artikel/2004/03/136/
Es scheint als auch beim transitional doctype ohne quirks mode zu gehen - hab's aber nicht ausprobiert.

Zitat:

Original geschrieben von xpla
Leute, es ist ganz nett wenn ihr versucht, ihm das Blockmodell zu erklären aber das ist totaler Schwachsinn, da diese Struktur eher Tabellenähnlich aufgebaut ist und nicht wie ein Tableless Design ... Das ist leider totaler Schrott den er im Quellcode hat ...

Wie soll den ein Tableless Design aufgebaut sein? Meinem Verständnis nach geht es darum keine <table>s zu verwenden - und diese Bedingung ist ja erfüllt. Die Aufteilung der Seite (breiter balken oben, menü links Inhalt rechts) ist ziemlich Gebräuchlich. Was genau hast du an der Seite auszusetzen?

jak

Nein, es geht nicht einfach darum, keine Tabellen zu verwenden, man sollte halt sich vorher ne Grundahnung von der Materie erarbeiten und net einfach wo ne Tabelle war ein DIV reinkleschen und dann auch noch mit align="center" irgendwelche 0815 DIVs reindrücken.

Das ganze Design benötigt genau 3 DIV Boxen die sicher nicht verschachtelt sind ... Bzw. 4 wennst nen Fußbereich dabei haben willst ...

#kopf {
width:100%;
height:100px;
background-color: #009933;
}
#nav {
width:25%;
float:left;
background-color:#996600;
}
#inhalt {
width:75%;
margin-left: 25%;
background-color:#FF6600;
}
.clr {
clear:both;
}
#fußbereich {
width: 100%;
height: 150px;
background-color:#CCCCFF;
}

<div id="kopf">DAS IST DER KOPF</div>
<div id="nav">DAS IST DIE NAV</div>
<div id="inhalt">DAS IST DER INHALT</div>
<div class="clr">
<div id="fußbereich">DAS IST DER FUßBEREICH</div>

Oder Inhaltsspalte zentriert:

#inhalt {
width:20%;
margin-left:auto;
margin-right:auto;
background-color:#FF6600;
}

(Dürfte aber nicht mit dem IE gehen, da man üblicherweise das ganze Design zentriert und da gibt es einen Workaround für den IE).

So, am besten ist, du liest dich mal in die Materie ein ...

@jak
Das Javascript für den CSS Modus ist gut, verwende ich meistens, wenn ich mal grundsätzlich auf Fehlersuche bin, aber naja, was hilfts wenn man ne zusätzliche Anleitung braucht um alleine die Ausgabe zu verstehen ...

Bei dir hat sich ein kleiner Fehler eingeschlichen: Du wolltest vermutl. <div class="clr" /> schreiben.
Für das div eine eigene Klasse zu erzeugen ist auch nicht unbedingt nötig, ich finde in so einer Situation kann man ruhig inline style verwenden:
<br style="clear: both;" />
(BTW.: Ich frage mich welcher Depp es eingeführt hat das man beim clear Atttribut "all" verwendet, in CSS aber "both" - also <br clear="all" /> aber <br style="clear: both;" />).

Es stimmt schon, dein Design ist sauberer. Sooo schlecht finde ich das ursprüngliche aber auch nicht. Blauer Kuckuck ist halt am Lernen, gerade Fehler im Design macht man am Anfang einfach. Deine ersten Posts waren zwar sehr direkt aber nicht unbedingt hilfreich.

jak

Nein, du verwendest im allgemeinen schon Blockelemente zum clearen, ausser du arbeitest mit anderen Tricks ...

Ja du hast recht, das div gehört geschlossen

<div class="clr"></div>

Wo willst du mit nem "BR" clearen???!!!!

Sein Design ist leider kein Design, das ist ne anhäufung von irgendwelchen DIVs ....

Statt dem <div>.
Da das
Element ein clear Attribut hat, dieses aber deprecated ist, bin ich davon ausgegangen, daß ein clear mit css im
die vorgesehene Vorgehensweise ist. Ich bin einfach nicht auf die Idee gekommen

oder <div> dafür zu verwenden. Ich werd' vermutl. auch bei
bleiben, solange nichts dagegen spricht.

BTW.: An sich sollte man keine Sonderzeichen in ids verwenden (id="fußzeile").

jak

Hi,

ich werd mir die ganzen Tipps nochma in Ruhe durchlesen, aber erstmal ne Frage:

Was bedeutet denn

-CSS-
.clr {
clear: both
}

?

Ich blamier mich jetzt wahrscheinlich :o

Aber ich bin totaler Anfänger :look:

mfg, Blauer Kuckuck

Das ist ein "Hilfsblockelement" um den "float" zu stoppen. Was ein float ist ->> bitte nachschlagen ...

der div class="clr" verhindert, dass der Float fortgesetzt wird und es somit zu unerwünschten darstellungen kommt.

Du hast z.B. so etwas:

BILD BILD BILD BILD BILD BILD HIER STEHT TEXT
DIESES BILD STEHT IMMER LINKS HIER STEHT TEXT

HIER STEHT TEXT HIER STEHT TEXT HIER STEHT TEXT

Das wäre ein typisches Beispiel für ein Float ...

Wenn jetzt aber der erste Text direkt neben dem Bild aufhört und ein 2ter Text, sagen wir eine Nachricht würde neben dem Bild beginnen, dann passt dies nicht so ganz ins Layout und daher muss der Float vorher "gelöscht" werden.

Guckst du hier:
http://www.ejeliot.com/blog/59