Zur Navigation

IE bringt mich um den Verstand!

1 kadees

Hallo,
bin am Entwurf einer Foto-/Grafikgalerie. CSS-Vorlage sollte Photozoom sein, hatte mich beeindruckt weil es eine reine CSS-Lösung ist. Also eingebunden in meine HP und im FF, Opera und Safari (alle unter WinXP/SP2) angeguckt, alles klar, klappt! Erste Ernüchterung im IE7, 6 und 5.5, beim hovern über die Vorschaubilder ein einziges "gezappel", allerdings nur bei den nach rechts gefloateten Bildern! Bin nun schon einige Tage dran dieses Problem zu fixen, allerdings bin ich nun mit meinem Latein am Ende.

Aktueller Stand:
IE7:
* zeigt beim hovern kein "zappeln" mehr
* beim hovern auf der rechten Seite überlagert dafür das hover-Bild die Vorschaubilder nicht!

Aktueller Stand erreicht durch Änderung von:
...
html>/**/body .PZ3-r { position: relative; }
...
html>/**/body .PZ3-r a { right: 0; }
...
nach:
html>body .PZ3-r { position: relative; }
...
html>body .PZ3-r a { right: 0; }

IE6 und IE5.5:
* überlagern beim hovern die Vorschaubilder, wie die "guten" Browser auch.
* beim hovern über die Vorschaubilder ist das "zappeln" immer noch vorhanden, lässt sich aber durch einen Klick auf eine x-beliebige Stelle auf der Seite abstellen! 8(

Wie kann ich das merkwürdige Verhalten des IE abstellen?

Die Testseite findet ihr hier: kadees.de - Fotografie

Edit:
Wie nennt sich dieser "Hack" und was bewirkt er?
html>/**/body

Edit2:
Hier der aktuell verwendete Code:

.PZ3-l { float: left; margin: 10px 10px 10px 0; }

.PZ3-r { float: right; margin: 10px 0 10px 10px; direction: rtl; }

  html>body .PZ3-r { position: relative; }

.PZ3zoom { border: 1px solid #000; }

.PZ3zoom a,.PZ3zoom a:visited {
	padding: 0;
	width: 100%;
	display: block;
	text-decoration: none;
	overflow: hidden;
	height: 100%;
}

  html>body .PZ3-r a { right: 0; }

.PZ3zoom a:hover {
	padding: 0;
	width: auto;
	border: 20px solid #000;   
	margin: -1px -1px 0 -1px;
	background: none;
	position: absolute;
	z-index: 999;
	cursor: default;
	height: auto;
	overflow: visible;
	text-decoration: none;
}

  html>body .PZ3zoom a:hover { margin: -1px -1px 0 -1px; }

.PZ3zoom a img { border: 0; width: 100%; height: 100%; }

.PZ3zoom a:hover img { width: auto; border: 0; height: auto; margin-bottom: -5px; }

.Lnk a:hover { cursor: default }
und

<p class="PZ3zoom PZ3-r Lnk" style="width:167px; height:124px; padding-bottom: 0;">
  <a href="#" onclick="return false">
    <img src="pix/2001.03.18_baumpilze_whyler_wald.jpg" alt="PZ3 demo #2" title="">
  </a>
</p>

Gruß Dieter

23.09.2007 15:16 | geändert: 23.09.2007 15:37

2 Jörg

Hallo Dieter,

kann das Gezappel beim IE 6 vielleicht auch daher rühren, dass er beim Hover das Hintergrundbild jedesmal neu lädt? Ich hatte nämlich schon mal so ein Problem, welches ich (inklusive Worlkaround) hier beschrieben habe:

Der IE 6, Hintergrundbilder und Hover

23.09.2007 18:59 | geändert: 23.09.2007 19:00

3 kadees

Zitat von Jörg
kann das Gezappel beim IE 6 vielleicht auch daher rühren, dass er beim Hover das Hintergrundbild jedesmal neu lädt?
Nö, muss was anderes sein, da das Bild ja schon geladen ist, die Vorschau wird nur runterskaliert, es wird kein neues Bild geladen!

Das Problem im IE>6 kann man so am besten nachvollziehen:
Mit dem Cursor zügig in eins der rechten Vorschaubilder fahren, dann schön langsam wieder zurück in die rechte obere Ecke. Sobald man nun auf den schwarzen Rand (border) trifft beginnt die "Zappelei"!

Vermute eher, dass es irgendwie mit dem Box-Model zusammenhängt, weil wenn man die hover-Bilder anklickt
- in allen IEs nur das Bild markiert wird, ohne den Rahmen (border) und
- im FF wird das Bild inklusive Rahmen markiert!

Gruß Dieter

23.09.2007 22:34

4 Jörg

Nö, muss was anderes sein, da das Bild ja schon geladen ist, die Vorschau wird nur runterskaliert, es wird kein neues Bild geladen!

Dass das Bild bereits geladen ist, interessiert den IE6 in bestimmten Hover-Fällen nicht, und er lädt - obwohl unnötig - das Bild ein zweites Mal, das macht den von mir beschriebenen Bug ja aus. Aber hier meintest du ja einen anderen Effekt, den ich jetzt auf der Originalseite im IE 6 auch nachvollziehen konnte.

Mit dem von dir in Beitrag 1 geposteten Code-Abschnitt alleine ist das Problem allerdings nicht reproduzierbar, d.h. das Gezappele wird noch durch einen anderen Code-Abschnitt getriggert.

Vermute eher, dass es irgendwie mit dem Box-Model zusammenhängt,

Ja, der IE verwendet das Box-Model falsch, wenn er sich im Quirks-Mode befindet. Der IE 6 rutscht dorthin, wenn sich die stricte Doctype-Angabe nicht in der erste Zeile befindet, was auf deiner Seite der Fall ist.

Edit:
Allerdings scheint auch der Quirks-Mode nicht auszureichen, um das Problem zu reproduzieren - es tritt unabhängig davon auf

24.09.2007 07:42 | geändert: 24.09.2007 07:43

5 Jörg

Ich denke, ich habe die Trigger gefunden:

wenn du mal testweise die text-align Angaben der übergeordneten Elemente auskommentierst, so sollte das Problem nicht mehr auftreten

body {
   color:#333;
	background: #fff url(pix/bg_3.jpg) repeat-x top center;
	font:100.01%/100% "Trebuchet MS", Tahoma, Arial, Helvetica, sans-serif;
	/*text-align:center;*/
	min-height: 101%;
	padding-bottom: 1em;
}

#wrapper1 {
	margin: 0 auto;
	color: #333;
	background-color: transparent;
	min-width: 45em;
	max-width: 65em;
	height: 100%;
	/*text-align: left;*/
}

#content {
 line-height:1.3;
	/*text-align:left;*/
	color:#000;
	background-color: #fff;
	margin:0 0 0 16em;
	padding: 1em 1em 0 1em;
	/*border-left: 1px solid #ccc;*/
	border-top: 1px solid #ccc;
}

