Hallo Leute!
Ich habe ein Typo3, css, Javascript, verschachtelte li Menü.
Nach langem basteln sieht es jetzt auch so aus, wie es das soll. Sogar der IE weiß was ich von ihm will.
Leider verhält es sich mit css menüs ählich wie mit einem Rubikswürfel wenn man ein Seite verschiebt, verschiebt sich auch die andere Seite.
Nun macht also der IE alles was er machen soll, nur der FF zeigt im Submenü nur den ersten Punkt des Menüs über dem Mainmenü und alle Anden werden darunter und somit nicht lederbar, dargestellt:
es folgen ein paar bilder: >>>
diese Bild zeig den Internet Explorer 6.0:
(bei dem alles passt)
diese Bild zeig den Firefox 3.5.7:
(da es zu einer unterschieden Interpretation der Submenübalkengröße kommt, ist das Submenü kleiner und kommt daher zu einer Überlagerung mit dem Mainmenü. Das wäre kein Problem wenn der z-index das ausgeklappte menü einfach darüber setzen würde )
dieses Bild zeig FF mit z-index eingeblendet
Ich habe jetzt zwei Lösungsansätze:
1. Kann ich eine if Bedingung einbauen so das IE und FF und Safari einfach unterschiedliche Submenübalkengrößen gerieren?
2. Oder ich löse das z-index Problem, hier gibt es auch zwei Lösungsansätze:
a. erst habe ich es per css probiert, hat nicht hingehaut.
@charset "UTF-8";
/* CSS Document */
body {
font: normal 12px verdana;
}
#subnavi {
background-color: #f3f4f4;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #056b83;
}
li {
z-index:11;
}
ul {
margin: 0;
padding: 0;
z-index:11;
list-style: none;
width: 227px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
ul li {
position: relative;
width: 227px;
}
li ul {
position: absolute;
left: 226px; /* Set 1px less than menu width */
top: 0;
display: none;
}
/* Styles for Menu Items */
ul li a {
display: block;
text-decoration: none;
width: 227px;
background: #FAFAFA; /* IE6 Bug */
color: #056b83;
padding-right: 0px;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
border: 1px solid #ccc;
border-bottom: 0;
z-index:11;
}
/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; z-index:11; }
* html ul li a { height: 1%; z-index:11; }
/* End */
ul li a:hover { color: #056b83; background: #e6e89a; z-index:11; } /* Hover Styles */
li ul li a {
padding-right: 5px;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
z-index:11;
} /* Sub Menu Styles */
li:hover ul, li.over ul { display: block; z-index:11; } /* The magic */
ul li.current {
padding-right: 5px;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
color: #056b83;
background: #e6e89a;
border: 1px solid #ccc;
border-bottom: 0;
z-index:11;
}
ul li.folder {
display: block;
text-decoration: none;
background: #FAFAFA; /* IE6 Bug */
color: #056b83;
padding-right: 5px;
padding-left: 10px;
padding-top: 3px;
padding-bottom: 3px;
border: 1px solid #ccc;
border-bottom: 0;
z-index:10;
}
.lauftext {
font-size: 12px
font-weight: lighter;
font-size: 11px;
font-weight: lighter;
}
.UEberschrieft {
font-size: 14px;
color: #056b83;
font-weight: bolder;
}
#BottomLine {
border-bottom: 1px solid #adb1b2;
border-left:1px solid #adb1b2;
border-right:1px solid #adb1b2;
background-color: #FAFAFA;
}
#katalogcontent {
overflow: auto;
width:668;
height:284;
bgcolor="#ffffff"
}
.center_column h1{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-decoration: underline;
color: #056b83;
margin: 0;
padding-right: 0px;
padding-left: 0px;
padding-top: 20px;
padding-bottom: 10px;
}
.center_column p{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
text-align: justify
margin: 0;
padding-bottom: 10px;
}
.center_column {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
text-align: justify;
margin: 0;
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
padding-bottom: 0px;
}
.center_column a {
color: #F45C20;
text-decoration: none;
}
.center_column a:hover{
text-decoration: underline;
}
b. Lösungsansatz ist das ganze über Typoskript zulösen,geht auch nicht.
tmp.SUBNAVIGATION = HMENU
tmp.SUBNAVIGATION {
entryLevel = 0
1 = TMENU
1 {
wrap = <ul id="subnavi">|</ul>
noBlur = 1
expAll = 1
NO = 1
NO {
doNotLinkIt = 1
stdWrap {
htmlSpecialChars = 1
append = TEXT
append.char = 10
}
wrapItemAndSub =<li class="folder">|</li>
}
CUR = 1
CUR {
wrapItemAndSub = <li style="z-index:11">|</li>
doNotLinkIt = 1
ATagBeforeWrap = 1
linkWrap = <li style="z-index:11">|</li>
}
ACTIFSUB = 1
ACTIFSUB {
wrapItemAndSub = <li class="current" style="z-index:11">|</li>
doNotLinkIt = 1
ATagBeforeWrap = 1
linkWrap = <u style="z-index:11">|</u>
}
}
2 = TMENU
2 {
noBlur = 1
wrap = <ul style="z-index:11">|</ul>
NO = 1
NO {
stdWrap {
htmlSpecialChars = 1
append = TEXT
append.char = 10
}
allWrap =<li style="z-index:11">|</li>
}
CUR = 1
CUR {
ATagBeforeWrap = 1
linkWrap = <ul style="z-index:11">|</ul>
doNotLinkIt = 1
linkWrap = <li class="current style=" z-index:11="">|</li>
}
}
}
ACTIFSUB = 1
ACTIFSUB {
wrapItemAndSub = <li style="z-index:11">|</li>
ATagBeforeWrap = 1
linkWrap = <em>|</em>
}
Bitte kann mir jemand helfen!
ihr könnt euch das Problem auch Live unter
http://brandbase.at/index.php?id=2 ansehen.
Danke im vorhinein für eure zahlreich Tips und Lösungsansätze.
mfg
fbene