IE bringt mich um den Verstand!

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>

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!

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?

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).

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 ... >