Hallo Zusammen
Ich habe wiedermal ein Problem mit meinem Menü.
Irgendwie scheint es im IE 7 nicht richtig zu funktionieren.
Hier ist die Seite:
http://www.wild-pharma.com/typo/de/submenu/test.html
Wenn man auf den Menüpunkt fahrt kommt das Untermenü heruntergeklappt.. alles hat prima funktioniert in Safari und FIrefox und ich glaube sogar auch im IE8.
Aber im IE7 passiert folgendes: Wenn man beim herausgeklappten Untermenü auf einen Menüpunkt fährt, der auf höhe des Textelements liegt, verschwindet das Untermenü. Die oberen beiden Untermenü-Punkte kann man noch erreichen. Schön auch der Test beim 1. Menüpunkt wenn man ganz links herunterfährt funktioniert das.
Meine Vermutung ist nun, dass es ein Problem gibt mit dem z-index. Die Platzierungen stimmen eigentlich, aber irgendwo ist der Wurm drin.
Nach vielem googeln und testen habe ich nun eine Lösung für das Ausblend-Problem gefunden. Wenn ich bei "ul.menu ul" "position: relative;" eingebe, funktioniert das mit dem herunterfahren.
Jedoch gibt es dann ein anderes Problem, die Navigation verschiebt sich horizontal in allen Browsern!! (siehe Link zur Webseite).
Ich finde einfach nicht den richtigen Punkt, wie ich die Navigation sowohl fixen als auch sichtbar machen kann.
Kann mir jemand helfen? Ist sicher irgendwie nur ein kleiner Fehler, den ich übersehen habe?!
Danke schön im Voraus!
Hier noch meine Codes:
# Das Hauptmenü erstellen
MENU = HMENU
MENU.special = directory
MENU.special.value = 3
MENU {
### Erste Ebene ###
1 = TMENU
1 {
wrap = <ul class="menu">|</ul>
expAll = 1
NO.wrapItemAndSub = <li onmouseover="show(this)" onmouseout="hide(this)">|</li>
ACT < .NO
ACT = 1
ACT.ATagParams = class="active"
}
### Zweite Ebene ###
2 = TMENU
2 {
wrap = <ul onmouseover="show(this)" onmouseout="hide(this)">|</ul>
NO.allWrap = <li>|</li>
}
}
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dr. Wild & Co. AG</title>
<link rel="shortcut icon" href="fileadmin/pix/favicon.ico"/>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-30215759-1']);
_gaq.push(['_setDomainName', 'wild-pharma.com']);
_gaq.push(['_setAllowLinker', true]);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<style type="text/css">
<!--
#header {
position:absolute;
width:1000px;
height:197px;
z-index:1;
left: 75px;
top: -1px;
}
#Menuzeile {
position:absolute;
width:961px;
height:30px;
z-index:2;
left: 114px;
top: 195px;
}
#MENU-Sprache {
position:absolute;
padding: 7px 10px 7px 10px;
width:218px;
height:30px;
z-index:4;
left: 113px;
top: 195px;
color: #fff;
}
#MENU_Haupt {
margin:0;
padding: 0;
position:relative;
width:775px;
height:30px;
z-index:4;
left: 330px;
top: 195px;
text-align: center;
}
#MENU_Sub {
position:absolute;
padding: 7px 10px 7px 10px;
width:118px;
height:30px;
z-index:4;
left: 926px;
top: 193px;
}
.sprache { color: #FFF;
}
#Schatten {
position:absolute;
width:30px;
height:226px;
z-index:0;
left: 1074px;
top: -1px;
background-image: url(fileadmin/pix/schatten.jpg);
}
#unten {
position:absolute;
width:991px;
z-index:2;
left: 114px;
top: 225px;
height: 100%;
}
-->
</style>
<style type="text/css">
<!--
.colorLINKS {
}
-->
</style>
</head>
<body>
<div>
<div id="header">###BILD###</div>
</div>
<div id="Menuzeile"></div>
<div id="MENU-Sprache">###UMENU### ###SPRACHE### | ###SPRACHE1### | ###SPRACHE2### | ###SPRACHE3###</div>
<div id="MENU_Haupt">
<div align="center">###MENU###</div>
</div>
<div id="Schatten"></div>
<div id="unten">
<table width="991" height="100%"border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10" height="100%" valign="top" class="Balken-links"> </td>
<td width="197" height="100%" valign="top" class="Balken-links"><br />
<br />
<br />
###NEWS### ###SUBMENU###</td>
<td width="10" height="100%" valign="top" class="Balken-links"> </td>
<td width="50" height="100%" valign="top"> </td>
<td width="634" height="100%" valign="top"><br />
<br />
<br />
<span class="colorLINKS">###INHALT###</span><br />
<br />
<br /></td>
<td width="60" height="100%" valign="top"> </td>
<td width="30" height="100%" valign="top" background="fileadmin/pix/schatten.jpg"> </td>
</tr>
<tr>
<td height="30" valign="top" class="Balken-links"> </td>
<td height="30" align="center" valign="top" class="Balken-links">###UMENU2###</td>
<td height="30" valign="top" class="Balken-links"> </td>
<td height="30" valign="top"> </td>
<td height="30" align="center" valign="top">Dr. Wild & Co. AG, Hofackerstrasse 8, 4132 Muttenz/Switzerland, info@wild-pharma.com</td>
<td height="30" valign="top"> </td>
<td height="30" valign="top" background="fileadmin/pix/schatten.jpg"> </td>
</tr>
</table>
</div>
</body>
</html>
a:link { font-size: 13px; color: #fff; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }
a:visited { font-size: 13px; color: #fff; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }
a:hover { font-size: 13px; color: #76b3e3; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-decoration: none;}
a:active { font-size: 13px; color: #76b3e3; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }
body { behavior:url("fileadmin/templates/csshover.htc");text-align: left; color: #333333; font-family: Arial, Helvetica, sans-serif; text-decoration: none; margin: 0; }
input{ font-size: 13px; font-family: Arial, Helvetica, sans-serif; vertical-align:top; margin-top:10px;}
p, td {color: #333333;font-size: 13px; font-family:Arial, Helvetica, sans-serif; padding: 0; margin: 0;}
p {text-align: left; color: #333333; font-size: 13px; font-family:Arial, Helvetica, sans-serif; }
.colorLINKS a {font-size: 13px; color: #76b3e3; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-decoration: none;}
.colorLINKS a:visited { font-size: 13px; color: #76b3e3; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-decoration: none;}
.colorLINKS a:hover { font-size: 13px; color: #0C2C80; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-decoration: none;}
.colorLINKS a:active { font-size: 13px; color: #0C2C80; font-weight: bold; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }
.adress {text-align: center; color: #888888; font-size: 0.85em; }
.sprache {text-align: left; color: #ffffff; font-size: 13px; }
.Balken-links {background-color:#c9cbea;}
#Menuzeile {
background-color:#0C2C80;
}
h1 {color: #0C2C80; font-size: 20px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; border-bottom: 1px solid #E8E9E9;}
h2 {color: #0078A3; font-size: 16px; font-family: Arial, Helvetica, sans-serif;font-weight: bold;}
h3 { color: #ffffff; font-size: 13px; font-family: Arial, Helvetica, sans-serif; font-weight:bold; }
h5 { padding: 3px 6px 3px 6px; color: #ffffff; font-size: 15px; font-family: Arial, Helvetica, sans-serif; font-weight:bold;background-color:#0C2C80; }
h6 {color: #ffffff; font-size: 15px; font-family: Arial, Helvetica, sans-serif; }
li {text-align: left; color: #333333;font-size: 13px; font-family:Arial, Helvetica, sans-serif;}
ul li a:link { font-size: 13px; color: #fff; font-family: Arial, Helvetica, sans-serif; text-decoration: none;}
ul li a:visited { font-size: 13px; color: #fff; font-family: Arial, Helvetica, sans-serif; text-decoration: none;}
ul li a:hover { font-size: 13px; color: #0C2C80; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }
ul li a:active { font-size: 13px; color: #0C2C80; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }
ul a:link { font-size: 13px; color: #fff; font-family: Arial, Helvetica, sans-serif; text-decoration: none;}
ul a:visited { font-size: 13px; color: #fff; font-family: Arial, Helvetica, sans-serif; text-decoration: none;}
ul a:hover {font-size: 13px; color: #0C2C80; font-family: Arial, Helvetica, sans-serif; text-decoration: none; background-color:#c9cbea;}
ul a:active { font-size: 13px; f color: #0C2C80; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }
ul.menu, ul.menu ul {
margin: 0px;
padding:0px;
list-style-type: none;
}
/* 1. Stufe Textplatzierung */
ul.menu a {
display: block;
margin: 0px;
padding: 7px 15px 7px 15px;
font-weight: bold;
}
/* 2. Stufe Textplatzierung */
ul.menu ul a {
margin:0px;
padding: 8px 10px;
font-weight: normal;
}
/* 1. Stufe */
ul.menu li {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
background-image: none;
background-color: #0C2C80;
float:left;
border:0 px solid #fff;
}
/* 2. Stufe */
ul.menu ul {
margin:0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
position: relative;
opacity: 0.8;
filter: alpha(opacity=80);
-moz-opacity: 0.8;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
-khtml-opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
border:1px solid #ffffff;
display:none;
min-width:160px;
}
/* IE-Hack f?r die Breite */
*html ul.menu ul {
width:160px;
height:1px;
}
/* Dies sind die Klassenstile f?r das Untermen? wenn sich die Maus */
/* ?ber der Liste befindet (.hover siehe JavaScript oben) */
ul.menu ul.hover, ul.menu li.hover ul, ul.menu li:hover ul {
display:block;
}
/* 2. Stufe */
ul.menu ul li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
float:none;
background-color: #0C2C80;
}
/******* Formatierungen für das Standard-Kontaktformular ****/
.csc-mailform { border:0px solid silver; padding:20px 0px 0px 20px; margin-top:0px;}
.csc-mailform-field label { font-size: 12px; width: 100px; display:block; float:left; margin-top:15px; text-align:left; }
.csc-mailform-field input { font-size: 12px; color:#7F3F97; margin-bottom:10px;}
.csc-mailform-field textarea { font-size: 12px; color:#7F3F97; margin-bottom:10px;}
.csc-mailform-field select { font-size: 12px; color:#7F3F97; font-weight:bold; margin:12px 0px 0px 0px; margin-bottom:20px; }
/** Checkbox etwas von links einrücken **/
.csc-mailform-check { font-size: 12px; color:#7F3F97; margin-left:20px; }
/** Radio-Knopf-Beschriftung rechts vom Radio-Knopf **/
.csc-mailform-radio { font-size:12px; color:#000000; float:left; display:block; }
.csc-mailform-radio legend { color:#FFFFFF;}
/** Beschriftungsfeld **/
.csc-mailform-label { font-size: 12px; color:#7F3F97; margin-bottom:0px; }
/** Absendebutton **/
.csc-mailform-submit { margin:10px 0px 0px 350px;}