Hover Funktion/Webseite für IE anpassen

Tachchen,

ich habe eine Seite erstellt die im Firefox einwandfrei funktioniert. Nun habe ich leidige Thema das der IE nicht mitspielt, allen voran die Hover Funktion. Da ich euch keinen Link zu der Seite geben kann beschreibe ich euch mal den Aufbau. Auf der Seite sieht man ein Bild, welches ein Prozessmodell darstellt. Wenn man nun mit der Maus über ein bestimmten Bereich des Bildes hovert öffnet sich ein menü welches eine Liste mit Verweisen beinhaltet, die sich bei klick in einem neuen tab öffnen. So und das Problem ist beim IE das entweder die Bereiche nicht anerkannt werden oder die Hover Funktion nicht richtig ist. Ich habe die CSS datei auch schon extern ausgelagert.

Hier mal der Code für die Seite:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
<html>
<head>
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Prozesslandschaft FINOW</title>
<script type="text/javascript">
</script>
<link rel="stylesheet" type="text/css" href="fileadmin/media/Finow_Test/css_code.css">
<!--[if IE]><link href="fileadmin/media/Finow_Test/css_code_ie.css" type="text/css" rel="stylesheet"/><![endif]-->
</head>
<body>
<h1 align="center" style="font-family:Arial; font-size:180%; color:#558ED5"><b>Willkommen in der FINOW-Prozesslandschaft!</b></h1>
<div id="test">
<img src="fileadmin/media/Finow_Test/deutsch/FinowProzesslandschaft.png" border="0" width="537" heigth="537" alt="Prozesslandschaft Finow"usemap="#Modell">
<div id="MV">
<ul id="uldef" style="position:absolute; top:26px; left:1px">
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Management_Responsibility_de.pdf" style="color:white" target="_blank">Unternehmensziele</a></li>
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Management_Responsibility_de.pdf" style="color:white" target="_blank">Unternehmenspolitik</a></li> 
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Management_Responsibility_de.pdf" style="color:white" target="_blank">Benchmarking</a></li>
</ul>
</div>
<div id="MB">
<ul id="uldef" style="position:absolute; top:26px; left:1px;">
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Management_Review_de.pdf" style="color:white" target="_blank">Prozessbewertung</a></li>
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Management_Review_de.pdf" style="color:white" target="_blank">Verbesserungsmaßnahmen</a></li> 
</ul>
</div>
<div id="KVP">
<ul id="uldef" style="position:absolute; top:26px; left:1px;">
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/KVP_de.pdf" style="color:white" target="_blank">Kundenzufriedenheit</a></li>
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/KVP_de.pdf" style="color:white" target="_blank">strat. Zielsetzungen</a></li> 
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/KVP_de.pdf" style="color:white" target="_blank">Anpassung Marktlage</a></li> 
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/KVP_de.pdf" style="color:white" target="_blank">Produktmerkmale</a></li> 
</ul>
</div>
<div id="Ziel">
<ul id="uldef" style="position:absolute; top:26px; left:-30px;">
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Zielvereinbarung_de.pdf" style="color:white" target="_blank">systematische Zielvereinbarung</a></li>
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Zielvereinbarung_de.pdf" style="color:white" target="_blank">Form der Ziele</a></li>
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Zielvereinbarung_de.pdf" style="color:white" target="_blank">Personenfestlegung</a></li>  
</ul>
</div>
<div id="PA">
<ul id="uldef" style="position:absolute; top:30px; left:1px;">
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Projektaktivierung_de.pdf" style="color:white" target="_blank">Projektaktivierung/Vertragsprüfung</a></li> 
</ul>
</div>
<div id="AA">
<ul id="uldef" style="position:absolute; top:30px; left:1px; width:150px">
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Angebotsabwicklung_de.pdf" style="color:white" target="_blank">Angebotsprozess</a></li>
</ul>
</div>
<div id="AV">
<ul id="uldef" style="position:absolute; top:30px; left:1px; width:150px">
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Arbeitsvorbereitung_de.pdf" style="color:white" target="_blank">AV</a></li>
</ul>
</div>
<div id="Fert">
<ul id="uldef" style="position:absolute; top:30px; left:1px; width:150px">
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Fertigung_de.pdf" style="color:white" target="_blank">Fertigung</a></li>
</ul>
</div>
<div id="QS">
<ul id="uldef" style="position:absolute; top:30px; left:1px;">
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Qualitaetspruefungen_de.pdf" style="color:white" target="_blank">Qualitätsprüfungen</a></li>
</ul>
</div>
<div id="HR">
<ul id="uldef" style="position:absolute; top:21px; left:1px; width:150px">
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Personal_de.pdf" style="color:white" target="_blank">Qualif. u. Motiv.</a></li>
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Personal_de.pdf" style="color:white" target="_blank">Personalbeschaffung</a></li>
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Personal_de.pdf" style="color:white" target="_blank">Personalinformation</a></li> 
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Personal_de.pdf" style="color:white" target="_blank">Leistungsförderung</a></li>
     <li ><a id="ab" href="fileadmin/media/Finow_Test/deutsch/Personal_de.pdf" style="color:white" target="_blank">Personalentwicklung</a></li>  
 
</ul>
</div>
<div id="IT">
<ul id="uldef" style="position:absolute; top:21px; left:1px; width:150px">
     <li ><a id="ab" href="#" style="color:white" target="_blank">test1</a></li>
     <li ><a id="ab" href="#" style="color:white" target="_blank">testmitlangemtext2</a></li>
     <li ><a id="ab" href="#" style="color:white" target="_blank">test mit text und leerzeichen3</a></li>  
</ul>
</div>
<div id="Main">
<ul id="uldef" style="position:absolute; top:21px; left:1px; width:150px">
     <li ><a id="ab" href="#" style="color:white" target="_blank">Infrastruktur</a></li>
     <li ><a id="ab" href="#" style="color:white" target="_blank">Störungsmeldung</a></li>
     <li ><a id="ab" href="#" style="color:white" target="_blank">Dokumentation</a></li>
     <li ><a id="ab" href="#" style="color:white" target="_blank">Workflows</a></li>  
 </ul>
</div>
<div id="Fin">
<ul id="uldef" style="position:absolute; top:21px; left:1px; width:200px">
     <li ><a id="ab" href="#" style="color:white" target="_blank">Controlling</a></li>
     <li ><a id="ab" href="#" style="color:white" target="_blank">Buchhaltung</a></li>
     <li ><a id="ab" href="#" style="color:white" target="_blank">Management Information</a></li>  
</ul>
</div>
<div id="SCM">
<ul id="uldef" style="position:absolute; top:21px; left:1px; width:200px">
     <li ><a id="ab" href="#" style="color:white" target="_blank">Strategische Beschaffung</a></li>
     <li ><a id="ab" href="#" style="color:white" target="_blank">Lieferanten-Stammdaten-Management</a></li>
     <li ><a id="ab" href="#" style="color:white" target="_blank">Disposition</a></li>  
     <li ><a id="ab" href="#" style="color:white" target="_blank">Logistik</a></li>  
</ul>
</div>
<div id="Mark">
<ul id="uldef" style="position:absolute; top:21px; left:1px; width:150px">
     <li ><a id="ab" href="#" style="color:white" target="_blank">Entwicklung Strategie</a></li>
     <li ><a id="ab" href="#" style="color:white" target="_blank">Handelskonzepte</a></li>
     <li ><a id="ab" href="#" style="color:white" target="_blank">E-Commerce</a></li>  
     <li ><a id="ab" href="#" style="color:white" target="_blank">Öffentlichkeitsarbeit</a></li>
     <li ><a id="ab" href="#" style="color:white" target="_blank">Werbung</a></li>
     <li ><a id="ab" href="#" style="color:white" target="_blank">Verkaufsförderung</a></li>  
     <li ><a id="ab" href="#" style="color:white" target="_blank">New Business</a></li>
</ul>
</div>
<map name="Modell">
<area shape="rect" coords="170,5,368,27"
            href="http://ka-intranet/was-macht-eigentlich/finow/prozessorganisation_de/managementprozesse/" 
            alt="Management Process" title="Managementprozesse">
<area shape="rect" coords="165,82,364,103" 
            href="http://ka-intranet/was-macht-eigentlich/finow/prozessorganisation_de/kernprozesse/"
            alt="Core Process" title="Kernprozess">
<area shape="rect" coords="174,376,372,397" 
            href="http://ka-intranet/was-macht-eigentlich/finow/prozessorganisation_de/unterstuetzungsprozesse/"
            alt="Support Process" title="Unterstützungsprozesse">
</map>
</div>
</body>
</html>

Und hier der Code für die CSS vom IE:

#test{
position:relative;
left:auto;
top:auto;
}
#MV:hover #uldef{display:block;z-index:1}#MB:hover  #uldef{display:block;z-index:1}#KVP:hover #uldef{display:block;z-index:1}#Ziel:hover #uldef{display:block;z-index:1}
#PA:hover #uldef{display:block;z-index:1}#AA:hover  #uldef{display:block;z-index:1}#AV:hover #uldef{display:block;z-index:1}#Fert:hover #uldef{display:block;z-index:1}
#QS:hover #uldef{display:block;z-index:1}#HR:hover  #uldef{display:block;z-index:1}#IT:hover #uldef{display:block;z-index:1}#Main:hover #uldef{display:block;z-index:1}
#Fin:hover #uldef{display:block;z-index:1}#SCM:hover #uldef{display:block;z-index:1}#Mark:hover #uldef{display:block;z-index:1}

#uldef{
display:none;
position:absolute;
color:white;
background-color:#558ED5;
border-width:2px;
border-color:white;
border-style:double;
}

