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

Warum erscheint die Seite im IE anders als im Firefox ?

Status
Für weitere Antworten geschlossen.
T

Tomm

Mitglied
Hallo,

ich hab mir eine Seite erstellt, ist erst mal eine Testversion
http://www.heros-ev.de/Test/HTML-Test323.htm

Ich habe sie mit The W3C Markup Validation Service getestet, und keinen Fehler gefunden.
Versteh aber nicht, warum die Seite mit dem Internet Explorer nicht exakt genauso ausschaut wie mit dem Mozilla Firefox ?
Die Abstände unten am Counter und den Screenshots sind unterschiedlich.
Kann mir jemand sagen,wie man das hinbekommt, dass es mit beiden Browsern gleich aussieht.
 
Im Doctype fehlt die url. Das führt im Firefox und IE zum Quirksmode.
Das verhalten unter diesem Modus ist ist in den Browsern besonders unterschiedlich.
Notiere ihn besser so:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" [B][COLOR=DarkRed]"http://www.w3.org/TR/html4/loose.dtd"[/COLOR][/B]>

Bei mir sieht die Seite im ff2, ff3, IE6 und IE7 nicht anders aus.
Nur die Positionierung hängt von der Schriftgröße ab.

Du positionierst die Element immer von oben aus. So ragen die Boxen, je nach Höhe (bzw. Inhalt) über das Elternelement hinaus.
Die Schriften nehmen je nach Browser, Betriebssystem und installierten Schriften nicht exakt die gleiche Höhe (line-height) ein.
Wenn eine Box von unten (position: absolute; bottom: 5px;) augerichtet wird wächst die Box nach oben mit dem Inhalt/ Höhe.

Die Positionierungen sind durch den Mix von Tabellen-Layout, html-Attribute und inline-Styles sehr unübersichtlich.
 
Valider HTML-Code ist nur die halbe Miete für eine korrekte Darstellung. Man muss auch die Eigenheiten jedes Browser bei Nutzung von CSS berücksichtigen.
 
Ich habe mir ein Buch zu diesem Thema besorgt
Da steht das man für manche Browser kleine Veränderungen vornehmen muß, damit das Layout gleich ausschaut.
Man nennt das "Conditional Comments"
http://www.quirksmode.org/css/condcom.html

Damit kann man für einzelne Browser kleine Veränderungen vornehmen

z.B.
Code: 
<!--[if IE 6]>
Special instructions for IE 6 here
<![endif]-->
 
Gerade um cond. comments zu vermeiden sollte man zunächst einen qualifizierten Doctype verwenden, nämlich den wie von neuroleptika gepostet.
Damit kannst du dir viel Mühe und viele cond. comments sparen.
Wenn dann noch was nicht stimmt, gibt es meist auch noch eine Lösung ohne conditional comments.
 
neuroleptika schrieb:
Im Doctype fehlt die url. Das führt im Firefox und IE zum Quirksmode.
Das verhalten unter diesem Modus ist ist in den Browsern besonders unterschiedlich.
Notiere ihn besser so:
Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" [B][COLOR=darkred]"http://www.w3.org/TR/html4/loose.dtd"[/COLOR][/B]>

Bei mir sieht die Seite im ff2, ff3, IE6 und IE7 nicht anders aus.
Nur die Positionierung hängt von der Schriftgröße ab.

Du positionierst die Element immer von oben aus. So ragen die Boxen, je nach Höhe (bzw. Inhalt) über das Elternelement hinaus.
Die Schriften nehmen je nach Browser, Betriebssystem und installierten Schriften nicht exakt die gleiche Höhe (line-height) ein.
Wenn eine Box von unten (position: absolute; bottom: 5px;) augerichtet wird wächst die Box nach oben mit dem Inhalt/ Höhe.

Die Positionierungen sind durch den Mix von Tabellen-Layout, html-Attribute und inline-Styles sehr unübersichtlich.
Zum Vergrößern anklicken....

Ich hab den DocType eingefügt

Danke
 
Tomm schrieb:
Ich habe mir ein Buch zu diesem Thema besorgt
Da steht das man für manche Browser kleine Veränderungen vornehmen muß, damit das Layout gleich ausschaut.
Man nennt das "Conditional Comments"
Zum Vergrößern anklicken....
Dein Problem kannst du nicht mit einzelnen Pixel-Korrekturen lösen.
Es liegt nicht direkt am IE sondern an den unterschiedlichen Schrift/Zeilenhöhen. Siehe dir die Seite mal mit einer anderen Schriftgröße an.


 
neuroleptika schrieb:
Dein Problem kannst du nicht mit einzelnen Pixel-Korrekturen lösen.
Es liegt nicht direkt am IE sondern an den unterschiedlichen Schrift/Zeilenhöhen. Siehe dir die Seite mal mit einer anderen Schriftgröße an.
Zum Vergrößern anklicken....

