Unterschiedliche Darstellung: IE vs. Firefox

**Supermuh** · 07.05.2008 23:18

Ich bin schon länger am rumbasteln...

Meine Typo3-Seite mit CSS wird in Firefox richtig und im IE falsch dargestellt... hat jemand eine gute Idee?

Hier der Unterschied in Firefox (2.0.0.14) und IE (7.0.5730.13)
[IMG]file:///C:/DOKUME%7E1/M/LOKALE%7E1/Temp/moz-screenshot.jpg[/IMG]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CID</title>
<link href="cid.css" rel="stylesheet" type="text/css">
<script src="AC_RunActiveContent.js" type="text/javascript"></script>
<style type="text/css">
</head>

<body>
<div id="wrapper">
<div id="up_frame"><img src="l_top_head.gif" width="984" height="12"></div>
<div id="nav_swf"></div>
<div id="content_box">
<div id="mid_frame"><img src="leisteoben2.gif"></div>
<div class="column Stil1" id="right_content"></div>
<div class="column Stil1" id="left_content"></div>
<div class="column" id="content"></div>
<div id="mid_frame2"><img src="leisteunten.gif" width="984" height="12"></div>
</div>
<div class="column Stil1" id="footer"><div align="center"></div>
<div id="down_frame"><img src="untekkkkn3lll.gif" width="984" height="24"></div>
</div>
</body>

@charset "utf-8";
body {
background-color: #666666;
text-align: center;
margin: 0px;
padding: 0px;
}
#wrapper {
text-align: left;
width: 984px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
}
#up_frame {
margin-top: 24px;
margin-bottom: 0px;
}
#nav_swf {
margin-top: 0px;
margin-bottom: 0px;
float: left;
padding: 0px;
}
#mid_frame {
margin-top: 0px;
margin-bottom: 0px;
}
#content_box {
background-image: url(cont.gif);
background-repeat: repeat-y;
}
#content {
background-repeat: repeat-y;
height: auto;
margin-right: 180px;
margin-left: 180px;
}
#left_content {
margin-left: 16px;
width: 152px;
float: left;
}
#right_content {
float: right;
width: 152px;
margin-right: 14px;
}
#mid_frame2 {
margin-top: 0px;
margin-bottom: 0px;
clear: both;
}
#footer {
margin-top: 0px;
margin-bottom: 0px;
background-image: url(leisteunten2.gif);
background-repeat: repeat-y;
height: auto;
float: right;
}
#down_frame {
margin-top: 0px;
margin-bottom: 0px;
clear: both;
}

**Efchen** · 08.05.2008 08:43

Zitat von Supermuh

Meine Typo3-Seite mit CSS wird in Firefox richtig und im IE falsch dargestellt... hat jemand eine gute Idee?

Das Wahrscheinlichste ist, dass ein Fehler im Code ist, weil der FF CSS besser beherrscht als der IE.
Der Doctype XHTML 1.0 Transitional versetzt den FF lt. LANtastic’s Artikel » DTD - Document Type Declaration - Das richtige Doctype in den Almost Standards Mode. Sowas sollte man vermeiden. Nur, wenn alle Browser den Standards Mode benutzen, kann es überhaupt etwas werden.

Ansonsten kann ich jetzt nichts sagen, Code mag ich eh nicht lesen, ein Link auf die Seite wäre besser. Besorg Dir das Firebug-Plugin für FF, damit kann man eine Website Element für Element analysieren und solche Dinge sehr gut finden.

Gruß,
-Efchen

**neuroleptika** · 08.05.2008 11:09

Ich vermute das Menü enthält Grafiken die mit img eingebunden sind.
Wenn dem so ist, sollte img per css display:block; bekommen.

Der Grund warum der Abstand in Firefox, Safari und Opera nicht angezeigt wird, könnte tatsächlich am Almost-Mode liegen.

Siehe hierzu auch:
DOCTYPE-Switch: Browser-Referenz - Mozilla

**sysop** · 08.05.2008 12:55

[offtopc an]

Zitat von Efchen

Das Wahrscheinlichste ist, dass ein Fehler im Code ist, weil der FF CSS besser beherrscht als der IE.

endlich habe ich dich erwischt. du gibst selber zu, dass die browser unterschiede im css machen und dass css zwar toll aber doch noch nicht komplett von allen browsern unterstützt wird.

die traurige tatsache dass dem so ist, hat mich übrigens schon stunden gekostet.

[offtopc aus]

**Efchen** · 08.05.2008 14:44

Zitat von sysop

[offtopc an]

Und schon habe ich ohne viel Zutun einen Menschen glücklich gemacht

