Hallo liebe Mitglieder des Typo3.net Forums,
ich bin hier neu in diesem Forum und habe mich auch schon etwas umgeschaut ob ich eine Lösung finden konnte, da viele andere anscheinend auch Darstellungsprobleme haben. Ich bin gerade noch dabei TypoScript (und CSS) zu lernen, eigentlich bin ich eher Redakteur. Mein Kollege der sich um den technischen Teil kümmert ist zur Zeit nicht verfügbar, daher versuche (bzw. muss) ich das Problem selbst lösen.
Zwar kenne ich mich nicht so gut aus, habe mit diversen Tools (Firebug, Web Developer für Firefox) glaube ich eingrenzen können, dass es an der CSS liegt (position: absolute oder margin-left vielleicht...?) . Am einfachsten ihr schaut euch die Seite an.
In allen (aktuellen) Browsern wird die Menüleiste soweit korrekt dargestellt, aber der IE7 stellt das Menü um so ziemlich genau eine Seite nach rechts versetzt - und wir haben (leider) noch ziemlich viele User die noch IE7 einsetzen.
Hier der CSS-Code vom Menü
/* @override http://www.e-kern.kern-server.de/fileadmin/css/kern_menu.css */
li.menu_kern_first_item{
height:25px;
margin-bottom: 0px;
}
li.menu_kern_first_item:hover{
background: url(hoverlight.png) no-repeat center 22px;
text-decoration: none;
padding-top: 4px;
margin-top: -4px;
}
li.menu_kern_first_item:hover a{
text-decoration: none;
}
.menu_kern_first {
height:22px;
position:absolute;
top:172px;
margin-left:220px;
color:#FF0000;
padding: 0px;
}
.menu_kern_first li {
list-style:none;
padding:0 7px;
}
.menu_kern_first li a {
color:#FFFFFF;
}
.menu_kern_first_item {
float:left;
<!--[if lte IE 7]>
width: 160px;
<![endif]-->
}
.menu_kern_first_item_highlight {
background:#6699FF;
}
.menu_kern_second {
color: #5f6262;
background-color: #cedeef;
padding:5px;
}
.menu_kern_second li {
height:auto !important;
height:110px; /*für den IE */
width: 160px;
list-style:none;
padding-top: 10px;
padding-bottom: 15px;
padding-left: 10px;
padding-right: 10px;
z-index:99999;
float:left
}
.menu_kern_second li a {
font-size: 11px;
font-weight: bold;
color: #00387c;
}
.menu_kern_second li a:hover {
font-size: 11px;
font-weight: bold;
background-color: #f59e18;
padding:2px;
text-decoration: none;
color: #ffffff;
}
.menu_kern_second_item {
float:left;
width: 100px;
}
a.li.menu_kern_second_item {
color: #00387c;
}
.menu_kern_third {
padding:0;
margin:0;
color: #00387c;
}
.menu_kern_third li {
padding:0px;
margin:0px;
}
.menu_kern_third li>a {
font-size: 11px;
font-weight: normal;
padding:0px;
margin:0px;
}
.menu_kern_third li> a:hover {
font-size: 11px;
font-weight: normal;
padding:2px;
background-color: #f59e18;
text-decoration: none;
color: #ffffff;
}
.menu_kern_end {
background-color: #cedeef;
float:none;
margin-top: 2px;
padding:0 480px;
}
.menu_kern_box {
float:none;
background-color: #cedeef;
}
.hidden{
visibility:hidden;
display:none;
}
Und hier der relevante code vom Typoscript (ich habe hier schon etwas rumprobiert, hat aber nicht wirklich geholfen)
# GANZES MENÜ
FULLNAVI= HMENU
FULLNAVI{
special = directory
special.value = 264
1 = TMENU
1 {
wrap = <!--[if lte IE 7]><table><tr><td><![endif]--> <ul class="menu_kern_first">|</ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
expAll = 1
NO{
allWrap = <li id="sl_menu_{elementUid}" class="menu_kern_first_item">|
linkWrap = <span class="hidden">|</span>
wrapItemAndSub = |</li>
subst_elementUid = 1
}
NO = 1
RO < .ACT
RO = 1
ACT < .NO
ACT = 1
ACT.ATagParams = <class="active">
}
2 = TMENU
2 {
wrap = <!--[if lte IE 7]><table><tr><td><![endif]--><ul class="menu_kern_second">|</ul><!--[if lte IE 7]></td></tr></table></a><![endif]-->
expAll = 1
NO{
wrapItemAndSub = <li class="menu_kern_second_item">|</li>
subst_elementUid = 1
linkWrap = |
}
NO = 1
RO < .ACT
RO = 1
ACT < .NO
ACT = 1
ACT.ATagParams = <class="active">
}
3 < .1
4 < .1
3 {
wrap = <!--[if lte IE 7]><table><tr><td><![endif]--><ul class="menu_kern_third">|</ul> <!--[if lte IE 7]></td></tr></table></a><![endif]-->
expAll = 1
NO{
wrapItemAndSub = <li>|</li>
linkWrap = |
}
}
4{
NO{
linkWrap = |
# VISUELLES TRENNZEICHEN
SPC {
allWrap = <tr><td height="20" class="navi_spacer" width="145">|</td></tr>
doNotShowLink = 0
backColor = #94c0fc
fontColor = #000000
doNotLinkIt = 0
}
SPC = 1
}
}
}
# HOMEBUTTON
HOMELINK = IMAGE
HOMELINK {
file = fileadmin/css/homelinklogo.png
imageLinkWrap = 1
typolink.target = _self
imageLinkWrap.enable = 1
imageLinkWrap.typolink.parameter = 116
wrap = <span class="homelinklogo">|</span>
}
# HAUPTMENÜ
HEADNAVI= HMENU
HEADNAVI {
special = directory
special.value = 264
1 = TMENU
1 {
wrap = <ul class="menu_kern_first">|</ul>
expAll = 1
NO{
linkWrap = <li class="menu_kern_first_item" onmouseover="sl_show({elementUid});" onmouseout="sl_start_countdown();">|</li>
subst_elementUid = 1
}
NO = 1
ACT < .NO
ACT = 1
ACT.ATagParams = <class="active">
}
}
# 2. MENÜEBENE
SECONDNAVI = HMENU
SECONDNAVI {
special = directory
entryLevel = 2
2 = TMENU
2 {
wrap = <ul id="sl_menu_box" class="menu_kern_second" onmouseover="sl_extend();" onmouseout="sl_start_countdown();">|</ul>
expAll = 1
NO.wrapItemAndSub = <li class="menu_kern_second_item">|</li>
}
3 = TMENU
3 {
wrap = <ul class="menu_kern_third">|</ul>
expAll = 1
NO.wrapItemAndSub = <li>|</li>
ACT < .NO
ACT = 1
doNotLinkIt = 1
ACT.ATagParams = class="thirdlevel"
SPC {
allWrap = <tr><td height="20" class="navi_spacer" width="145">|</td></tr>
doNotShowLink = 0
backColor = #94c0fc
fontColor = #000000
doNotLinkIt = 0
}
SPC = 1
}
}
Über jeden Hinweis oder Tip wäre dankbar, und wenn es auch ein Hinweis ist in welche Richtung ich weiter forschen bzw. recherchieren könnte. Ich bin echt seit Freitag letzter Woche am lesen und grübeln. Habe in einigen Büchern nachgeschaut, aber über inkompatibilitäten mit IE7 und Menüs gab es keine hilfreichen Hinweise 🙁