Meinst du ich sollte die Tabellen ganz weglassen, stattdessen mit DIV-Containern die Elemente einfügen ?
 
Ja,
für ein stabiles, erweiterbares Grundgerüst würde ich die Bereiche in Blöcken aufteilen. Vor allem aber nicht alles absolute positionieren und sparsamer mit Höhenangaben umgehen.

html
Code: 
<div id="seite">
<div id="header">
<h1>Dreispalter</h1>
<p>Dreispaltigkeit in px</p>
</div>

<div id="spalten">
<div id="spalte1">
<h2>spalte1</h2>
<p>Navigation1</p>
</div>
<div id="spalte2">
<h2>spalte2</h2>
<p>Inhalt</p>

<div id="counter">
counter
</div>
</div>

<div id="spalte3">
<h2>spalte3</h2>
<p>Navigation2</p>
</div>

<br class="clearer">

</div>

</div>
Das css dazu:
Code: 
*  {
margin: 0;
padding: 0;
}

body {
font-size: 100%;
font-family: arial, sans-serif;
}

#seite {
width: 950px;
margin: 0 auto;
}

#header {
height: 100px;
background-color: #AFCDD1;
}

#spalten {
background-color: #CDCDCD;
position: relative;
width: 100%; /*layout für IE6*/
}

#spalte1, #spalte2, #spalte3 {
float: left;
}

#spalte1, #spalte3 {
width: 125px;
}

#spalte2 {
width: 700px;
background-color: #979797;
min-height: 300px;
position: relative;
}

* html #spalte2{
height: 300px; /*min-height für IE6*/
}


#counter {
position: absolute;
[COLOR=DarkRed][B] bottom: 5px;[/B][/COLOR]
left: -120px
}

.clearer {
clear: both;
}
Die Hintergrundfarbe für die äußeren Spalten sind in #spalten angegeben.
Für den mittleren Bereich wird sie in #spalte2 Überschrieben.
Das funktioniert aber nur solange die anderen spalten nicht höher wie der mittlere Bereich sind.
Ansonsten geht das am einfachsten mit einer Hintergrundgrafik für #spalten.
prm aus diesem Forum hat etwas dazu geschrieben: Faux Columns

Der counter ist absolute von #spalte2, bottom positioniert.
Nach der Anleitung von prm müsstest du sie dann von #spalten aus positionieren.
( z.B. position: absolute; bottom: 0; left: 0; )
 
Zuletzt bearbeitet:
Ja, Danke

Hast Recht , die Tabellen erlauben kein sauberers Layout

Ich lösche die Tabellen und mache es nochmal, dann stell ichs nochmal online
 
Tomm schrieb:
Ich habe sie mit The W3C Markup Validation Service getestet, und keinen Fehler gefunden.
Versteh aber nicht, warum die Seite mit dem Internet Explorer nicht exakt genauso ausschaut wie mit dem Mozilla Firefox ?
Zum Vergrößern anklicken....
Zum einen hast Du Deine Seite vom HTML-Validator validieren lassen. HTML ist aber nicht für die Darstellung zuständig, also kannst Du nicht aus einem validen HTML-Code schließen, wie die Darstellung aussieht.

Zum anderen wirst Du in unterschiedlichen Browsern oder in gleichen Browsern auf unterschiedlichen Rechnern immer Unterschiede feststellen. Es gibt so viele Unterschiede an Hardware, Software und den Einstellungen, die man vornehmen kann. Eine Site überall exakt gleich aussehen zu lassen, halte ich für Utopie. Das geht schon damit los, dass einer der am weitesten verbreiteten Browser (IE6) in Sachen CSS einige Macken hat. Manches kann man durch Hacks umgehen, aber ob das immer nötig ist...und einiges sieht nunmal anders aus. IMHO sollte man an eine Website nie mit dem Ziel rangehen, dass die Site überall exakt gleich aussieht.

Tomm schrieb:
Meinst du ich sollte die Tabellen ganz weglassen, stattdessen mit DIV-Containern die Elemente einfügen ?
Zum Vergrößern anklicken....
Weder noch.
Tabellen sind dazu da, tabellarische Daten auszuzeichnen.
Mit <div> gruppiert man mehrere Elemente, meist zur gemeinsamen Formatierung.

Layout macht man mit keinem von beiden. Layout macht man überhaupt nicht mit HTML, sondern mit CSS. Welche Tags darunter verwendet werden, hängt primär vom Inhalt ab, nicht vom Layout.

Gruß,
-Efchen
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben