Opera: keine Scrollbar bei nebeneinander liegenden inline-blocks

[Gunnar Bittersmann]

@@alle:

nuqneH

Die Listitems (variable Anzahl) einer Liste sollten nebeneinander dargestellt werden, bei Bedarf soll eine Scrollbar erscheinen.

Warum sträubt sich Opera? Wie lässt der sich dazu bringen es doch zu tun?

Testseite

relevantes Markup:

        <ul class="horizontalList">  
            <li>  
                <p>Lorem ipsum dolor sit amet.</p>  
            </li>  
            <li>  
                <p>Lorem ipsum dolor sit amet.</p>  
            </li>  
            <li>  
                <p>Lorem ipsum dolor sit amet.</p>  
            </li>  
            <li>  
                <p>Lorem ipsum dolor sit amet.</p>  
            </li>  
        </ul>

Stylesheet:

.horizontalList  
{  
    list-style: none;  
    margin: 0;  
    padding: 0;  
    white-space: nowrap;  
    max-width: 250px;  
    overflow: auto;  
}  
  
* html .horizontalList  
{  
    width: 250px;  
    overflow-y: hidden;  
    padding-bottom: 20px;  
}  
  
*:first-child+html .horizontalList  
{  
    overflow-y: hidden;  
    padding-bottom: 20px;  
}  
  
.horizontalList li  
{  
    max-width: 100px;  
    height: 100px;  
    overflow: hidden;  
    border: 1px solid silver;  
    margin: 3px;  
    padding: 3px;  
    display: -moz-inline-box; /* Firefox 2 */  
    display: inline-block;  
    vertical-align: top;  
}  
  
* html .horizontalList li  
{  
    width: 100px;  
    display: inline;  
}  
  
*:first-child+html .horizontalList li  
{  
    display: inline;  
}  
  
.horizontalList p  
{  
    margin: 0;  
    white-space: normal;  
}

Qapla'

[krischi]

moinmoin

overflow: auto;

Opera 5 und 6 kennen kein *auto* oder *scroll* statt dessen wird *hidden* verwendet

kuckst du hier

Opera 7 hätte das eigendlich können sollen...

Gruß Krischi

[Harlequin]

Yerf!

Opera 7 hätte das eigendlich können sollen...

Das Problem ist, dass dieses Verhalten auch im Opera 9.6 auftritt und nicht direkt etwas mit overflow zu tun hat. Auch ein explizit gesetztes overflow:scroll hilft nicht, die eingeblendete Scrollbar ist disabled, so als wäre kein Scrollbarer Inhalt vorhanden.

Ich würde sagen: ist ein Bug in Opera, der berechnet scheinbar die Inhaltsbreite bei Inline-Blöcken falsch (scrollWidth bleibt 0), so als ob die gar nicht zum Inhalt gehören würden...

Gruß,

Harlequin

[krischi]

moinmoin Harlequin

»» Opera 7 hätte das eigendlich können sollen...

... [Schnipp] ... auch in Opera 9.6 ... [Schnipp] ... Auch ein explizit gesetztes overflow:scroll hilft nicht

...mit anderen Worten, die haben es geschafft, einen Bug, den sie schon mal behoben hatten, wieder einzubauen?
Hat Microsoft an Opera mitentwickelt oder den Laden gekauft? Mich wundert bald gar nix mehr...

Gruß Krischi

[Harlequin]

Yerf!

...mit anderen Worten, die haben es geschafft, einen Bug, den sie schon mal behoben hatten, wieder einzubauen?

Bin mir nicht sicher... das Ganze tritt ja nur im Zusammenhang mit inline-block als Inhalt des Scroll-Elements auf.

Der von dir verlinkte Artikel umgeht das Problem, indem er display:table-cell verwendet. Damit klappts dann auch im Opera.

Gruß,

Harlequin

[krischi]

moinmoin

Der von dir verlinkte Artikel umgeht das Problem, indem er display:table-cell verwendet. Damit klappts dann auch im Opera.

joar... aber wenn Gunnar den Wortfetzen Table hört, steh ich lieber nich in Reichweite der Zaunlatte

[Gunnar Bittersmann]

@@krischi:

nuqneH

joar... aber wenn Gunnar den Wortfetzen Table hört, steh ich lieber nich in Reichweite der Zaunlatte

(1) *G*

(2) Ach was, im Stylesheet ist 'display:\s*table' doch völlig i.O.

(3) Halte dich besser nicht im Schwenkbereich auf, wenn ich den Wortfetzen Definitionsliste höre.

(4) Und „manchmal ist eine Tabelle einfach nur eine Tabelle.“

Qapla'

[krischi]

Hi Gunnar,

einen hab ich noch... vielleicht hilfts...

kennst du diesen Artikel?
scrolling scrolling scrolling

Gruß Krischi

[molily]

einen hab ich noch... vielleicht hilfts...

Dass Gunnars Beispiel nicht funktioniert, liegt anscheinend am vertical-align:top, welches Opera durcheinanderbringt. Solange die Höhe aller Inline-Blocks ohnehin fest ist, ist die Angabe aber m.W. auch unnötig.

Mathias

[molily]

liegt anscheinend am vertical-align:top, welches Opera durcheinanderbringt

Workaround für Opera bei unterschiedlich hohen Boxen wäre vertical-align:text-top, da wird die Scrollbar weiterhin angezeigt.

Mathias

[Gunnar Bittersmann]

@@molily:

nuqneH

»» liegt anscheinend am vertical-align:top, welches Opera durcheinanderbringt

Treffer!

»» Solange die Höhe aller Inline-Blocks ohnehin fest ist, ist die Angabe aber m.W. auch unnötig.

'vertical-align: top' hatte ich eingebaut, weil Webkits sonst Mist machen. In den List-Items sitzen nach gefloatete Bilder. Den Bespielcode hatte ich soweit vereinfacht, dass das _Opera_-Problem noch zu erkennen ist. Eigentlich sieht es so aus:

            <li>  
                <img src="foo" alt="bar"/>  
                <p>Lorem ipsum dolor sit amet.</p>  
            </li>  

mit

.horizontalList img  
{  
    float: left;  
    margin: 0 3px 3px 0;  
}

Webkits stellten ohne 'vertical-align: top' die 'li'-Boxen als Treppe dar ...

Workaround für Opera bei unterschiedlich hohen Boxen wäre vertical-align:text-top

... aber damit geben sich Webkits auch zufrieden, ohne Opera durcheinander zu bringen.

molily, du bist ein Held! :-)

Qapla'