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 20: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 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.


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:16 Uhr.

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