Bild aus Rahmen verschoben...

[TheTom]

Hi!

Ich hab' in gewissen Browsern (MAC: Safari OK, Firefox und Opera Fehler) plötzlich ein "lustiges" Problem: Artikel im Main-Bereich, bestehend aus 2 Elementen Text (artikel_schmal) und Bild (artikel_foto). Mittels CSS den Text nach links, das Bild nach rechts gefloated. Bei einem anderen Projekt (ältere Contao-Version) bin ich gleich vorgegangen, hier funktioniert alles wie es soll.
In der angefügten Datei ist sichtbar, wo das Problem liegt. Der Bild-Container (artikel_schmal) zur besseren Ansicht mit blauer Hintergrundfarbe eingefärbt, der image_container rot.

Wo liegt der Fehler?

Contao-Version 2.11.2

#main
{
    width:545px;
    left:115px;
    position:relative;
}

.artikel_schmal
{
    width:390px;
    float:left;
}

.artikel_fotos
{
    width:130px;
    float:right;
    background-color: blue;
}

.image_container
{
    background-color: red;
}

<div id="main">
<div class="inside">

<div class="mod_article block" id="leistungen">

<div class="ce_text artikel_schmal block">

<h1>Blindtext</h1>
<h6>Achtung! Dieser Blindtext wird gerade durch 130 Millionen Rezeptoren Ihrer Netzhaut erfasst. Die Zellen werden dadurch in einen Erregungszustand versetzt, der sich über den Sehnerv in dem hinteren Teil Ihres Gehirns ausbreitet.</h6>
<p>Von dort aus überträgt sich die Erregung in Sekundenbruchteilen auch in andere Bereiche Ihres Grosshirns. Ihr Stirnlappen wird stimuliert. Von dort aus gehen jetzt Willensimpulse aus, die Ihr zentrales Nervensystem in konkrete Handlungen umsetzt. Kopf und Augen reagieren bereits. Sie folgen dem Text, nehmen die darin enthaltenen Informationen auf wie ein Schwamm. Nicht auszudenken, was mit Ihnen hätte passieren können, wenn dieser Blindtext durch einen echten Text ersetzt worden wäre.</p>
<p>Von dort aus überträgt sich die Erregung in Sekundenbruchteilen auch in andere Bereiche Ihres Grosshirns. Ihr Stirnlappen wird stimuliert. Von dort aus gehen jetzt Willensimpulse aus, die Ihr zentrales Nervensystem in konkrete Handlungen umsetzt. Kopf und Augen reagieren bereits. Sie folgen dem Text, nehmen die darin enthaltenen Informationen auf wie ein Schwamm. Nicht auszudenken, was mit Ihnen hätte passieren können, wenn dieser Blindtext durch einen echten Text ersetzt worden wäre.</p>
</div>

<div class="ce_image artikel_fotos block">

<figure class="image_container">
<img src="tl_files/tr_flachdach_theme/fotos/beispielbild01.jpg" width="125" height="95" alt="">
</figure>

</div>

</div>
 
</div>

MfG, Thomas

[Andreas]

Ich kann dein Problem zwar nicht so richtig erkennen, aber, kann es sein, dass du das contao.css nicht eingebunden hast? Die neuen HTML5-Elemente, wie z.B. figure, brauchen margin:0; und display:block;

FIGURE bekommt z.B. im FF default ein margin von '16px 40px'.

[TheTom]

Hallo Andreas!

Spät aber doch danke für den Hinweis - genau das war der Fehler. Ich verwende nicht das Contao.css sondern eine selbstgeschriebene css-reset-Datei, und in dieser waren die betroffenen Einträge eben noch nicht vorhanden.

MfG, Thomas