Hover Funktion/Webseite für IE anpassen von Kolognium, 02.06.2014 07:53

Hover Funktion/Webseite für IE anpassen

Kolognium 02.06.2014 07:53

browser

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

Beitrag melden

– Informationen zu den Bewertungsregeln

SELFHTML Forum - Ergänzung zur Dokumentation Übersicht

Kolognium: Hover Funktion/Webseite für IE anpassen

Beitrag lesen

Hover Funktion/Webseite für IE anpassen

Hover Funktion/Webseite für IE anpassen