hasLayout Problem mit "Ulles" hover Bildergalerie
 

Hallo zusammen!
Ich komme eigentlich aus der printwelt und habe html nie geliebt, bis ich als Leseratte zufällig auf ein css-Buch (zengarden) gestoßen bin. Seitdem bin ich fasziniert von den Möglichkeiten und probieren Vieles aus. Am liebsten natürlich in einem echten Projekt. Benutze als css editor noch GoLive.

Die Seite steht unter Alfons Helmer Architekt Ibbenbüren

Ich habe so einiges entwickelt und gemerkt, dass alles gut klappt, bis auf die Umsetzung im IE.
Mit den * hacks habe ich dem IE fixe Bereiche beigebracht.

Beim jetztigen Stand des Projekt bin ich an einer Bildergalerie angelangt, die beim hovern die großen Bilder anzeigt. Angeregt wurde ich durch die webseite von fotolia.com und möchte daher auf window.open und Javascript verzichten.
So habe ich ulles Bildergalerie gefunden und eingebaut. Auch die Modifizierung ging schnell und im FF sieht es so aus wie es soll. Die Beispielseite befindet sich im Menüpunkt "denkmalgeschütze Bauten"

Doch leider merkt sich der IE wohl hasLayout an mir unbekannten Stellen. Ich probiere schon drei Tage herum. Es gibt gleichzeitig mehrere Probleme.:
1.) Das gehoverte Bild lässt sich nicht per Z-Index in die oberste Ebene stellen
2.) Nach dem durchhovern aller Bilder werden die Bilder gar nicht mehr ausgewechselt. Erst nach einen reload der Seite kann man neu beginnen.
3.) Die einzublendende Bildunterschrift erscheint zwar regelmäßig beim hovern, aber nicht unter dem Bild, sondern rechts und unter dem Bild.

Die Fehler sehe ich im IE 6, nicht aber im FF 2. Wenn möglich möchte ich das markup so lassen. Ulles Bildergalerie alleine funktioniert bei mir auch im IE, daher glaube ich dass es an meiner gewählten Verschachtelung liegt. Hat jemand so viel technisches Verständnis, wie man das Ergebis auch für den IE besser hingekommt? Ich hoffe ich habe mich richtig erkären können.
Vielen Dank im Voraus, sollte es klappen.
Gruß regioprint

Z Index geht noch nicht
 

Habe die meisten Probleme selber gelöst.

Es liegt einfach an der unvorhersehbaren Eigenschaft von Layout in manchen Einstellungen. habe daher das markup ein wenig geändert.

Das Problem, das bleibt, ist die Stapelung, die sich im IE nicht durchführen lässt. Auch wohl aufgrund meiner Verschachtelungen und der Unmöglichkeit den Z-Index für den "dummy-text" tiefer zu bestimmen, als das darüber zu platzierende Bild.

Zur Übersicht habe ich die IE.css eingeführt, in der nur die Formatierungen für die Bildergalerie stehen. Hier müsste es gelingen können, die Z-Stapeliung zu beeinflussen.

Leider weiss ich noch nicht, wie ich hier die Sachen übersichtlicher reinbringen kann. sorry