#MV{
position:absolute;
top:32px;
left:19px;
width:138px;
height:26px;
}
#MB{
position:absolute;
top:32px;
left:162px;
width:125px;
height:26px;
}
#KVP{
position:absolute;
top:32px;
left:291px;
width:122px;
height:26px;
}
#Ziel{
position:absolute;
top:32px;
left:417px;
width:107px;
height:26px;
}
#PA{
position:absolute;
top:121px;
left:135px;
width:185px;
height:30px;
}
#AA{
position:absolute;
top:162px;
left:145px;
width:76px;
height:30px;
}
#AV{
position:absolute;
top:207px;
left:202px;
width:80px;
height:30px;
}
#Fert{
position:absolute;
top:247px;
left:269px;
width:92px;
height:30px;
}
#QS{
position:absolute;
top:288px;
left:133px;
width:177px;
height:30px;
}
#HR{
position:absolute;
top:350px;
left:23px;
width:67px;
height:21px;
}
#IT{
position:absolute;
top:350px;
left:95px;
width:66px;
height:21px;
}
#Main{
position:absolute;
top:350px;
left:167px;
width:84px;
height:21px;
}
#Fin{
position:absolute;
top:350px;
left:257px;
width:97px;
height:21px;
}
#SCM{
position:absolute;
top:350px;
left:361px;
width:73px;
height:21px;
}
#Mark{
position:absolute;
top:350px;
left:440px;
width:80px;
height:21px;
}

Muss ich die Hover Funktion bearbeiten oder muss ich die Bereiche anders definieren oder liegt es an was komplett anderes?

Gruß Kolognium

Versuch mal, die Hoveranweisung im CSS unter den Defaultstyle zu setzen.. möglich, dass der IE das sonst überschreibt.
Und die mehrfachen IDs sind hoffentlich nur in deinem Beispiel (alle Listen als id="uldef"). IDs dürfen nur einmalig vergeben werden, für deinen Fall gibt es Klassen (class="uldef").

Okay das mit den id/class hab ich geändert. Ich hatte die verwechselt. #giggle#

Und zu dem defaultstyle muss ich noch sagen, dass es genauso aussieht wie das für den IE, also dort auch die hoveranweisung enthalten ist. Wenn ich die hoveranweisung dem IE-style entnehme macht das keinen unterschied ergo funktioniert nicht im IE. Also muss es irgendetwas anderes im IE-style sein.

Aso und mir ist noch aufgefallen, wenn ich bei dem IE-style den Klassen(MV,AV usw.) eine background-color definiere funktioniert die Webseite mit der Hover-Funktion und allem anderen genauso wie beim firefox nur, dass der div-bereich eine Farbe hat, die ich nicht will da man ja das Hintergrundbild sehen soll. Also brauche ich doch einen Befehl um den Div Bereich sichtbar zu machen, oder nicht?

Der IE 7 (und kleiner) hat tatsächlich ein Problem mit Hovern. Die Lösung hast Du ja gleich selbst gefunden – bei dem Link selbst muss beim Hovern etwas passieren. Du hast es mit „backgroud-color“ und eier Farbe getestet, versuch es mit „transparent“ als Wert. Oder „background: 0 0;“.
Eric Meyers Artikel „Pure CSS Popups“ behandelt genau dieses Thema – falls Du Lesestoff brauchst.

Hi etux, habe deine ideen mal ausprobiert und funktionieren leider nicht. Ich teste das übrigens mit IE9 und werde mir mal den vorgeschlagenen Artikel angucken.

NACHTRAG: Habe mir den Artikel und andere von Eric Meyer durchgelesen, aber auch nichts hilfreiches gefunden. Es muss doch einen Befehl geben der das div durchsichtig erscheinen lässt und trotzdem den hover effekt zulässt.

Hi, ich hab jetzt eine Lösung gefunden die erst mal funktioniert für den IE9.
ich habe bei dem CSS für IE in den div-bereichen jeweils codiert:

filter:alpha(opacity=1);
background-color:white;

So sieht man dann die farbe theoretisch aber sie ist so transparent das man wunderbar das Hintergrundbild sieht und die hover funktion läuft dann auch.

Trotzdem danke für die Tipps und Hilfe.

Gruß Kolognium

Ich hoffe, Du siehst es jetzt ein, wie wichtig es ist, die Version des betroffenen IEs „preiszugeben“.
Ein Link zu Problem-Seite oder zumindest ein Test-Case genau so.
Du hast viele Inline-Style und zeigst den Inhalt der css_code_ie.css nicht, was die Fehlersuche (milde ausgedruckt) erschwert.
Positionierung und Stapelung ist nicht so einfach zu verstehen, wie es scheint. Ich bin mir nicht sicher, ob Du da sattelfest bist.
Opacity ist noch mal eine Wissenschaft an sich – hat mit Transparenz (nicht wie viele glauben) nicht zu tun und formt ein eigenes Stapelkontext.