nicht angemeldet
Hover Funktion/Webseite für IE anpassen
0 0 
Gunnar Bittersmann
0
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
-
Moin
einen grundlegenden Fehler habe ich bereits entdeckt. eine ID darf nur ein einziges Mal dokumentenweit vorkommen.
also [...]<a id="ab" href="[...] oder [...]id="uldef"[...]ist schonmal nicht korrekt. Nutze hierfür bitte Klassen, oder andere (kaskadierende) Selektoren.
korrigiere dies zuerst, dann sehen wir weiter. Ich könnte mir vorstellen, dass der z-index hier eine erhebliche Rolle spielt. Diesen interpretiert der IE in einigen Versionen, zuweilen etwas eigenwillig (wir wissen ja nicht welche IE Version du testest)
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
### Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)-
Okay gut, dass mit den id´s guck ich mir mal an, wobei ich gerade bemerkt habe das die id="ab" nur durchs kopieren in den Code geraten ist und die sowieso keine Bedeutung hatte.
Und testen tue ich das momentan mit Firefox 29, wo es funktioniert und dem IE9.
-
-
@@Kolognium:
nuqneH
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Warum verwendest du keinen HTML5-Doctype?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
<html>Das html-Element darf kein weiteres html-Element enthalten.
Die Sprachangabe im xml:lang-Attribut ist falsch.
Es muss heißen (Einzeiler):
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Ich bin noch nicht so erfahren mit dem programmieren und habe deshalb vieles erstmal kopiert aus Vorlagen und da es erstmal funktionierte hab ich das so belassen.
Und danke für die anderen Bemerkungen. hab ich au gleich geändert.
Gruß Kolognium
@@Kolognium:
nuqneH
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Warum verwendest du keinen HTML5-Doctype?
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="de">
<html>Das html-Element darf kein weiteres html-Element enthalten.
Die Sprachangabe im xml:lang-Attribut ist falsch.
Es muss heißen (Einzeiler):
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">Qapla'
-
-
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