Internet Explorer verschiebt alles! von EKKi, 03.09.2009 21:20

Internet Explorer verschiebt alles!

Matthias 03.09.2009 17:55

html

Hallo,

ich betreue nun seit 2 Jahren die Homepage einer kleinen Kirchengemeinde im Ruhrgebiet (www.gego-marl.de). Zum 90jährigen Jubiläum im Jahr 2010 will ich die Seite nun komplett optisch erneuern. Mein Html kenntnisse halten sich in Grenzen, aber es reicht für mich. Ich habe nun die neue Seite bei mir auf dem Rechner erstellt und im Firefor 3.5 sieht sie so aus, wie ich sie haben will. Doch der Internet Explorer stellt leider etwas anders da. Die Tabellen überlappen sich sind viel zu groß. Der eingebetete Frame wird nicht richtig angezeit, usw. Ich habe jetzt eine Woche lang alles versucht, doch nichts hat funktioniert. Auch in diversen Foren habe ich keine Hilfe gefunden. Nun wende ich mich an euch und hoffe, dass ihr mir helfen könnt.

Mir geht es erstmal nur um die Darstellung. Ich weiß, dass viele Links noch nicht ganz passen und andere Kleinigkeiten auch, aber hier geht es nur darum, dass die Seite im Internet Explorer genau so dargestellt wird, wie im firefox.

Vielen Dank für eure Hilfe schon im Voraus.

Hier der Quelltext der Seite:

<html> <head> <title>Gemeinde Gottes Marl</title>

