Frage stellen
ich habe folgendes Problem. Ich habe mit TYPO3 ein TMENU mit einem Submenü erstellt. Das Submenü habe ich per CSS ein Stück weiter nach rechts verschoben und die "ausgeklappte Menübox" auf der 1. Ebene kleiner gemacht, sodass das Submenü jetzt rechts neben dem Menü steht. Das funktioniert im Fiefox auch super, doch leider im IE leider nicht.
Der IE verkleinert die Menübox bei einem Submenü nicht. Das Problem ist (zumindest für mich) schwer zu erklären. Die Seite ist online unter folgendem Link zu begutachten: http://212.117.70.77/index.php?id=361
Ich habe die Boxen mal farbig gemacht, um das Problem besser darzustellen. Mein Problem ist die hellgrüne linke Box im Menü. Diese Box mal beobachten, wenn man sich durchs Menü im IE klickt.
Ich bin für jede Hilfe dankbar!
MfG
Comfreak
Hier noch mein Code, den ich genutzt habe.
TYPO3:
- Code: Alles auswählen
# Default PAGE object:
page = PAGE
page {
typeNum = 0
bodyTag = <body bgColor = "white">
headerData.20 = TEXT
headerData.20.value (
<link href="fileadmin/3phase/vorlagen/style.css" rel="stylesheet" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="fileadmin/3phase/vorlagen/ie.css" />
<![endif]-->
)
10 = TEMPLATE
10.template = FILE
10.template.file = fileadmin/3phase/vorlagen/phase_templ.html
10.template.workOnSubpart = DOKUMENT
10.marks.CONTENT = CONTENT
10.marks.CONTENT.table = tt_content
10.marks.NAVI = HMENU
10.marks.NAVI {
special = directory
special.value = 352
entryLevel = 0
1 = TMENU
1.noBlur = 1
1.wrap = <ul class="ulnav">|</ul>
1.NO = 1
1.NO.linkWrap = |
1.NO.ATagTitle.field = abstract // description // title
1.NO.before.dataWrap = <li id="li1">|
1.NO.wrapItemAndSub = |</li>
1.ACT < 1.NO
1.ACT= 1
1.ACT.before.dataWrap = <li id="lib1">|
1.ACT.wrapItemAndSub = |</li>
2 < .1
2.wrap = <ul class="ulnav2">|</ul>
2.NO.before.dataWrap = <li id="li2">|
2.NO.wrapItemAndSub = |</li>
2.ACT < 2.NO
2.ACT= 1
2.ACT.before.dataWrap = <li id="lip2">|
2.ACT.wrapItemAndSub = |</li>
}
}
CSS für Firefox:
- Code: Alles auswählen
a:link {
font-weight:bold; color:black; text-decoration:none;
}
a:visited {
font-weight:bold; color:black; text-decoration:none;
}
a:focus {
font-weight:bold; color:black; text-decoration:none;
}
a:hover {
font-weight:bold; color:black; text-decoration:none;
}
a:active {
font-weight:bold; color:black; text-decoration:none;
}
div.main {
width: 960px;
height: 570px;
background-color: white;
}
div.header {
float: right;
width: 700px;
height: 139px;
background-color: red;
}
div.navimain {
float: left;
height: 570px;
width: 260px;
background-color: purple;
}
div.maincontent{
float: left;
width: 600px;
height: 405px;
background-position: 115px 0px;
overflow: auto;
background-color: pink;
}
div.csc-header-n1 {
margin-left: 100;
padding-right: 60;
}
p.bodytext {
margin-left: 100;
}
div.footer {
float: right;
width: 700px;
height: 26px;
background-color: green;
}
ul.ulnav{
float: left;
margin-top: 200px;
margin-left: 50px
font-family: Arial;
font-weight: bolder;
font-size: 11;
}
ul.ulnav2{
width: 70px;
height: 50px;
font-family: Arial;
font-weight: bolder;
font-size: 11;
}
#li1 {
width: 96px;
height: 38px;
padding-left: 20px;
list-style-type: none;
}
#lib1 {
width: 96px;
height: 38px;
padding-left: 20px;
list-style-type: none;
background: url(/fileadmin/3phase/bilder/strich.png) no-repeat;
background-position: 7px 0px;
background-color: lime;
}
#li2{
width: 70px;
height: 30px;
list-style-type: none;
margin-bottom: -17px;
margin-left: 30px;
padding-left: 20;
position: relative;
left: 30px;
top: 5px;
}
#lip2{
width: 70px;
height: 30px;
list-style-type: none;
margin-bottom: -17px;
margin-left: 30px;
padding-left: 20;
position: relative;
left: 30px;
top: 5px;
background: url(/fileadmin/3phase/bilder/pfeil.png) no-repeat;
background-position: 0px 4px;
background-color: orange;
}
- Code: Alles auswählen
ul.ulnav{
font-family: Arial;
position: absolute;
font-weight: bolder;
font-size: 11;
top: 50px;
left: 50px;
float: top;
}
ul.ulnav2{
width: 70px;
height: 50px;
left: 200px;
position: relative;
z-index: 2;
font-family: Arial;
font-weight: bolder;
font-size: 11;
}
#li1{
width: 1px;
}
#lib1{
float: top;
height:1px;
width: 1px;
}
#li2{
width: 1px;
}
#lip2{
width: 1px;
}
HTML - Template
- Code: Alles auswählen
<div class="main">
<div class="header"></div>
<div class="navimain">###NAVI###</div>
<div class="maincontent">###CONTENT###</div>
<div class="footer"></div>
</div>