"Slider"-div

[equinox]

Hallo,

ich möchte meine Seite irgendwie cross-Browser kompatibel bekommen. Das einzige was mir noch fehlt ist folgendes:
http://equinox.lichtspiele.org/somali/index.php?show=gallery&gal=Album

Unten ist ein Slider zu sehen, den ich mit einem div realisiert habe:

.slider {
        overflow: scroll;
        width: 100%;
        height: 80px;
        overflow-y: hidden;
        white-space: nowrap;
}

<div class="slider"> ... </div>

Das ganze wird im IE7 sowie Firefox korrekt dargestellt, lediglich der IE6 bekommts nicht ganz hin, da das slider-div bis nach rechts zum nächsten div-Rand expandiert wird. Wie bekommt man das für den IE6 noch sauber hin?

Ich bin kein CSS-Experte, daher ist mich hier ans Forum zu wenden meine letzte Möglichkeit die Seite schön hinzukriegen. Wenn mir da jemand ne Lösung für geben kann wär das total super =D

Danke und Gruß
equinox

[Gernot Back]

Hallo equinox,

ich möchte meine Seite irgendwie cross-Browser kompatibel bekommen. Das einzige was mir noch fehlt ist folgendes:
http://equinox.lichtspiele.org/somali/index.php?show=gallery&gal=Album

Unten ist ein Slider zu sehen, den ich mit einem div realisiert habe:

.slider {
        overflow: scroll;
        width: 100%;
        height: 80px;
        overflow-y: hidden;
        white-space: nowrap;
}

<div class="slider"> ... </div>

Vielleicht solltest du mit Rücksicht auf IE6 alles in ein weiteres DIV-Element schachteln: Dem inneren gibst du white-space:nowrap; height:80px; overflow:hidden; und dem äußeren die gewünschten oben stehenden Width- und Overflow-Eigenschaften.

Gruß Gernot

[equinox]

Vielleicht solltest du mit Rücksicht auf IE6 alles in ein weiteres DIV-Element schachteln: Dem inneren gibst du white-space:nowrap; height:80px; overflow:hidden; und dem äußeren die gewünschten oben stehenden Width- und Overflow-Eigenschaften.

Gruß Gernot

Hallo,

also das funktioniert jetzt, vielen Dank.
Kannst Du mir noch sagen *warum* es nur so funktioniert?

Achso, da fällt mir noch ein: Der IE6 verbaselt die GIFs im Dropdown-Menü oben mit einem grau-blauen Hintergrund. Ist das ein M$-Feature oder sind die GIFs kaputt (die in jedem anderen Browser korrekt angezeigt werden)?
Ausserdem kann man die Untermenüpunkt nicht richtig hovern, da diese sofort wieder verschwinden, wenn man den Mauszeiger z.B. vom ersten auf den zweiten Menüunterpunkt bewegt.

Nochmals vielen Dank und Gruß
equinox

[Gernot Back]

Hallo equinox,

also das funktioniert jetzt, vielen Dank.
Kannst Du mir noch sagen *warum* es nur so funktioniert?

Also manches kann man beim IE eben nur mit Gefühl regeln, so auch dies. Ich habe ja noch nicht mal einen zur Hand hier zuhause. Dem inneren DIV Höhenbegrenzung und overflow:hidden in Verbindung mit white-space:nowrap führt am sichersten dazu, dass nichts umbricht und alles innerhalb des so erzeugten block-formatting Kontexts bleibt. Vielleicht hätte es die Height-Angabe und das overflow:hidden aber noch nicht einmal gebraucht, du kannst es ja mal ausprobieren, was passiert, wenn du eins nach dem anderen weglässt und uns dann berichten.

Achso, da fällt mir noch ein: Der IE6 verbaselt die GIFs im Dropdown-Menü oben mit einem grau-blauen Hintergrund. Ist das ein M$-Feature oder sind die GIFs kaputt (die in jedem anderen Browser korrekt angezeigt werden)?
Ausserdem kann man die Untermenüpunkt nicht richtig hovern, da diese sofort wieder verschwinden, wenn man den Mauszeiger z.B. vom ersten auf den zweiten Menüunterpunkt bewegt.

Wie gesagt zu beidem kann ich mangels IE6 nicht wirklich was sagen, kommt mir auch ziemlich merkwürdig vor. Es ist aber für den IE grundsätzlich ungünstig, dem A-Element selbst ein Hintergrundbild zuzuweisen, das im Hover-Zustand ausgetauscht wird. Der IE sendet da ja je nach Browsereinstellungen jedesmal eine Anfrage zum Server und wartet auf Antwort, ob das Bild sich nicht nach dem letzten Hovern vielleicht geändert haben könnte...

Besser weist du das Hintergrundbild einem Nachfahrenselement des A-Elements zu. Ein solches Nachfahrenselement hast du ja sogar jetzt schon in deinem Quellcode in Form eines SPANs.

Gruß Gernot

[equinox]

Wie gesagt zu beidem kann ich mangels IE6 nicht wirklich was sagen, kommt mir auch ziemlich merkwürdig vor. Es ist aber für den IE grundsätzlich ungünstig, dem A-Element selbst ein Hintergrundbild zuzuweisen, das im Hover-Zustand ausgetauscht wird. Der IE sendet da ja je nach Browsereinstellungen jedesmal eine Anfrage zum Server und wartet auf Antwort, ob das Bild sich nicht nach dem letzten Hovern vielleicht geändert haben könnte...

Besser weist du das Hintergrundbild einem Nachfahrenselement des A-Elements zu. Ein solches Nachfahrenselement hast du ja sogar jetzt schon in deinem Quellcode in Form eines SPANs.

Gruß Gernot

Hi,

ich hab jetzt beim Menüpunkt "Katzen" die id vom a-Element auf das span-Element gemacht, allerdings wird das Bild dann gar nicht mehr angezeigt, also in gar keinem Browser, was ich allerdings nicht verstehe, denn span sollte ja background-image können. Was ist daran jetzt falsch?

[Gernot Back]

Hallo equinox,

ich hab jetzt beim Menüpunkt "Katzen" die id vom a-Element auf das span-Element gemacht, allerdings wird das Bild dann gar nicht mehr angezeigt, also in gar keinem Browser, was ich allerdings nicht verstehe, denn span sollte ja background-image können. Was ist daran jetzt falsch?

Der IE-Workaround ist ja, dem A-Element das normale Hintergrundbild zuzuweisen und dem Nachfahrenselement im Hover-Zustand, das darüber liegt und dieses überdeckt, das Hover-Bild und sonst kein Bild. Auf diese Weise wird immer ein Bild angezeigt, bei Hover ggf. überdeckt durch das Hintergrundbild des Nachfahrenselementes.

Gruß Gernot

[equinox]

Das Untermenü hat doch gar keine Hovereigenschaft, oder reden wir beide jetzt vom selben?