• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Falsche Anzeige bei Internetexplorer 6 und 7

Schlachtvieh

Neues Mitglied
Hi Folks,

vor kurzem habe ich auf browsershots.org mal geprüft ob meine Homepage in allen Browsern gleich angezeigt wird. Leider zeigte sich eine mittelschwere Panne bei IE 6 und 7.
Seht selbst:
Normal (in dem Fall Mozilla Firefox 3.6)
http://api.browsershots.org/png/original/80/805deca2f7dc99200ffa4d543700981d.png
IE 6 und 7
http://api.browsershots.org/png/original/d4/d4d33bb9fb0218daa30b36869f77ba29.png

Wie ist dieser Unterschied, der zumindest bei den Windows-Browsern nur bei IE auftritt, zu erklären und wie könnte man das lösen?

Auf jtfo-dessau.de.vu findet ihr die Seite um die es geht.

index.html
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html templateref="file:///D:/Users/Stephan/Documents/Paps/JTFO/Homepage/cleantype/vorlage.mzt" xmlns="http://www.w3.org/1999/xhtml"><head><meta content="text/html; charset=UTF-8" http-equiv="content-type" /><title>Startseite Jugend trainiert f&uuml;r Olympia, Stadt Dessau-Ro&szlig;lau</title><meta content="Jugend, trainiert, f&uuml;r, Olympia, Sport, Schulsport, Schule" name="keywords" /><meta olympia="" für="" trainiert="" jugend="" content="Seite der Stadt Dessau-Ro&szlig;lau für den Wettbewerb " name="description" /><link type="text/css" rel="stylesheet" href="default.css" /></head>
<body style="width: 1000px;"><div id="wrapper"><div style="" id="header"><?php include "header.php"; ?></div><div id="sidebar"><?php include "sidebar.php"; ?></div><div id="sidebar2"><?php include "sidebar2.php"; ?></div><div id="page"><div id="page-bgtop"><div id="content"><div class="post"><h2 style="width: 400px;" class="title"><a href="index.php"><span editable="true" id="Section">Startseite</span></a></h2>
<div style="width: 500px;" class="post"><br /><br />
<span editable="true" optional="true" id="Fließtext">
<img src="/images/fussball1.jpg" style="float:left; margin-right:20px; margin-bottom:0px" alt="Bild">
<br>
Der Bundeswettbewerb &quot;Jugend trainiert f&uuml;r Olympia&quot; ist mit deutschlandweit mit ca. 80 000
Teilnehmern der gr&ouml;&szlig;te Schul- sportwettbewerb der Welt. Er steht unter der Schirmherrschaft
des amtierenden Bundespr&auml;si- denten. 1969 wurde der Wettbe- werb auf Initiative der Zeitschrift
&quot;stern&quot; in der BRD ins Leben gerufen.  Nach dem Willen der Begr&uuml;nder soll er f&uuml;r
sportliche Talente als Sprungbrett vom Schulsport zu Training und Wettkampf in Sportverein und
Sportverband dienen.<br>
Der Bundeswettbewerb &quot;Jugend trainiert f&uuml;r Olympia&quot; wird als Mannschaftswettbewerb f&uuml;r
Schulmannschaften in verschiedenen Altersklassen in 16 Sportarten ausgetragen. &Uuml;ber die
Stufen Stadt-/Kreisfinale, Regionalfinale und Landesfinale qualifizieren sich die besten
Mannschaften f&uuml;r das Bundesfinale.<br>
<br>
Seit 1991 beteiligen sich die Schulen der Stadt Dessau-Ro&szlig;lau am Bundeswettbewerb
&quot;Jugend trainiert f&uuml;r Olympia&quot;. Im Schuljahr 2009/10 nahmen die Dessau-Ro&szlig;lauer
Gymnasien und Sekundarschulen am Wettbewerb in den Sportarten Basketball, Fu&szlig;ball, Handball,
Judo, Leichtathletik, Tennis, Tischtennis, Floorball und Volleyball teil.</span></div>
<div style="width: 500px;" editable="true" optional="true" id="Tabelle">

</div></div></div></div></div></div><div id="footer"><?php include "fuss.php"; ?></div></body></html>
 
Werbung:
dein quellcode ist viel zu unübersichtlich, sowas macht man einfach nicht!

wieso verschachtelst du soviele divs, das ist völlig unnötig, ausserdem hast du dein text nicht in einem p element.
 
Hallo, danke schonmal für die Hilfe.
Also das mit den divs ist vermutlich richtig. Muss ich wohl mal überarbeiten.
Allerdings, <p> benutze ich bei Text nicht, weil der Zeilenabstand dann viel zu groß wird.
 
Werbung:
Hallo,

durch den Quellcode kämpfe ich mich jetzt auch nicht durch.

Du solltest dich mal etwas mehr mit CSS beschäftigen. Du benutzt es zwar rudimentär

,

Aber damit kommst du nicht weit. Das würde einerseits deinen Quelltext übersichtlicher machen. Zum anderen könntest du dein jetziges Problem viel einfacher angehen. Weiterhin wärst du über solche Aussagen

Allerdings, <p> benutze ich bei Text nicht, weil der Zeilenabstand dann viel zu groß wird.

längst hinweg, die schlicht und einfach falsch sind. Jeder im Browser Text sollte (bzw. muss sogar nach den aktuellen HTML / XHTML -Standards) in Tags eingeschlossen sein. Das vermeidet spätere Probleme und dient gleichzeitig auch der Strukturierung des Quelltextes.

Der IE (zumindest die älteren Versionen) berechnet das Boxmodell anders als andere Browser. Dadurch werden einzelne Blockelemente wie DIV's breiter berechnet als mit anderen Browsern, passen dann nicht mehr neben oder zwischen sie und bleiben unter ihnen hängen wie offensichtlich in deinem Fall.

Du musst also in der Mitte seitlich etwas mehr Platz machen oder das runtergerutschte DIV schmaler machen. Das geht üblicherweise mittels CSS. Hilfreich ist dabei wiederum eine Trennung von HTML und CSS sowie ein strukurierter Quelltext.

Gruss

MrMurphy
 
Okay, das klingt nach einem Ansatz.

Ja ihr habt ja beide recht, sicher kann man das noch deutlich verbessern. Als die Seite geschrieben wurde musste es jedoch schnell gehen (Seite musste rel. schnell on gehen damit die ersten Ausschreibungen und Termine eingesehen werden konnten) und ich konnte mich nicht ausreichend in die Materie einarbeiten.

Wenn erstmal alle optisch offensichtlichen Fehler ausgemerzt sind, werde ich den Code auch anpassen!
 
ich würde dir empfehlen das du erst den code anpasst, damit werden viele fehler sicherlich schon mal behoben, so wie ich das gsehen habe hast du nähmlich garnicht so viele divs geöffnet wie du am ende schliesst(vielicht hab ich da auch was übersehen in dem gequeschte).

und zu den fehlern im ie6, da gibt es meistens nicht eine eindeutige lösung, sondern mann muss einfach ausprobieren, und das geht mit einem übersichtlichen quellcode viel besser.
 
Werbung:
Das mit der Berechnung des Boxmodells war tatsächlich der Knackpunkt. Nun wird es auch im IE einigermaßen okay angezeigt.

Nochmal was zu Murphy, ich habe recht viel Informationen in meiner CSS-Datei. Sicher hast du nur übersehen, dass ich diese in einer externen Datei habe.
 
Zurück
Oben