Container mit neg.margin bei hover zieht andere Container mit

[Michael]

Hallo

Ich habe diese Frage schon einmal gestellt, aber leider hat sich niemand meines Problems angenommen und der Thread ist sanft aber unbeantwortet ins Nirwana des Archivs hinübergeglitten.

Es geht um folgendes Problem:
Ich habe mehrere nebeneinander liegende Boxen gleicher Art und Größe.
Diese beherbergen später ein Thumbnailbild als link in eine Lightbox-Galerie sowie einen Link zu einem PDF.
Bei hover über der Box soll diese vergrößert werden, aber ihren eigentlichen Platz behalten. Dies habe ich mit negativen margins umgesetzt, das funktioniert nach meinen Tests im Firefox, Opera, Chrome.
Im IE8 hingegen werden die umliegenden Boxen quasi "mit nach oben gezogen" sobald man über einen Container in der ersten Reihe hovert.
Ein reduziertes Beispiel ist unter http://webhouse.at/test/reduced.html zu sehen.
Vielleicht kann mir ja eine(r) von euch den richtigen Wink geben.

Herzliche Grüße
Michael

[Siri]

Hallo,

ich hab gerade leider nur einen IE7 und in dem funktionierts einwandfrei. Was ich dir aber empfehlen würde: Verwende statt der Divs eine Ungeordnete verschachtelte Liste. Das könnte a) Abhilfe schaffen und b) ist's sauberer.

Grüße
Siri

[Michael]

Hallo Siri

Was ich dir aber empfehlen würde: Verwende statt der Divs eine Ungeordnete verschachtelte Liste. Das könnte a) Abhilfe schaffen und b) ist's sauberer.

Abseits der Semantik:
Durch welche Eigenschaft im Speziellen würde dies deiner Meinung nach Abhilfe schaffen? Und warum sollte die Liste verschachtelt sein?

Michael

[Siri]

Hallo,

Durch welche Eigenschaft im Speziellen würde dies deiner Meinung nach Abhilfe schaffen? Und warum sollte die Liste verschachtelt sein?

Ich kann Dir da nur mit Erfahrungswerten kommen. Seit ich in letzter Zeit vieles mit Listen mache, was ich früher mit Divs umgesetzt habe ist das Verhalten berechenbarer bzw. es funktioniert meistens so, wie ich mir das vorgestellt habe.
Das könnte daran liegen, dass die Liste schon per se verschachtelt ist und die Divs nicht, aber beschwören kann ich das nicht!

Schematisch:
<ul class="article">
  <li class="prospektblatt">
    <ul>
      <li>Bildüberschrift</li>
      <li><img ... /><li>
...

Der Inhalt jeder Box ist aus meiner Sicht auch wieder eine Liste.

Grüße
Siri

[Michael]

Hallo Siri

Der Inhalt jeder Box ist aus meiner Sicht auch wieder eine Liste.

Dem kann ich mich, erlich gesagt, nicht anschliessen.
Die Prospektblätter-Divs kann man aber durchaus als unsortierte Liste sehen und sollte dies wahrscheinlich auch tun, daher werde ich das bei Gelegenheit ändern.

Trotzdem wäre ich immer noch neugierig auf die Ursache des beschriebenen Problems im IE

Liebe Grüße
Michael

[Siri]

Hallo

Der Inhalt jeder Box ist aus meiner Sicht auch wieder eine Liste.

Dem kann ich mich, erlich gesagt, nicht anschliessen.

Das geht, nach vielen Diskussionen, die ich hier verfolgt habe, auch schon ins Philosophische ;-)

Trotzdem wäre ich immer noch neugierig auf die Ursache des beschriebenen Problems im IE

Wie gesagt, hab leider keinen IE8 hier zum Testen. Ansonsten würde ich Dein reduziertes Beispiel kurz auf Liste umstellen und mal schauen, was passiert.

Grüße
Siri

[suit]

Dem kann ich mich, erlich gesagt, nicht anschliessen.

Ich auch nicht :)

Die Einzelnen Kästen sind eine Liste ja, der Inhalt selbst lässt sich aber als hx/figure/figcaption/img wesentlich besser beschreiben.

[Siri]

Dem kann ich mich, erlich gesagt, nicht anschliessen.

