Hallo Zusammen
Ich habe ein kleines Problem und finde und finde einfach keine Lösung.
Meine Webseite ist mit HTML gelöst in Typo3 - jedoch das Menü ist im CSS definiert.
Im Firefox wird alles top angezeigt (Bild 2) hingegen im Safari (Bild 3) ist der Text auf den Menübalken nach unten verschoben und der Rollover Effekt geht auch nicht über di eganze Höhe.
Woran liegt das? Wie kann ich das fixen?
Anbei Bilder und mein CSS und TS. Der Link dazu: http://www.wild-pharma.com/typo/
Danke für eure Hilfe.
Liebe Grüsse
angsch-li
TS:
# 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>
}
}
# Das Untermenü erstellen
SUBMENU= HMENU
SUBMENU.special.value = 3
SUBMENU{
entryLevel = 2
1 = TMENU
1.NO = 1
1.NO.linkWrap = <font color="#676767"> <br /> <br />
}
CSS:
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: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:hover { font-size: 13px; color: #0C2C80; font-family: Arial, Helvetica, sans-serif; text-decoration: none; background-color:#D9D6E9;}
ul a:active { font-size: 13px; color: #0C2C80; font-family: Arial, Helvetica, sans-serif; text-decoration: none; }
ul.menu, ul.menu ul {
list-style-type: none;
}
/* 1. Stufe Textplatzierung */
ul.menu a {
display: block;
padding: 7px 20px 7px 20px;
font-weight:bold;
}
/* 2. Stufe Textplatzierung */
ul.menu ul a {
padding: 8 10;
font-weight:normal;
}
/* 1. Stufe */
ul.menu li {
padding: 0;
background-image: none;
background-color: #0C2C80;
float:left;
border:0 px solid #fff;
}
/* 2. Stufe */
ul.menu ul {
margin-top:0;
padding: 0 0 0 0;
position: absolute;
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;
}
/* 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 {
float:none;
background-color: #0C2C80;
}
Bild 2 - Firefox:
Bild: wild-pharma.com/…/Bild_2.png
Bild 3 - Safari
Bild: wild-pharma.com/…/Bild_3.png