WCM Forum

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)

Blauer Kuckuck 20.10.2006 21:35
Darstellungsfehler CSS bzw. HTML im Internet Explorer
 
Hi,

sollte man meine Website (www.maxsi.de.vu) mit dem Internet Explorer aufrufen, gibt es einen gravierenden Designfehler.

Der ganze rechte Kasten bleibt zwar zentriert, rutscht aber unter die Navigation.

Richtig dargestellt wird die Site mit Firefox und Opera.

Kann mir einer helfen, den Codefehler zu finden?

Hier der HTML-Code:

<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta http-equiv="keywords" content="Name, Siemers, Homepage">
<title>maxsi.de.vu :: Maxi's Page</title>
</head>
<body>


<div id="page">
<div align="center">[img]pics/header.jpg[/img]</div>



<ul id="navigation">
[*]Info
[*]Gallerie
[*]Guestbook
[*]Weblog
[*]Links
[*]Impressum
[*]Login
[*]FTP-Server

[img]pics/maxsilogo2.jpg[/img]


Geben Sie hier Ihren Namen ein, um sich in der Besucherliste einzutragen!


<form action="userlist.php" method="POST">
<input name="user_input" size="22">


<input type=button value="Eintragen">
</form>
[/list] <div align="center">
<div id="Inhalt">
<h1>Mäxxchen's Page</h1>
<h2>
So, das hier ist also wieder einer meiner ungezählten Versuche, eine halbwegs gute (eigene) Homepage zustande zubringen.
Die Vorgänger bestanden größtenteils aus Chaos und Werbung, wobei auch diese hier überhaupt nicht werbefrei ist :-(

Jedenfalls im Internet Explorer - Da hilft nur eins: Schnell auf www.mozilla.org und da Firefox downloaden - der bringt es fertig, die Werbung zu bannen (Link zum Browserdownload im Infobereich)


Gut, der Trost für die Werbung ist, dass diese Seite grösstenteils chaosfrei ist ;-) und ansonsten (hoffentlich) auch inhaltlich gut gestaltet und designt.
Bei Anregungen, Chaosfunden, Beschwerden, über Lobe freue ich mich natürlich ganz besonders, kann man mir hier eine Mail schreiben.


Achja, für die, die mir Anregungen im Quellcode geben wollen, ein paar Infos:

Die Seite ist programmiert mit HTML und CSS.
Das Stylesheet unter www.maxsi.de.vu/style.css.


OK, vorwörtmäßig wars das. Viele Grüße (und linkt doch mal hierher), Maxi

P.S.: Achtung, Die Seite ist noch unter Bearbeitung. Die Gallerie und das Gästebuch funktionieren noch nicht ganz!!!
</h2>
</div>
</div>
</div>
</body>
</html>

Der CSS-Code ist hier
zu finden.

THX im Voraus,

mfg Blauer Kuckuck

xpla 20.10.2006 22:46
Das ist ja total irgendwie, total falsch, total wirr verschachtelt ?! Wieso ist da ein div align="center" drinnen?

Ich mein, ich hab jetzt leider nicht die Muse den Fehler im Detail zu suchen, aber das Template an sich gehört schon mal zurück zum start. Da stimmen die DIVs ja überhaupt nicht überein, da werden DIVs in DIVs geöffnet, klar dass es da runterrutscht etc. ... Das ist kein DIV Box Design was du da hast ...

xpla 20.10.2006 23:29
Ne also, das Template müßtest du komplett neu aufbauen, das hat echt nix mit DIV Boxen zu tun, habs jetzt genauer angeschaut, da müßte ich es auch gleich von vorne neu schreiben ...

Blauer Kuckuck 21.10.2006 12:46
Ich bin halt ned so gut im Programmieren...

Was soll ich denn verändern?

jak 21.10.2006 12:48
Es spricht nichts dagegen divs zu verschachteln. Das ist erlaubt.
Ich würde die Seite mal im w3c validator checken: http://validator.w3.org/
Auf den ersten Blick sehe ich z.B. ein <ul> das nicht abgeschlossen ist.
An sich schaut die Seite aber nicht schlecht aus.

Zu deinem Problem: Der IE < 7 berechnet die Breite der Boxen anders als Firefox, Opera,... dadurch kommt es dazu, daß Boxen im IE breiter sind als in anderen Browser n. Wenn man mit float erreichen will, das Boxen in einer Zeile sind haben sie zu wenig Platz und rutschen daher nach unten.

jak

Blauer Kuckuck 21.10.2006 13:05
Hi,

THX @ all.

@ jak,

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

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

Sesa_Mina 21.10.2006 14:41
damit IE unf FF & Co die Abstände / Rahmen bei CSS stylesheets gleich berechnen solltest du zum Bleistift folgendes:

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

in deine Seite aufnehmen.

Im Transitional Modus arbeitet der IE nämlich im QUIRKS Mode wodurch die Berechnungen anders gemacht werden.

Mit obigem sollte bei allen brausern die Berechnung korrekt erfolgen.

xpla 21.10.2006 19:48
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 ...

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

Es gibt genügend Anleitungen im Internet, wo du mal ne Einführung in Tableless Design mit CSS Div Boxen bekommst ...

xpla 21.10.2006 19:49
Zitat:
Original geschrieben von Sesa_Mina
damit IE unf FF & Co die Abstände / Rahmen bei CSS stylesheets gleich berechnen solltest du zum Bleistift folgendes:

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

in deine Seite aufnehmen.

Im Transitional Modus arbeitet der IE nämlich im QUIRKS Mode wodurch die Berechnungen anders gemacht werden.

Mit obigem sollte bei allen brausern die Berechnung korrekt erfolgen.
Du schreibst Transitional führst aber strict als Doctype an. Auserdem ist es totaler Schwachsinn, der IE wird durch Transitional nicht in den Quircks-Modus versetzt, erst wenn du nen XML Prolog voransetzt ...

Sesa_Mina 21.10.2006 20:37
@xpla:

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

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

jak 22.10.2006 00:14
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

xpla 22.10.2006 00:43
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>

xpla 22.10.2006 00:45
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 ...

jak 22.10.2006 14:09
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

xpla 22.10.2006 14:44
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 ....

jak 23.10.2006 12:25
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

Blauer Kuckuck 25.10.2006 17:42
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

xpla 25.10.2006 17:57
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


Alle Zeitangaben in WEZ +2. Es ist jetzt 14:46 Uhr.

Powered by vBulletin® Copyright ©2000 - 2025, Jelsoft Enterprises Ltd.
© 2009 FSL Verlag