Unterschiedliche Darstellung in IE und Opera

[Sanchez]

Hallo,

Wer diese Test-Seite ( http://www.young-culture.com/etomite/test.html ) ansieht wird feststellen, dass gravierende Unterschiede der Darstellungen zwischen IE und Opera auftreten. Vermutlich hab ich mich mal wieder an eine Nachlässigkeit im IE gewöhnt und kann meinen Fehler deshalb nicht finden.

Diese Blöcke, bei denen im Opera der untere Balken fehlen, sind so aufgebaut:

Code:

  <div class="unit">
        <div class="header">noch frei</div>
        <div class="left"></div>
        <div class="content">noch frei</div>
        <div class="right"></div>
        <div class="footer"></div>
   </div>

... und das sind die Style-Klassen dazu:

Code:

.unit {
  height: 130px;
  width: 224px;
}

.header {
        background-image: url('/etomite/assets/images/template/head.gif');
        background-repeat:no-repeat;
        color: #1C449B;
        height: 13px;
        width: auto;
        font-style:normal; font-weight:700; line-height:10px;
        text-align: center;
}

.footer {
        background-image: url('/etomite/assets/images/template/footer.gif');
        background-repeat:no-repeat;
        background-position: bottom;
        color: #1C449B;
        height: 13px;
        width: auto;
        font-style:normal; font-weight:700; line-height:10px;
        text-align: center;
}
.left {
        background-color: #f0f0f0;
        background-image: url('/etomite/assets/images/template/left.gif');
        background-repeat:repeat-y;
        width: 10px;
        float: left;
        height: 100%;
}

.content{
  background-color: #ececc3;
  float: left;
  height: 100%;
  width: 92%;
  font-size: 11px;
  font-style:normal;
  line-height:13px;
  overflow: hidden;
  vertical-align: 50%;
}
.right {
        background-image: url('/etomite/assets/images/template/right.gif');
        background-repeat:repeat-y;
        background-position:right;
        background-color: #f0f0f0;
        width: 8px;
        float: right;
        height: 100%;
}

Wo liegt mein Fehler?

grüße, daniel

[mirage228]

Hi,

nicht nur im Opera gibts Probleme. Auch der FireFox stellt es falsch dar :-\

Hast du es mal durch den HTML- und CSS-Validator der W3 gejagt und geschaut, ob die Seiten überhaupt konform sind?

mfG
mirage228

[Aenogym]

hi,

firefox und opera tun sich sehr schwer bei div's. verusche, wenn möglich, blinde tabellen. das funktioniert einwandfrei

Aenogym

[Garfield]

Entschuldige bitte, wenn ich Dir nicht helfen kann, aber mit Mozilla Firefox (meinem Standardbrowser) sieht es noch bescheidener aus.

[MatthiasW]

Hallo,

ich schätze mal, du hast deine Seite für den IE optimiert und da der IE es nun mal mit der HTML und CSS Spezifikation nicht so genau nimmt ... Jedenfalls würde ich dir raten den Mozilla Firefox einzusetzen um deine Seite zu testen, da der Firefox sich eigentlich an die HTML und CSS Spezifikation hält.

Und: der Opera und Firefox stellt es nicht falsch dar sondern die IE.

Mfg Matthias

[idontwantaname]

also ich verwenden opera 7.54 und es funzt ohne probleme

[MatthiasW]

Hallo,

Zitat:

Zitat von Aenogym

hi,

firefox und opera tun sich sehr schwer bei div's. verusche, wenn möglich, blinde tabellen. das funktioniert einwandfrei

Aenogym

das stimmt aber nicht. Ich habe eine Seite durch das Mambo CMS - System erstellen lassen (dieses verwendet sehr viele Div's) und sowohl der Mozilla Firefox als auch der Opera stellen diese Seite korrekt dar.

Mfg Matthias

[Sanchez]

Zitat:

Zitat von mirage228

Hast du es mal durch den HTML- und CSS-Validator der W3 gejagt und geschaut, ob die Seiten überhaupt konform sind?

Habs gerade durch die Validatoren gejagt. Erfolgreich.

Zitat:

Zitat von idontwantaname

also ich verwenden opera 7.54 und es funzt ohne probleme

Im Opera siehts auf den ersten Blick auch ganz passend aus, aber der abschließende Balken wird nicht dargestellt.

Zitat:

Zitat von Aenogym

firefox und opera tun sich sehr schwer bei div's. verusche, wenn möglich, blinde tabellen. das funktioniert einwandfrei

Glaub ich nicht. Es liegt nur an der Gutmütigkeit vom IE.
Auf die Tabellen will ich eigentlich weitgehend verzichten.

Zitat:

Zitat von MatthiasW

ich schätze mal, du hast deine Seite für den IE optimiert und da der IE es nun mal mit der HTML und CSS Spezifikation nicht so genau nimmt ... Jedenfalls würde ich dir raten den Mozilla Firefox einzusetzen um deine Seite zu testen, da der Firefox sich eigentlich an die HTML und CSS Spezifikation hält.

Stimmt. Ich entwickle meistens im IE und sehe mir danach die Ergebnisse im Opera an. Den Firefox werdn ich mir mal ansehen.

[Sanchez]

Kennt eigentlich jemand eine Seite mit ähnlichen Konstrukten?
Ich fürchte ich komm selber nicht drauf. Ich spiele gerade mit dem Gedanken das ganze mit Tabellen zu machen.
Offenbar stimmt etwas mit meinen Größenangaben nicht, wenn ich aber mit denen rumspiele wirds im IE schon mal um einiges schlechter.

grüße, daniel

[Aenogym]

Zitat:

Zitat von Aenogym

firefox und opera tun sich sehr schwer bei div's.

ich meinte damit, dass diese browser probleme haben, verschachtelte div's korrekt anzuzeigen. sorry ;)

Aenogym

[Sanchez]

Ich hab jetzt noch nen anderen Versuch mit divs gestartet.
Könnt ihr mal testen wie es bei euch aussieht?
Vor allem Opera, FireFox und Konsorten wären hilfreich.
http://www.young-culture.com/etomite/test.html

[mirage228]

Hi,

im FireFox wird der untere Teil der Tabellengrafik nicht dargestellt. Zudem ist graue Hintergrund nicht hoch genug, sodass die Tabellen ein wenig drüber ragen. Aber so krass, wie beim ersten mal ist es nicht.

Im IE ist weiterhin korrekt.

mfG
mirage228

[jfheins]

In Opera 7.54 werden die unteren abschlüsse der Kästen nicht dargestellt.

Ich weis, dass der opera das design verhaut, wenn in den div-tags zu exessiv stylesheet verwebdet wird.

Wenn du wissen möchtest, woran das liegt, lösch einfach eine eigenschaft nach der anderen, und gucke dann, wann das design stimmt

[Sanchez]

Hmm, du muss ich wohl noch etwas dran feilen.
Ich habe im mittleren div die Höhe von 100% in Verdacht, aber da mach ich erst morgen weiter.
Danke fürs testen.