✔ IE: Darstellungsfehler bei verschachteltem Boxlayout

[Warper]

Hi,

ich bin etwas am verzweifeln bei einem aktuellen Projekt. Das Layout ist xhtml 1.0 strict validiert.

Ich habe jedoch ein ganz bestimmtes Problem, welches ich nicht in den Griff bekomme im IE.

http://www.autohochzwei.de/artikel.php

Die drei Spalten in der Mitte (vertikal gesehen) haben als Abgrenzung unten eine 1px hohe <div> (Klasse: .pixel_rahmen).

.pixel_rahmen {
	height: 1px;
	line-height: 1px;
	background-color: #f00;
	}

Zunächst hat der IE diese nicht als 1px hohe sondern als eine sehr viel höhere Box angezeigt (ca. 10px). Line-height in Kombination mit einem &nbsp; in der Box hat dabei Abhilfe geschaffen.

So geschehen auch bei der der Klasse .oranger_balken. Mein Problem ist jedoch bei den mittleren drei Spalten, das jeweils unterhalb dem <div> .pixel_rahmen noch eine graue Fläche dargestellt wird.

Bei der linken der drei Spalten habe ich zusätzlich noch das Problem, dass die div der Klasse abschlussleiste im IE seltsamerweise "zweispaltig" dargestellt wird.

Um euch eine mögliche Hilfe zu vereinfachen, habe ich die Klasse .pixel_rahmen mal mit einem roten Hintergrund (#F00) und die Klasse .abschlussleiste mit einem grünen Hintergrund (#0F0) versehen.

Hat irgendjemand eine Idee?

Grüße,
Steffen

 

[Maik]

Probier mal Folgendes:

#inhalt div .abschlussleiste .datum {
        line-height: 13px;
        /*position: relative;*/  /* auskommentiert = deaktiviert */
        /*left: 0px;*/  /* auskommentiert = deaktiviert */
        float:left; 
        width: 100px;
        height: 13px;
        font-family: verdana, arial, sans-serif;
        font-size: 11px;
        text-align: center;
        background-color: #ECECEC;
        }

#inhalt div .abschlussleiste .seitenauswahl {
        line-height: 13px;
        /*position: relative;*/ /* auskommentiert = deaktiviert */
        float: right;
        /*top: -13px;*/  /* auskommentiert = deaktiviert */
        width: 100px;
        height: 13px;
        font-family: verdana, arial, sans-serif;
        font-size: 11px;
        text-align: center;
        background-color: #ECECEC;
        }

.pixel_rahmen {
        height: 1px;
        font-size:0;
        line-height: 1px;
        background-color: #f00;
        }

sowie:

<div class="pixel_rahmen" style="height: 1px; line-height: 1px; background-color: #f00;font-size:0;">&nbsp;</div>

 

[Warper]

Wow, du bist mein Gott. Die Frage, warum ich die beiden div's relativ positioniert habe und nicht nur mit float:left und float:right sollte ich mir selbst beantworten können oder?

Eine Frage könntest du mir aber bitte noch beantworten.

<div class="pixel_rahmen" style="height: 1px; line-height: 1px; background-color: #f00; font-size:0;">&nbsp;</div>

Warum muss ich der div zusätzlich zur class="pixel_rahmen" für den IE noch einmal die spezifische Formatierung im HTML Tag zuweisen? Ich weiß, ich habs vorgemacht, aber nur weil der IE die Klassenangabe ignoriert hat. Im Firefox benötige ich die Zuweisung nicht, denn die div ist ja ganz eindeutig der Klasse .pixel_rahmen zugeordnet. Und vereerbt sollte da doch nichts schlimmes werden, oder?

Nur so zur Aufklärung.

Aber vielen Dank für die schnelle kompetente Hilfe. Der Hammer

Grüße,
Steffen

 

[Maik]

Warum der IE die Klasse ignoriert, kann ich auch nicht nachvollziehen, aber wenn ich die Spezifität des Selektors erhöhe, nimmt er sie ohne Probleme an:

#container .pixel_rahmen, #spalte_1 .pixel_rahmen, #spalte_2 .pixel_rahmen {
        height: 1px;
        font-size:0;
        line-height: 1px;
        background-color: #f00;
        }

 

[Warper]