a.menu:link { color:#000000; background-color:transparent; } a.menu:visited { color:#000000; background-color:transparent; } a.menu:hover { color:#ffffff; background-color:#263148; } a.menu:active { color:#000000; background-color:#263148; }

</style>

a.leiste:link { color:#ffffff; background-color:transparent; } a.leiste:visited { color:#ffffff; background-color:transparent; } a.leiste:hover { color:#ffffff; background-color:transparent; } a.leiste:active { color:#ffffff; background-color:transparent; } a.leiste:text { color:#7585AA; background-color:#7585AA; }

</style>

</head> <body bgcolor="#263148" text="black" link="black" alink="black" vlink="black" marginwidth="40%" leftmargin="40%" rightmargin="40%">

	<tr align="left">
		<td><img src="logo_banner.jpg" width="80%"></td>
	</tr>
</table>

</div> <div> <font size="1"<br></font> </div> <div class="menu"> <table align="left" bgcolor="#7585AA" width="20%" border="3" bordercolor="#A1A1A1" rules="none">

	<tr>

		<td><br><br></td>
	</tr>
	<tr>
		<td bgcolor="#6070AA"><a class="menu" href="start.html" target="Frame"><font size="3"><b>&nbsp;&nbsp;&raquo;&nbsp;Startseite</b></font></a></td>
	</tr>
	<tr>

		<td bgcolor="#6070AA"><a class="menu" href="frame2.html" target="Frame"><font size="3"><b>&nbsp;&nbsp;&raquo;&nbsp;Kalender</b></font></a></td>

	</tr>

	<tr>
		<td bgcolor="#6070AA"><a class="menu" href="http://www.gego-marl.de/veranstaltungen.html" target="_parent"><font size="3"><b>&nbsp;&nbsp;&raquo;&nbsp;Veranstaltungen</b></font></a></td>
	</tr>
	<tr>
		<td bgcolor="#6070AA"><a class="menu" href="http://www.gego-marl.de/gottesdienst.html" target="_parent"><font size="3"><b>&nbsp;&nbsp;&raquo;&nbsp;Gottesdienst</b></font></a></td>

	</tr>

	<tr>
		<td bgcolor="#6070AA"><a class="menu" href="http://www.gego-marl.de/ggm.html" target="_parent"><font size="3"><b>&nbsp;&nbsp;&raquo;&nbsp;Wir &uuml;ber uns</b></font></a></td>

	</tr>
	<tr>
		<td bgcolor="#6070AA"><a class="menu" href="http://www.gego-marl.de/pastorenfam.html" target="_parent"><font size="3"><b>&nbsp;&nbsp;&raquo;&nbsp;Pastorenfamilie</b></font></a></td>

	</tr>
	<tr>

		<td bgcolor="#6070AA"><a class="menu" href="http://www.gego-marl.de/gruppen.html" target="_parent"><font size="3"><b>&nbsp;&nbsp;&raquo;&nbsp;Gruppen</b></font></a></td>
	</tr>
	<tr>

		<td bgcolor="#6070AA"><a class="menu" href="http://www.gego-marl.de/fotos.html" target="_parent"><font size="3"><b>&nbsp;&nbsp;&raquo;&nbsp;Fotos</b></font></a></td>
	</tr>

	<tr>
		<td bgcolor="#6070AA"><a class="menu" href="http://www.gego-marl.de/anfahrt.html" target="_parent"><font size="3"><b>&nbsp;&nbsp;&raquo;&nbsp;Anfahrt</b></font></a></td>

	</tr>
	<tr>
		<td bgcolor="#6070AA"><a class="menu" href="http://www.fbgg.de." target="_blank"><font size="3"><b>&nbsp;&nbsp;&raquo;&nbsp;Gemeinde Gottes e.V.</b></font></a></td>

	</tr>
	<tr>

		<td bgcolor="#6070AA"><a class="menu" href="http://www.gego-marl.de/gaestebuch.html" target="_parent"><font size="3"><b>&nbsp;&nbsp;&raquo;&nbsp;G&auml;stebuch</b></font></a></td>
	</tr>

	<tr>
		<td bgcolor="#6070AA"><a class="menu" href="http://www.gego-marl.de/links.html" target="_parent"><font size="3"><b>&nbsp;&nbsp;&raquo;&nbsp;Links</b></font></a></td>
	</tr>

	<tr>

		<td colspan="2"><br><br></td>
	</tr>
	<tr align="left">
		<td align="left" colspan="2"  bgcolor="#6070AA"><font size="4"><b>Diesen Sonntag</b></font></td>

	</tr>
	<tr align="left">
		<td align="left" colspan="2">

		10:00 Uhr Gottesdienst<br>
		mit Kinderbetreuung<br>
		Predigt: Marco Fischer</td>
	</tr>

	<tr>
		<td colspan="2"><br><br></td>
	</tr>

	<tr align="left">
		<td align="left" colspan="2"  bgcolor="#6070AA"><font size="4"><b>N&auml;chsten Termine</b></font>
	</tr>
	<tr align="left">

		<td align="left"><font size="2">Di, 25.08. 19:30 Uhr Gebetsabend<br>
		Mi, 26.08. 19:30 Uhr Jung-Erwachsenen Hauskreis<br>

		Fr, 28.08. 18:00 Uhr Jugend<br>

		Son, 30.08. 10:00 Uhr Gottesdienst</font></td>
	</tr>
	<tr>

		<td><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</table>

</div> <div>

<table align="right" bgcolor="#7585AA" width="20%" border="3" bordercolor="#A1A1A1" rules="none">
	<tr align="center">
		<td colspan="3"><font size="2"><br><font size="4"><b>Herzlich Willkommen!</b></font><br></td>

	</tr>
	<tr align="center">

		<td colspan="3"><font size="2"></font><img src="marco2.jpg" width="90%"></td>
	</tr>
	<tr align="left">

		<td width="5%">&nbsp;</td>

		<td align="justify" width="85%">Hallo, mein Name ist Marco Fischer. Ich bin Pastor der Gemeinde Gottes Marl und freue mich, dass Sie online vorbeischauen. Ich lade Sie herzlich ein unseren Gottesdienst in der Kinderheimstra&szlig;e zu besuchen.<br><br></td>

		<td width="10%">&nbsp;</td>

	</tr>
	<tr align="left">
		<td align="left" colspan="3"  bgcolor="#6070AA"><font size="4"><b>Login</b></font></td>

	</tr>
	<tr align="left">
		<td colspan="3">

		
		<br><script language="JavaScript">
		<!--
		fu
		function passwort()
		{
		 location.href="http://www.gego-marl.de/Mitgliederbereich/" +
		   document.pword.pwd.value + ".html";
		}
		//-->
		</script>

		<form name="pword">

		  <b>Passwort eingeben:</b><br>

		
		  <input type="password" name="pwd" size="10" maxlength="10">

		  &nbsp;&nbsp;&nbsp
		  <input type="button" value="  Login  "
		  onClick="passwort()">

		</form><br>

		</td>
	</tr>
	<tr align="left">
		<td align="left" colspan="3"  bgcolor="#6070AA"><font size="4"><b>Unsere Adresse</b></font></td>

	</tr>
	<tr align="left">
		<td align="left" colspan="3">

		<b>Gemeinde Gottes Marl</b><br>
		Kinderheimstra&szlig;e 7,<br>
		45770 Marl<br>
		Tel: 02365 / 80 92 565<br>

		Mail: email@gego-marl.de</td>

	</tr>
	<tr>
		<td><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<table align="center" width="50%">

	<tr align="center">
		<td>
			<a class="leiste" href="http://www.gego-marl.de/kontakt.html" target="_parent"><font size="2">Kontakt | </font></a>
			<a class="leiste" href="http://www.gego-marl.de/impressum.html" target="_parent"><font size="2">Impressum | </font></a>
			<a class="leiste" href="http://www.gego-marl.de/login.html" target="_parent"><font size="2">Login | </font></a>
			<a class="leiste" href="http://www.gego-marl.de/sitemap.html" target="_parent"><font size="2">Sitemap | </font></a>

			<font size="2" color="white">&copy; 2007-2010</font>
		</td>
	</tr>
</table>

</div> <br>

</table> </div>

</body> </html>

Hier der Quelltext des Frames:

<table align="center" bgcolor="#7585AA" border="3" bordercolor="#A1A1A1" rules="none">
	<tr align="left">

		<td bgcolor="#6070AA">01.01. | 90 Jahre Gemeinde Gottes Marl</td>

	</tr>
	<tr>
		<td align="justify"><p align="center"><img src="90gego.jpg" width="80%"><br>2010 ist unser Jubil&auml;umsjahr. Die Gemeinde Gottes Marl wird 90 Jahre alt.</p><br><br></td>
	</tr>
	<tr align="left">
		<td bgcolor="#6070AA">05.08. | Neue Fotos</td>

	</tr>

	<tr>
		<td align="justify">Seit nun zwei Jahren betreiben wir diese Seite und zwei Jahre sind auch die Fotos auf dieser Seite alt. Doch das hat sich jetzt geändert. Der Rundgang und fast 80% aller Fotos wurden erneuert.<br><br></td>
	</tr>
	<tr align="left">
		<td bgcolor="#6070AA">03.08. | Seniorenkreis verschoben</td>
	</tr>
	<tr>

		<td align="justify">Der Seniorennachmittag, der an diesem Mittwoch, 05.08., stattfinden sollte, wurde um eine Woche auf den 12.08. verschoben.<br><br></td>
	</tr>
	<tr align="left">
		<td bgcolor="#6070AA">21.07. | Teenfreizeit</td>
	</tr>
	<tr>
		<td align="justify">Am Donnerstag beginnt die 10-tägige Teenfreizeit! Die Teenfreizeit findet jeden Sommer für 10 Tage in Langeleben im Elm statt. Etwa 130 Teens zwischen 13 und 17 Jahren treffen sich und erleben verrückte Spiele und coole Musik, reden über Gott und das Leben in dieser Welt, machen Workshops und Sport usw. Betet für die jungen Leute, dass sie erfüllt aus dieser Freizeit gehen.<br><br></td>

	</tr>
</table>

</body> </html>

Gruß

Matthias

Beitrag melden

– Informationen zu den Bewertungsregeln

Internet Explorer verschiebt alles!
LX 03.09.2009 18:03

html
+1 Informationen zu den Bewertungsregeln
Hallo!

Da hat mein Magen mit dem IE etwas gemeinsam: bei der Lektüre Deines Codes verschiebt sich der Inhalt!

Bitte Tabellen nur für tabellarische Daten verwenden, ansonsten suche mal nach "semantisches Markup" - und lerne daraus.

Gruß, LX

--
RFC 1925, Satz 8: Es ist komplizierter als man denkt.
Beitrag melden

+1
Informationen zu den Bewertungsregeln
Internet Explorer verschiebt alles!
Sanny 03.09.2009 18:04

html
– Informationen zu den Bewertungsregeln
Hallo Matthias,

könntest du mal einen Link schicken, wo man sich das bisherige Ergebnis ansehen kann? Das hilft ungemein beim herausfinden vom Fehler.
(der Fehler liegt in solchen Fällen meistens beim Internet Explorer, wobei die neueren IE immerhin besser geworden sind).

Liebe Grüße
Sanny
Beitrag melden

–
Informationen zu den Bewertungsregeln
Internet Explorer verschiebt alles!
suit Homepage des Autors 03.09.2009 18:14

html
+2 Informationen zu den Bewertungsregeln
aber hier geht es nur darum, dass die Seite im Internet Explorer genau so dargestellt wird, wie im firefox.

Die Fehlerkorrektur des Parsers vom Firefox arbeitet augenscheinlich anders als jene des Internet Explorers.

Ich hab mal deinen Code sauber einrücken lassen und präsentiere dir nur das Ende - sag mir, ob dir etwas auffällt (im Hinblick darauf, <http://de.selfhtml.org/html/referenz/elemente.htm@title=welche Elemente in welchen Elementen vorkommen dürfen>):

</p>
                                                        </td>
                                                      </tr>
                                                    </table>
                                                  </body>
                                                </html>
                                              </input>
                                            </input>
                                          </form>
                                        </td>
                                      </tr>
                                    </img>
                                  </td>
                                </tr>
                              </font>
                            </td>
                          </tr>
                        </table>
                      </div>
                    </td>
                  </tr>
                </table>
              </div>
            </img>
          </td>
        </tr>
      </table>
    </div>
  </body>
</html>
Beitrag melden

+2
Informationen zu den Bewertungsregeln
1. Internet Explorer verschiebt alles!
  
  Bollo 03.09.2009 23:33
  
  html
  – Informationen zu den Bewertungsregeln
  he, voll lässig!
  wie kann man das machen, den code reinrücken? wäre für mein javaproject interessant, da hab ich meherere Schlaufen!
  
  Ich hab mal deinen Code sauber einrücken lassen und präsentiere dir nur das Ende - sag mir, ob dir etwas auffällt (im Hinblick darauf, <http://de.selfhtml.org/html/referenz/elemente.htm@title=welche Elemente in welchen Elementen vorkommen dürfen>):
  
  </p>
                                                          </td>
                                                        </tr>
                                                      </table>
                                                    </body>
                                                  </html>
                                                </input>
                                              </input>
                                            </form>
                                          </td>
                                        </tr>
                                      </img>
                                    </td>
                                  </tr>
                                </font>
                              </td>
                            </tr>
                          </table>
                        </div>
                      </td>
                    </tr>
                  </table>
                </div>
              </img>
            </td>
          </tr>
        </table>
      </div>
    </body>
  </html>
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
  1. Internet Explorer verschiebt alles!
    
    suit Homepage des Autors 04.09.2009 10:06
    
    html
    
    – Informationen zu den Bewertungsregeln
    wie kann man das machen, den code reinrücken? wäre für mein javaproject interessant, da hab ich meherere Schlaufen!
    
    Ein guter Editoren oder eine IDE macht das von selbst - ansonsten gibt es Plugins die das machen.
    
    zum SGML/HTML/XML-Einrücken oder auch bereinigen empfiehlt sich tidy - es gibt sicher auch Geschichten die C-ähnlichen Code einrücken können (Java, PHP, JavaScript, C++ usw) - da fällt mir spontan aber nix ein.
    Beitrag melden
    
    –
    Informationen zu den Bewertungsregeln
    
    Übersicht
    
    alle Foren
    
    SELFHTML-Forum
    
    anmelden
    
    Benutzerkonto erstellen
    
    Beitrag im Thread-Baum
Internet Explorer verschiebt alles!
EKKi 03.09.2009 21:20

html
+1 Informationen zu den Bewertungsregeln
Mahlzeit Matthias,

Mir geht es erstmal nur um die Darstellung. Ich weiß, dass viele Links noch nicht ganz passen und andere Kleinigkeiten auch, aber hier geht es nur darum, dass die Seite im Internet Explorer genau so dargestellt wird, wie im firefox.

Das kannst Du prinzipiell am einfachsten erreicheb, indem Du fehlerfreien, semantisch sinnvollen Code erstellst. Ersteres hast Du fast erreicht ("2 Errors, 5 warning(s)" ... wobei gilt: "Fast valide" gibt es genausowenig wie "ein bisschen schwanger" - entweder ganz oder gar nicht) und bei letzterem fehlt Dir noch <http://de.selfhtml.org/css/layouts/einfuehrung.htm@title=ein laaaaanges Stück Weg auf der Reise>.

<html>

Es fehlt die Angabe eines http://de.selfhtml.org/html/allgemein/grundgeruest.htm#dokumenttyp@title=Dokumenttyps.

<style type="text/css">

<style type="text/css">

<style type="text/css">

Warum mehrere <style>-Abschnitte?

a.menu:link    { color:#000000; background-color:transparent; }
a.menu:visited { color:#000000; background-color:transparent; }
a.menu:hover   { color:#ffffff; background-color:#263148; }
a.menu:active  { color:#000000; background-color:#263148; }

a.leiste:link    { color:#ffffff; background-color:transparent; }
a.leiste:visited { color:#ffffff; background-color:transparent; }
a.leiste:hover   { color:#ffffff; background-color:transparent; }
a.leiste:active  { color:#ffffff; background-color:transparent; }
a.leiste:text { color:#7585AA; background-color:#7585AA; }

Welchen Sinn sollen diese teils gleichen, teils widersprüchlichen Angaben haben?

<META HTTP-EQUIV="Content-Type" content="text/html" />

Also entweder Du baust XHTML, dann ist das Schließen des Elements in Ordnung, allerdings *musst* Du dann sämtliche Element- und Attributangaben klein schreiben. Oder Du baust HTML, dann ist es egal, ob Du die Elemente und Attribute klein oder groß schreibst (ich würde Dir dennoch zu konsequente Kleinschreibung raten) - das Schließen ist dann jedoch falsch.

<body bgcolor="#263148" text="black" link="black" alink="black" vlink="black" marginwidth="40%" leftmargin="40%" rightmargin="40%">

Hattest Du die ganzen Angaben zu den Links nicht bereits oben per CSS gemacht? Wieso hier nochmal? Und wieso alle anderen Layout-Angaben auch im HTML? Dafür ist CSS da.
<div>
<table align="center" bgcolor="white" width="100%" border="3" bordercolor="#A1A1A1" rules="none">
```
  <tr align="left">  
  	<td><img src="logo\_banner.jpg" width="80%"></td>  
  </tr>  
```
</table>
</div>
Ein <div>, das nichts gruppiert, weil es nur ein einziges Element enthält, ist überflüssig. Tabellen sind zur Darstellung tabellarischer Inhalt da - nicht zum Layouten. Sämtliche Layoutangaben solltest Du per CSS machen.

<font size="1"<br></font>

Das ist nun wirklich der Gipfel der Sinnlosigkeit: ein veraltetes <font>-Element, das dafür missbraucht wird, die Höhe eines <br>, das wiederum missbraucht wird, um einen Abstand zu erzeugen, festzulegen.

Nochmal: zum Layouten (und dazu gehören auch http://de.selfhtml.org/css/eigenschaften/randabstand.htm@title=Abstandsangaben) ist CSS da.
```
  	<td bgcolor="#6070AA"><a class="menu" href="start.html" target="Frame"><font size="3"><b>&nbsp;&nbsp;&raquo;&nbsp;Startseite</b></font></a></td>  
```
Dein "Menü" möchte eine http://de.selfhtml.org/html/text/listen.htm#aufzaehlung@title=Liste sein - glaub mir ...
```
  	<td><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>  
```
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></td>
Bei dieser absolut grauenhaften Konstruktion fällt mir doch nochmal wieder das Stichwort "CSS" ein ...

<iframe src="start.html" width="100%" height="1000" name="Frame" align="left" scrolling="no" frameborder="0">

Bist Du Dir aller Nachteile, die Frames mit sich bringen, bewusst und willst sie tatsächlich trotzdem nutzen?

MfG,
EKKi

--
sh:( fo:| ch:? rl:( br:> n4:~ ie:% mo:} va:) de:] zu:) fl:{ ss:) ls:& js:|
Beitrag melden

+1
Informationen zu den Bewertungsregeln
1. Internet Explorer verschiebt alles!
  
  suit Homepage des Autors 04.09.2009 10:15
  
  html
  – Informationen zu den Bewertungsregeln
  Oder Du baust HTML, [...] - das Schließen ist dann jedoch falsch.
  
  Nein - in HTML 4.01 (oder älter) sind sämtliche SGML-SHORTTAG-Features erlaubt - dazu zählt auch NETENABL (welches für die genannte schreibweise verantwortlich ist). Es ist allerdings davon abzuraten sie zu verwenden, weil manche Browser Probleme damit haben.
  
  Ich hab' das schon mal ausführlich beschrieben - hier und hier.
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
Internet Explorer verschiebt alles!
Bollo 03.09.2009 23:35

html
– Informationen zu den Bewertungsregeln
hei matze!
coole seite, ich werd auch frames benutzen, weil meine container nicht richtig dargestellt werden mit css.
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Internet Explorer verschiebt alles!
  
  suit Homepage des Autors 04.09.2009 10:16
  
  html
  – Informationen zu den Bewertungsregeln
  coole seite, ich werd auch frames benutzen, weil meine container nicht richtig dargestellt werden mit css.
  
  WTF? Kannst du das näher beschreiben?
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum
Internet Explorer verschiebt alles!
Matthias 04.09.2009 10:43

html
– Informationen zu den Bewertungsregeln
Hi all,

erstmal vielen Dank für die vielen schnellen Antworten. Ich weiß, dass meine HTML Kenntnisse einiges zu wünschen übrig lassen. Nun werde ich mich erstmal ausgibig mit CSS beschäfftigen, habe bis zur präsentation der Seite ja auch noch bis Januar Zeit.

Matthias
Beitrag melden

–
Informationen zu den Bewertungsregeln
1. Internet Explorer verschiebt alles!
  
  Der Martin 04.09.2009 11:02
  
  html
  – Informationen zu den Bewertungsregeln
  Hallo,
  
  Ich weiß, dass meine HTML Kenntnisse einiges zu wünschen übrig lassen. Nun werde ich mich erstmal ausgibig mit CSS beschäfftigen
  
  je nachdem, wie intensiv du daran arbeiten kannst und willst, solltest du damit in wenigen Tagen oder in einigen Wochen auf einen grünen Zweig kommen können.
  
  habe bis zur präsentation der Seite ja auch noch bis Januar Zeit.
  
  Das ist gut, wenigstens fragst du nicht erst um fünf vor zwölf nach Hilfe. Wie oft kommt es vor, dass Leute hier wegen eines scheinbar unscheinbaren Problems nachfragen - und dann stellt man bestürzt fest, dass es ihnen offensichtlich noch an Grundkenntnissen fehlt, aber "das Projekt muss bis morgen fertig sein".
  
  Schönes Wochenende,
  Martin
  
  --
  Niemand lebt allein von seinen Träumen.
  Aber wer träumt, lebt noch.
  Beitrag melden
  
  –
  Informationen zu den Bewertungsregeln
  Übersicht
  
  alle Foren
  
  SELFHTML-Forum
  
  anmelden
  
  Benutzerkonto erstellen
  
  Beitrag im Thread-Baum

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Matthias: Internet Explorer verschiebt alles!