endlich habe ich dich erwischt. du gibst selber zu, dass die browser unterschiede im css machen und dass css zwar toll aber doch noch nicht komplett von allen browsern unterstützt wird.

Hab ich wohl irgendwo das Gegenteil behauptet?

Ich propagiere:
1. 100%ige Nutzbarkeit, die wird aber rein durch HTML erreicht. CSS ist dafür irrelevant.
2. CSS zur Definition des Layouts.

Tatsächlich gibt es Browserinkompatibilitäten. Oft genug aber sind sie nicht wirklich schlimm und manchmal führen sie dazu, dass Seiten in unterschiedlichen Browsern unterschiedlich aussehen. Ist das schlimm? Nein. Das fängt ja schon beim verwendeten Monitor/Auflösung an, dass Seiten unterschiedlich aussehen. Warum sollte man sich die Mühe machen, pixelgenaue Übereinstimmung zu erhalten? Das WWW ist etwas sehr flexibles und doch kompatibles. IMHO darf es nicht wichtig sein, dass eine Seite in allen Browsern exakt gleich aussieht (geht eh nicht, wenn man nicht-visuelle Clients oder Lynx berücksichtigt). Wichtig ist, dass eine Site in allen Clients nutzbar ist, und - natürlich - das das grobe Design gleich aussieht. Ist mal in dem einen Browser ein Abstand etwas größer, stört das normalerweise gar nicht. Nutzt man in einem Browser abgerundete Ecken, was ein anderer nicht darstellen kann - na und? Dann hat der andere eben eckige Ecken. Jeder Browser kann nur das darstellen, was er technisch kann. Wenn ich ein popup-Menü in CSS mache, dann genießen das User moderner Browser. Wenn ein IE-User (in dem nur die JavaScript-Variante funktionieren kann) JavaScript deaktiviert, dann kriegt er so ein Menü nicht. Pech gehabt. Geht ja auch nicht anders. Das Menü ist dann aber trotzdem so aufgebaut, dass der IE-Nutzer trotzdem alle Seiten erreichen kann. 100%ige Nutzbarkeit eben.
[offtopc aus]

-Efchen

**Supermuh** · 09.05.2008 15:43

Nun erstmal ein großes Danke für die kreativen und hilfreichen Denkanstöße

Also: Es scheint tatsächlich am Almost-Mode zu liegen, allerdings sollte das doch mit IE 7 nich mehr vorkommen... naja miraculum, miraculum. Und wenn es daran liegen sollte, weiß ich noch nicht wie ich das bearbeiten kann

, weil Typo3 die Seite generiert. Oder sollte es etwa ein script geben, meine Antenne sind auf empfang... "irgendwie war das anders geplant".

**Efchen** · 09.05.2008 15:56

Zitat von Supermuh

Es scheint tatsächlich am Almost-Mode zu liegen, allerdings sollte das doch mit IE 7 nich mehr vorkommen.

Es war ja auch Mozilla, der in den Almost Standards Mode schaltet, nicht der IE.
Aber wer was auf sich hält, nimmt eh eine Strict-Variante

Schöne Pfingsten,
-Efchen

**neuroleptika** · 09.05.2008 18:34

Zitat von Supermuh

.... Es scheint tatsächlich am Almost-Mode zu ......

Wenn der Abstand im Almost-Mode (also xhtml1.0-transitional Mozilla, Opera) nicht auftaucht aber in Internet Explorern, schreibe mal in die css:

Code:

img { display: block; }

und gucke was passiert.

Der Abstand müsste dann weg sein.

In der Variante XHTML 1.0 Strict hilft bei allen Browsern display: block;.

**koslowski** · 09.05.2008 20:25

Hi,

ergänzend zu meinen Vorredner noch ein Link dazu.

koslowski

**neuroleptika** · 09.05.2008 20:59

Das habe ich mal dazu geschrieben:
css | Spalten :: css-stÃ¶rende AbstÃ¤nde

Ich bin dabei von xhtml 1.0 Strict bzw html 4.01 Strict ausgegangen.

Thema: Unterschiedliche Darstellung: IE vs. Firefox

LinkBack

Themen-Optionen

Unterschiedliche Darstellung: IE vs. Firefox

Hmmm

Aktive Benutzer

Aktive Benutzer

Ähnliche Themen

Unterschiedliche Darstellung je nach Browser

unterschiedliche Ausrichtung von Hintergrundbild bei IE und Firefox

Unterschiedliche Darstellung bei unterschiedlichen Browsern

probleme mit der darstellung in firefox

Unterschiedliche Darstellung im IE und Firefox

Stichworte

Lesezeichen

Lesezeichen

Berechtigungen