Ich auch nicht :)

Bist Du sicher? ;-)

[suit]

Bist Du sicher? ;-)

Ja. Denn bei deinem Vorschlag ist irgendwie eine Liste zu viel :)

Für das Problem des OP würde ich diese Struktur wählen:

<ul>  
  <li>  
    <a href="#">  
      <figure>  
         <figcaption>#</figcaption>  
         <img src="#" />  
      </figure>  
    </a>  
  </li>  
  <!-- ... -->  
<ul>

Das 0A, 0B ist offensichtlich eine Nummerierung die sich mit ::marker/::counter oder ggf. ::before auf das lo-Element lösen lässt.

[Michael]

Für das Problem des OP würde ich diese Struktur wählen:

<ul>

<li>
    <a href="#">
      <figure>
         <figcaption>#</figcaption>
         <img src="#" />
      </figure>
    </a>
  </li>
  <!-- ... -->
<ul>

  
Danke für diesen Tip, werde ich bei Gelegenheit umsetzen  
  

> Das 0A, 0B ist offensichtlich eine Nummerierung die sich mit ::marker/::counter oder ggf. ::before auf das lo-Element lösen lässt.  
  
Das leider nicht, es ist keine fortlaufende Nummerierung, sondern muss händisch gelöst werden  
  
Liebe Grüße  
Michael

[suit]

Das leider nicht, es ist keine fortlaufende Nummerierung, sondern muss händisch gelöst werden

Dann halt ein span-Element mit einer sprechenden Klasse drin.

[Malcolm Beck´s]

مرحبا

Im IE8
Vielleicht kann mir ja eine(r) von euch den richtigen Wink geben.

Kompatibilitätsmodus im Internet Explorer 8

Oder einfach per Header (Script oder htaccess) alle IEs auf den neuestem Stand zwingen:

X-UA-Compatible: IE=Edge,chrome=1

mfg

[suit]

Vielleicht kann mir ja eine(r) von euch den richtigen Wink geben.

Könnte ein Problem mit inline-block sein.

[Michael]

Hallo suit

Könnte ein Problem mit inline-block sein.

Inwiefern?
Ein Ändern auf block, brachte keine Verbesserung.
Welcher Wert wäre deiner Meinung nach richtig?

Herzliche Grüße
Michael

[suit]

Inwiefern?
Ein Ändern auf block, brachte keine Verbesserung.
Welcher Wert wäre deiner Meinung nach richtig?

Mit inline-block sollte es schon funktionieren, keine Frage - aber ie6 und 7 hatten mit inline-block einige Probleme und man musste auf inline ausweichen. Das wurde afaik mit IE8 behoben, aber ggf gibts hier noch einen Rest.

Möglicherweise kannst du auch allgemein auf float anstatt inline-block setzen.

[Michael]

Hallo suit,

meine Experimente bringen bis jetzt leider keine Veränderungen.
Auffällig ist aber, dass der Fehler nur auftritt, wenn der margin mit oberen negativem Wert versehen wird. Wenn der obere margin 0 bleibt und das Element sich nur nach unten hin vergößert (ebenfalls mit negativem margin), macht auch der IE alles richtig.
Falls mir nichts Besseres einfällt, werde ich dem IE mit CSS-Hack dieses Verhalten zuweisen.
Die Umstellung auf eine Liste werde ich dennoch vornehmen.

Herzliche Grüße
Michael

[suit]

Falls mir nichts Besseres einfällt, werde ich dem IE mit CSS-Hack dieses Verhalten zuweisen.

Einen CSS-Hack für den IE8 ohne Sytanxfehler kennst du? :)

[Malcolm Beck´s]

مرحبا

Falls mir nichts Besseres einfällt, werde ich dem IE mit CSS-Hack dieses Verhalten zuweisen.
Einen CSS-Hack für den IE8 ohne Sytanxfehler kennst du? :)

Nein! Ich habe fast alle IE-Hacks vergessen (bis auf "* html", "*+html" und Prioritäten überschreiben). Hilf mir auf die Sprünge.

mfg

[Matthias Apsel]

Om nah hoo pez nyeetz, Malcolm Beck´s!

Der IE8 fährt auf multiple Persönlichkeiten ab.

Matthias