Na, das Problem werde ich schon noch irgendwie gelöst bekommen.

Vielen Dank nochmal!

 

[Maik]

Bist du mit meinem Vorschlag nicht zufrieden?

 

[Warper]

Von nicht gefallen kann nicht wirklich die Rede sein. Es ist nur so, das ich versuche einige Klassen in den CSS Formatangaben allgemein zu halten. Dazu gehört so etwas wie

.fett {
	font-weight: bold;
}

So auch die Klasse .pixel_rahmen. Aber wenn ich recht überlege, brauche ich mich zumindest zurzeit bezüglich dieser Klasse nicht einschränken.

Zumal ich eigentlich immer einen gewissen Drang danach verspüre, zu wissen warum der IE die Klasse nicht mag. Das Problem liegt doch sicher in der Vererbung, oder?

Grüße,
Steffen

EDIT: Sehe gerade das du sie ja zusätzlich allgemein definierst. Sorry, mein Fehler . Lösch den gesamten ersten Teil dieses Posts - ich möchte nur noch verstehen, warum der IE sie nicht allgemein aktzeptiert.

 

[Warper]

Hi,

es haben sich zwei weitere Problemchen angehäuft, bei denen ich einfach auf keinen grünen Zweig komme.

Zu sehen auf:

http://beta.autohochzwei.de/galerie.php?artikel_id=5&bild_id=3

EDIT: Die muss vorerst nicht jeder auf Anhieb haben - Wer Interesse hat, schickt mir eine PM.
Benutzername: ***
Passwort: ***


Ich habe zum einen den orangen Balken und darunter direkt eine H1. Inzwischen stellt mir der IE den orangen Balken (.oranger_balken) zumindest (dank line-height: 5px; und einem &nbsp auch wirklich nur 5px hoch dar. Leider habe ich jedoch noch eine Lücke zwischen der H1 und dem orangen Balken, der ich einfach nicht Herr werde.

Habt ihr eine Idee?

Des Weiteren habe ich ein Problem mit den drei kleinen Thumbnails und den Vor-Zurück Buttons daneben. Der IE meint irgendwie, dem Zurück Button auf der linken Seite einen größeren Margin zu geben, als ihm eigentlich zugesprochen ist. Dadurch rückt der Vorwärts Button leider in die nächste Zeile.

Das sind die dafür interessanten Klassen und ID's:

#container #slideshow {
    float: right;
    width: 560px;
    background-color: #ECECEC;
    margin-bottom: 10px;
}

#container #slideshow #vor_zurueck {
    margin: 10px;
    float: left;
    width: 20px;
    height: 110px;
}

#container #slideshow #vor_zurueck a {
    background-color: #fff;
    text-decoration: none;
    display: block;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    line-height: 110px;
    color: #E94E1A;
    font-weight: bold;
}

#container #slideshow #vor_zurueck a:hover {
    background-color: #E94E1A;
    color: #fff;
}

Ich würde mich super über eine erneute Hilfe freuen!

Schöne Grüße,
Steffen

 

[Maik]

Problem Nr.1 sollte sich auf die gleiche Weise lösen lassen, wie "damals" beim Selektor .pixel_rahmen, indem eine Schriftgröße von Null bestimmt wird.

Beim zweiten Problem wird wohl der IE die horizontalen margin-Werte des zu umfliessenden Elements verdoppeln, weshalb sie für ihn halbiert werden müssten:

#container #slideshow #vor_zurueck {
    margin: 10px 10px 10px 10px !important; /* Moderne Browser */
    margin: 10px 5px 10px 5px;  /* IE */
    float: left;
    width: 20px;
    height: 110px;
}

Vielleicht hilft das weiter.

 

[Warper]

Vielleicht hilft das weiter.

Was für eine Vermutung, wie immer helfen deine Antworten weiter - undzwar ungemein.

Aber ich ärgere mich wirklich, dass ich nicht selbst drauf gekommen bin. Ich bin dämlicher Weise die ganze Zeit davon ausgegangen, an line-height, font-size etc gedacht zu haben... Aber aus welchem Grund auch immer, habe ich den font-size:0; hint nur in meinem Schädel in der Klasse gehabt.

Ich hoffe ich darf trotzdem bei Gelegenheit das Forum wieder mit Fragen belasten

Grüße,
Steffen