Darstellungsfehler CSS bzw. HTML im Internet Explorer

Blauer Kuckuck · 20.10.2006, 20:35

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, 21: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, 22: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, 11:46

Ich bin halt ned so gut im Programmieren...

Was soll ich denn verändern?

jak · 21.10.2006, 11: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, 12: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, 13: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, 18: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, 18: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, 19: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.

20.10.2006, 20:35	#1
Blauer Kuckuck Veteran Registriert seit: 21.02.2006 Beiträge: 321	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

21.10.2006, 11:48	#5
jak Inventar Registriert seit: 13.06.2001 Beiträge: 1.830	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 ____________________________________ Join the DNRC \| Godwin\'s Law (thx@stona) Documentation is like sex: If it\'s good, it\'s very, very good. If it\'s bad, it\'s better than nothing. \"In theory, theory and practice are the same. In practice, they are not\" (Lawrence Berra)

21.10.2006, 13:41	#7
Sesa_Mina Schwarzfußfrettchen Registriert seit: 28.01.2001 Beiträge: 2.071	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. ____________________________________ Wann die kan Almdudler ham... \"Es gibt nur einen Weg zur Lunge, und der muss geteert werden, damit der Krebs nicht stolpert!\" http://www.dream.at/gizmo/bunny.gif Image is © 2001 Merle Sterndalsäg.. ähh... jäger

21.10.2006, 19:37	#10
Sesa_Mina Schwarzfußfrettchen Registriert seit: 28.01.2001 Beiträge: 2.071	@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. ____________________________________ Wann die kan Almdudler ham... \"Es gibt nur einen Weg zur Lunge, und der muss geteert werden, damit der Krebs nicht stolpert!\" http://www.dream.at/gizmo/bunny.gif Image is © 2001 Merle Sterndalsäg.. ähh... jäger

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

20.10.2006, 21:46	#2
xpla Elite Registriert seit: 19.12.2003 Beiträge: 1.210	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 ...

20.10.2006, 22:29	#3
xpla Elite Registriert seit: 19.12.2003 Beiträge: 1.210	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 ...

21.10.2006, 11:46	#4
Blauer Kuckuck Veteran Registriert seit: 21.02.2006 Beiträge: 321	Ich bin halt ned so gut im Programmieren... Was soll ich denn verändern?

21.10.2006, 12:05	#6
Blauer Kuckuck Veteran Registriert seit: 21.02.2006 Beiträge: 321	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...

21.10.2006, 18:48	#8
xpla Elite Registriert seit: 19.12.2003 Beiträge: 1.210	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 ...

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)