IExplorer 6.0 macht kein css-mouse over

funkyfloh

Hallo zusammen

Ich habe folgendes Problem auf dieser Webseite: http://www.klara-agentur.de/de/z_hamburg.htm

Unter "Bilder" kann man in allen möglichen Browsern über die kleinen Bilder fahren, und diese werden dann im rechten Fenster groß angezeweigt.
Ich musste aber leider gerade feststellen, daß der Internetexplorer 6.1 das nicht versteht.
Habe auch schon bei Google geschaut, und mehrere Leute entdeckt die ein ähnliches Problem haben, aber auf die schnelle keinen konkreten Lösungsvorschlag gefunden.

Wär super wenn ihr mir helfen könntet!!

Hier noch der Code von der Webseite:

Code

<div id="galerie" border="0px"cellpadding="0px" cellspacing="0px">

<a href="#">[img]../bilder_klein/hh_altepost.jpg[/img]<span>[img]../bilder_orig/hh_altepost.jpg[/img]



Alte Post</p></span></a>






<a href="#">[img]../bilder_klein/hh_hafen_klemme.jpg[/img]<span>[img]../bilder_orig//hh_hafen_klemme.jpg[/img]


                                                            


Hafen</p></span></a>




<a href="#">[img]../bilder_klein/hh_sandtorkai.jpg[/img]<span>[img]../bilder_orig/hh_sandtorkai.jpg[/img]


                                                            


Sandtor Kai</p></span></a>




    
<a href="#">[img]../bilder_klein/hh_bremer_stadtmusikanten.jpg[/img]<span>[img]../bilder_orig/hh_bremer_stadtmusikanten.jpg[/img]


                                                            


Bremer Stadtmusikanten</p></span></a>






<a href="#">[img]../bilder_klein/hh_bremen_rathaus.jpg[/img]<span>[img]../bilder_orig/hh_bremen_rathaus.jpg[/img]


                                                            


Rathaus Bremen</p></span></a>




 
  </div>


   <div id="rahmen">
     <p style="font-style:italic;">Fahren sie mit der Maus 
 über die Bilder, um diese 
 in einer gößeren Ansicht 
 zu betrachten.</p>
    </div>

Alles anzeigen

Und hier die Stylesheets dazu:

Code

div#galerie img {border-style:solid; border-width:1px; border-color:white; margin-bottom:3px; } 
div#galerie a span {display: none; color:#0006EB;}


div#galerie {text-align:center;
             padding:5px;
	         width:114px;
	         background-color:#DFE0F2; }
div#galerie a:hover span  {display: block;
                            text-decoration:none;
                            height:550px;
                            width:400px; 
                            border: none;
	                        z-index:1;}
div#rahmen     {text-align:center;
                 height:380px;
                width:415px; 
                padding-top:30px;
				border: solid 1px;
	            z-index:0;}

Alles anzeigen

Ausserdem gebe ich die Position des Rahmens in der jeweiligen Datei selbst an:

Code

<style type="text/css">


 div#galerie a:hover span  {position: absolute; 
                            top: 1055px; 
                            left: 533px;}


 div#rahmen                {position: absolute; 
                            top: 1050px; 
                            left: 525px;  }


</style>

Alles anzeigen

DeadEye

Servus,

schlage mich derzeit bei einem Projekt mit dem gleichen Problem herum. Abhilfe schafft hier glaube ich nur JavaScript, der IE 6.x ist zu "blöd" für css. Notfalls einen Link einbinden, der auf eine extra-Galerie oder ein PopUp verweist, in der/dem die Bilder dann für Nutzer des IE groß zu sehen sind.

Etwas anderes hab ich leider nicht in der Hinterhand, sollte jemand eine elegantere Lösung dafür haben ... her damit

Servus Dead Eye

Ich glaube auch daß das mit einer kleinen extra Galerie die einfachste Lösung ist.
Nur weil der Explorer zu blöd ist, fange ich jetz nicht mit Java Script an.....

Aber vielleicht hat ja doch noch jemand ne Idee.

N schönen Sonntag noch!

funkyfloh

Sorry, das war kein Gast, das war ich.
Bin nur direkt von meiner Benachrichtigungs-Email hier hergekommen und war nicht eingelogged.

sejuma

Hilft das weiter?

Code

<style type="text/css"> 


a.info{ 
    position:relative; 
    z-index:1; 
    color:#000; 
    text-decoration:none} 


a.info:hover{z-index:2;background-color:#fff;} 


a.info span{
display: none;
} 


a.info:hover span{ 
    display:block; 
    position:absolute; 
background-image: url(bildgross.jpg); 
    top:100px; left:200px;width:250px; height:300px; 
     } 


</style>

Alles anzeigen

Code

<a class="info" href="#">[img]bildklein.jpg[/img]
<span></span></a>

funkyfloh

JAAA!!!

Es hilft! Der Code an sich funktioniert auf jeden Fall einwandfrei mit Explorer 6. Werd mal versuchen das ganze in das Projekt einzubauen....

Danke!!

DeadEye

sejuma,

sauber, danke dir!

Eigentlich logisch ... wenn man einem beliebigen Element beim IE kein :hover zuweisen kann, dann halt aufs Altbewährte zurückgreifen und ein a:hover nutzen ...

Aus diversen Gründen hilft mir ein Hintergrundbild nicht weiter (ich lade von CD, ein Bild ist bei mir skaliert Thumbnail, mittlere Version und am Ende in einem Album nochmal 1:1 für alles zuständig ... Ladezeiten wie im Netz gibts da ja nicht ...), zudem müsste ich bei der Variante mit Hintergrundbild jedem Link eine neue Klasse zuweisen, was sich bei Verwaltung über ausgelagerte *.css-Datei als sehr umständlich erweist, wenn man mehrere Seiten mit je vier unterschiedlichen Bildern erstellt.

mein css-Schnipsel

Code

a.info {
	margin:10px 0 10px 10px;
}
a.info:hover {
	z-index:500;
	background-color:#fff;
}
a.info span {
	display:none;
}
a.info:hover span {
	display:block;
	width:512px;
	height:384px;
	position:absolute;
	bottom:25px;
	right:25px;
	padding:0;
	margin:0;
}

Alles anzeigen

An sich das Gleiche wie oben, nur ohne Hintergrundbild. Die Bilder werden auf jeder Seite einzeln eingefügt, wodurch eine Klasse für alle Seiten reicht:

Code

<a class="info" href="#">
  [img]bild_klein.jpg[/img]
  <span>
    [img]bild_mittel.jpg[/img]
  </span>
</a>

... jo, geht wunderbar in FF und IE ... Opera hoffentlich auch

Danke nochmals

Tags