Möglicherweise arbeitet der IE nacheinander diese Ausrichtungen ab, bevor das Bild stehen bleibt?

24.09.2007 08:15

6 kadees

Möglicherweise arbeitet der IE nacheinander diese Ausrichtungen ab, bevor das Bild stehen bleibt?
Nö, scheint mir im IE6 irgendwie mit dem Border zusammenzuhängen. Habe nun festgestellt, dass dieser Effekt nur auftritt, wenn die Borderbreite größer als 1px ist.
Dieser Effekt ist schon seltsam: fahre mal im IE6 ganz langsam, sozusagen im Pixeltakt, über den dicken schwarzen Rand und schau was passiert:
1.Pixel: Das Hoverbild springt nach links -genau um die Breite des Vorschaubildes-, der (leere) Rahmen des Vorschaubildes wird sichtbar.
2.Pixel: Das Hoverbild verschwindet, es ist nur noch das Vorschaubild zu sehen.
3.Pixel: Das Hoverbild erscheint an der vorgesehenen Stelle!
usw. usw.
Und was dem ganzen die Krönung aufsetzt: ein Klick mit der Maus auf eine x-beliebige Stelle auf der Seite beendet den ganzen Spuk.

Gruß Dieter

24.09.2007 14:30 | geändert: 24.09.2007 14:31

7 Jörg

Nö, scheint mir im IE6 irgendwie mit dem Border zusammenzuhängen.

Heißt das "nö", dass du die drei text-align Angaben wie von mir beschrieben auskommentiert hast, und das Bild zappelt immer noch? Ich habe die Seite nachgebaut, so dass der Bug so funktioniert, wie du es jetzt auch in deinem letzten Beitrag beschrieben hast. Nach dem Auskommentieren aller drei Angaben trat der Bug in meinem IE 6 nicht mehr auf - wenn nur zwei oder weniger auskommentiert sind, zappelt das Bild beim Hover. Vielleicht hängt dieser Bug auch mit der border zusammen - die text-align Angaben der übergeordneten Elemente scheinen mir nach meinem Test mit dem IE 6 dieses Problem aber zumindest mit zu verursachen - oft haben solche Bugs ja mehrere Auslöser (was dann aber auch mehr Optionen für einen Workaround schafft).

24.09.2007 15:19

8 kadees

"nö" sollte heissen: Ja, habe alle text-align Angaben auskommentiert und es hat sich nix geändert.

Ich habe mir das CSS noch mal angeschaut und dann überlegt, was passiert wenn ich die border-Angaben ändere:
Original:
.PZ3zoom a:hover {
...
border: 1px solid #000; 
...
}
.PZ3zoom a:hover img { 
...
border: 0;
...
}

Änderung:
.PZ3zoom a:hover {
...
border: 0; 
...
}
.PZ3zoom a:hover img { 
...
border: 10px solid #000;
...
}
und siehe da: in allen IEs >= 6 keine Zappelei mehr, alles wird korrekt angezeigt. lol

Das nächste was ich nun angehen will sind die Darstellungsfehler im IE7:
Im IE7 spielt sich folgendes -und auch nur auf der rechten Seite- ab: screenshot
Das linke Vorschaubild wird beim hovern überdeckt, was ja auch richtig ist, aber auf der rechten Seite klappt das nicht. Kein Plan im Moment... :(

Gruß Dieter

24.09.2007 20:18

9 kadees

Zitat von jörg
Der IE 6 rutscht dorthin, wenn sich die stricte Doctype-Angabe nicht in der erste Zeile befindet, was auf deiner Seite der Fall ist.
Das ist richtig, aber bisher habe immer nur gelesen, dass ein Kommentar vor den Doctypeangaben -wie z.B. bei Stu Nicchols- die IEs>=6 in den Quirks-Mode setzen. Beispiel:

<!-- Set IE in Quirks-Mode -->
<!DOCTYPE ... >


Gruß Dieter

24.09.2007 20:43

10 Rudy

Um sicher zu gehen kannst Du das überprüfen mit <script type="text/javascript">alert(document.compatMode);</script>

Allerdings sind die Border-Box-Fehler von IE im Quirks-Mode kaum zu übersehen ;)

24.09.2007 21:03