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

Unterschiedliche Darstellung: IE vs. Firefox

Status
Für weitere Antworten geschlossen.

Supermuh

Neues Mitglied
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)
moz-screenshot.jpg
problemrw4.jpg


<!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;
}
 
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
 
[offtopc an]

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

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]
 
[offtopc an]

:mrgreen::mrgreen::mrgreen::mrgreen:
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
 
Hmmm

Nun erstmal ein großes Danke für die kreativen und hilfreichen Denkanstöße :grin: 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".
 
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
 
.... 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;.
 
Zuletzt bearbeitet:
Status
Für weitere Antworten geschlossen.
Zurück
Oben