Hallo,
ich habe ein kleines CSS-Problem, von dem ich hoffe, dass es hier nicht FAQ ist. Habe quergelesen, bin aber nicht fündig geworden. Ich habe eine Karte, auf der ich mittels <dl><dd> uns CSS Punkte einblende, die bei Maushover ein Popup öffnen, in dem die Bezeichnung erscheint. Natürlich soll das Popup die umliegenden Punkte überdecken, und in Firefox und Opera funktioniert das auch ganz ausgezeichnet. Mein Problem ist der IE - der tut nicht, wie er soll.
Hier ein Screenshot, der das Problem zeigt: http://www.new.roma-antiqua.de/screenie.jpg
Hier mein HTML/PHP (gekürzt auf ein Beispiel:):
<div id="ex">
<dl id="map" style="<?php echo "width: ".$width."px; height: ".$height."px; background: transparent url(".$file.") no-repeat top left;";?>">
<dd id="a"><a href="/antikes_rom/forum_romanum"><span>Forum Romanum</span></a></dd>
</dl>
</div>
Hier mein CSS:
dl#map{
margin: 0;
padding: 0;
position: relative;
}
dd {
margin: 0;
padding: 0;
position: absolute;
}
dd a {
position: absolute;
width: 8px;
height: 8px;
text-decoration: none;
border: 2px solid Black;
background-color: Yellow;
}
dd a span {
display: none;
}
dd a:hover {
position: absolute;
border: 2px solid #990000;
background-color: #990000;
z-index: 100;
}
dd a:hover span {
display: block;
text-indent: 0;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 10px;
vertical-align: top;
color: #000;
background-color: #FFFFFF;
position: absolute;
border: 1px solid #990000;
top: 0px;
left: 20px;
margin: 0;
padding: 4px;
width: 120px;
z-index: 100;
}
Und über eine weitere CSS-Datei wird den Punkten eine Position zugewiesen:
dd#a { left: 335px; top: 302px; }
Was kann ich machen, um auch den IE dazu zu bewegen, die Popups im Vordergrund anzuzueigen?
Vielen Dank und herzliche Grüße
Sven