/* Anfang der Bildergalerie = Sonderangaben für den Internetexplorer*/
* html #Inhalt { margin-left: 20px; position: absolute; z-index: 0; top: 120px; left: 0; overflow: auto }
* html #gallery_position { }
* html #gallery { margin-left: 18px; position: relative; top: 460px; left: 5px; width: 920px; height: 150px }
* html #gallery img { margin: 20px; width: 400px; height: 300px; border: solid 1px #000000 }
* html #gallery a, #gallery a:visited /* kleine Bilder, Rand und Abstand, nebeneinander angeordnet */ { text-decoration: none; width: 100px; height: 75px; float: left; border: solid 1px #000000 }
* html #gallery a span /* große Bilder werden nicht angezeigt hier darf bei witdt und heigt nichts stehen, sonst bekommen wir ungewünschtes LAYOUT */ { display: none }
* html #gallery a span img /* bestimmt die Größe des angezeigten Großen Bildes an */ { width: 400px; height: 300px; margin: 0; border: solid 1px #000000 }
* html #gallery a:hover, #gallery a:focus, #gallery a:activ /* macht beim hovern nur den Rand der kleinen Bilder unsichtbar (weiss) */ { border: solid 1px #ffffff }
* html #gallery a:hover span, #gallery a:focus span, #gallery a:active span /* positioniert das große Bild beim hovern nach oben, Anzeige Block ist zwingend, über z-index wird die Stapelung festgelegt */ { display: block; position: absolute; z-index: 2; top: -335px; left: 375px; width: 402px }
* html #gallery a:focus span, #gallery a:active span { z-index: 1 }
* html .Text_Bild_vor_Umbau { color: #066; font-size: 80%; line-height: 125%; text-align: center; visibility: visible }
* html .Text_Bild_nach_Umbau { color: #066; font-size: 80%; font-weight: 500; text-align: center }
* html .einzeln-rechts { visibility: hidden; position: absolute; z-index: 0; top: 6px; left: 380px; border: ridge 1px #5274fe }
/* Ende der Bildergalerie*/
* html #nav-unten { color: #000; font-size: 0.7em; visibility: visible; position: absolute; top: 580px; left: 500px }
* html #dummy-text { visibility: visible; position: absolute; top: 250px; left: 530px }
* html #dummy-text p { color: gray; font-size: 60%; text-align: left }

Welches der genannten Probleme ist im Moment im IE6 noch aktuell?

Mit Stapelproblem meinst du, dass der Text "Vergrößerung Bildleiste unten" über dem Bild liegt, oder?

Erstmal solltest du das hier rausnehmen:
Das schmeisst den IE6 nämlich in den Quirksmodus, in dem er das CSS Boxmodel falsch interpretiert, womit du dann noch mehr Kummer hast.

Vergiss auch nicht, dass es mittlerweile den IE7 gibt ... schonmal gesehen, wie deine Website in diesem aussieht?

Nö ... mit margin und padding werden nur die Standardabstände auf 0 gesetzt, das hat nichts mit Fehlern zu tun. :D

Vielleicht, aber diese Methode des Frame-layouts funktioniert im IE6 nur im Quirksmodus.

Noch aktuelles "Stapelproblem"
 

Ja, das meine ich. Eigentlich soll ein Bild statt des Textes permanent zu sehen sein. Wenn man mit dem Mauszeiger unten in der Bildleiste hovert, soll ein neues Bild oben darüber gelegt werden. Das wollte ich mit dem Z-index erreichen, geht aber nicht. Im FF geht es aber.

ggfs. z-index anpassen.

Quirksmodus!?
 

[QUOTE=Boris;376563]Erstmal solltest du das hier rausnehmen:
Das schmeisst den IE6 nämlich in den Quirksmodus, in dem er das CSS Boxmodel falsch interpretiert, womit du dann noch mehr Kummer hast.

Vergiss auch nicht, dass es mittlerweile den IE7 gibt ... schonmal gesehen, wie deine Website in diesem aussieht?

Hallo Boris, ich habe die Zeile seinerzeit bewusst eingefügt, damit ich den Quirksmodus bekomme. Grund ist, dass ich dann schon bei mir sehen kann, wie sich die Seite in älteren Browsern darstellt. An den IE 7 hatte ich noch gar nicht gedacht. Ich habe auch bewusst nur den IE 6 auf meinem System, weil ich denke, dass noch nicht Viele und auch nicht schnell auf eine höhere Version umsteigen. Kannst Du mir sagen, ob die Seite im IE 7 passt?
Meinst Du ich sollte den Quirksmodus jetzt wieder generell abstellen?