Zum Inhalt springen

Listenmenu mit IE und FF - Einrücken

Erstellt am 8. Dezember 2005 · 2 Antworten · letzte Antwort am 9. Dezember 2005

Tags: HTML & CSS, Frage

Andrea_Herzog ·

Hallo zusammen,
ich möchte gerne ein Listenmenu vernünftig einrücken.

Im FF wird der Unterpunkt eingerückt, aber der Tab ist zu groß:

Ebene 1
    Ebene 2

Der IE macht gar nichts

Ebene 1
Ebene 2

Wie kriege ich das hin, dass die Einrückung fast gleich ist?

Kann jemand helfen?

Hier mein setup:

# Default PAGE object:
page = PAGE
page.typeNum = 0
page.stylesheet = fileadmin/fit2/style/style.css
page.10 = TEMPLATE
page.10 {
   template = FILE
   template.file = fileadmin/fit2/fit_vorlage.html
   workOnSubpart = DOKUMENT
   marks.INHALT = CONTENT
   marks.INHALT {
       table = tt_content
       select.where = colPos=0
       select.orderBy = sorting
   }
    marks.RECHTS = CONTENT
    marks.RECHTS {
       table = tt_content
       select.where = colPos=2
       select.orderBy = sorting
   }
   
   

    marks.MENU = HMENU
    #excludeUIDList soll Seiten aus dem Menu entfernen
    #Evtl. problematisch, weil das Menu2 vielleicht nicht barrierefrei ist.
    marks.MENU.excludeUidList = 624, 625, 626, 627
    marks.MENU.entryLevel = 0
    marks.MENU {
                  
         1 = TMENU
         1 {
            wrap = <ul> | </ul> 
            entryLevel = 0
            noBlur = 1
            NO {
               
               WrapItemAndSub = <li> | </li>
               after = <br />
               ATagParams = class = "menu_main"
               #StdWrap.case = lower
               #beforeImg = fileadmin/zvo/images/pix-punkt-t.gif  
               RO = 1
               #beforeROImg = fileadmin/zvo/images/pix-punkt.gif
               }
            ACT < .NO
            ACT.ATagParams = class = "menu_mainact"
            ACT = 1   
         }
        
         2 = TMENU
         2 {
            wrap = <ul> | </ul> 
            #entryLevel = 1
            noBlur = 1
            NO {
               AllWrap = class = "menu_sub"
               after = <br />
               ATagParams = class = "menu_sub"
               #StdWrap.case = lower
               RO = 1
                             }
            ACT < .NO
            ACT.ATagParams = class="menu_subact"
            ACT = 1   
         }

    } 
 marks.MENU2 = HMENU
    marks.MENU2.entryLevel = 0
    marks.MENU2.special = list
    marks.MENU2.special.value = 621, 624, 625, 626, 627
    marks.MENU2 {
         1 = TMENU
         1 {
            wrap = <ul> | </ul> 
            NO {
               WrapItemAndSub = <li> | </li>
               after =  | 
               ATagParams = class="menu_2"
               StdWrap.case = lower
                }
            ACT < .NO
            ACT.ATagParams = class="menuact"
            ACT = 1   
              }
    }         
#}        
}

config.extTarget = _self

temp.splitter {
token = #
cObjNum = 1 
1.current = 1 
1.wrap = </tr><tr>| 
}

Hier mein Stylesheet:
/*<!-- Bodyeigenschaften -->*/
BODY {
color: #000000;
background-color: #FFFFFF;
font: normal normal 12px Arial, Verdana, Tahoma;

margin: 0px 0px 0px 0px;

scrollbar-base-color:#FFFFFF;
scrollbar-3dlight-color:#FFFFFF;
scrollbar-arrow-color:#555656;
scrollbar-darkshadow-color:#FFFFFF;
scrollbar-face-color:#FFFFFF;
scrollbar-highlight-color:#FFFFFF;
scrollbar-shadow-color:#555656;
scrollbar-track-color:#FFFFFF;
}

/*<!-- keinen Bildrand -->*/
img{border:0px;}

/*<!-- Linkeigenschaften -->*/
A:link, A:visited, A:active {
color: #555656;
text-decoration:none;
font: normal normal 12px Arial, Verdana, Tahoma;
font-weight:bold;
}

A:hover {
color: #FFFFFF;
text-decoration: none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;
font-weight:bold;
}

/*<!-- Ueberschrifteigenschaften -->*/
h1 {
font-size: 18px;
color: #000000;
text-align: center;
font-family: Arial, Verdana, Tahoma;
}

h2 {
font-size: 14px;
color: #000000;
font-family: Arial, Verdana, Tahoma;
}

h3 {
font-size: 10px;
color: #000000;
font-family: Arial, Verdana, Tahoma;
}

/*<!-- Div Konfigurierung / Textkoerper -->*/

.alles {
background-color: #FFFFFF;
position: relative;
top: 0px;
left: 0px;
width: 1000px;
height: 786px;
text-align: left;
}

/*<!-- Banner / Menu1 -->*/

.banner {
background-color: #FFFFFF;
background: url(../images/banner.jpg) no-repeat scroll;
position: absolute;
top: 0px;
left: 10px;
height: 160px;
width: 980px;
}

/* Positionierung des Menus, seitliche Navigation*/

.menu {

list-style-position: inside;
background-color: #FFFFFF;
position: absolute;
top: 180px;
left: 20px;
width:auto;
}

/*Klasse für die seitliche Navigation, 1. Ebene*/

.menu_main{
list-style-position: inside;
color: #555656;
text-decoration:none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;
font-color: #00B9F3;
}

/*Klasse für die seitliche Navigation, 1. Ebene, Aktiv*/

.menu_mainact {
list-style-position: inside;
color: #555656;
text-decoration:none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;
font-color: #00B9F3;
}

/*Klasse für die seitliche Navigation, 1. Unter-Ebene, Margin-left ist die Einrückung für für den IE*/

.menu_sub {
margin-left: 6px;
list-style-position: inside;
color: #555656;
text-decoration:none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;

font-color: #00B9F3;
}

/*Klasse für die seitliche Navigation, 1. Unter-Ebene, Aktiv , Margin-left ist die Einrückung für für den IE*/

.menu_subact {
margin-left: 6px;
list-style-position: inside;
color: #555656;
text-decoration:none;
font-size: 12px;
font-family: Arial, Verdana, Tahoma;
font-color: #00B9F3;
}

/*<!-- Menu2 / spezielle Linkfarbe für die oberere horizontale Navi-->*/

.menu a:hover {
color: #00B9F3;
}

.menuact a:active {
color: #00B9F3;
}

/*<!-- Hauptbereich -->*/

/*Positionierung Oberes Menü, Links ohne Untermenu*/

.menu2 {
float:left;
position: relative;
top: 95px;
padding:0px;
padding-left: 50px;
width:auto;

}

/*<!-- Menu 2 -->*/
/*.menu2_text {*/
/* background-color: #FFFFFF;*/
/* position: absolute;*/
/* top: 180px;*/
/* left: 52px;*/
/* height: 588px;*/
/* width: 200px; */
/* }*/

ul {

margin = 0px;
padding = 0px;
}

#MENU li; #rootline li {
*/display: inline;*/
margin: 0 px;
padding: 3px;
}

MENU a:link, #MENU a:visited {
/*padding:0 5 px 0 10 px;*/
/*background: url (../images/pix-punkt-t.gif)*/
text-decoration: underline;
color: #FFFFFF;
}

/*<!-- mitte -->*/
.haupt_mitte {
background-color: #FFFFFF;
position: absolute;
top: 180px;
left: 207px;
height: 588px;
width: 620px;
}

.haupt_text {
background-color: #FFFFFF;
position: absolute;
overflow: auto;
top: 180px;
left: 207px;
height: 588px;
width: 620px;
}

/* <!-- Logo Text -->*/
.logo_text {
background-color: #FFFFFF;
background: url(../images/logo_text.jpg) no-repeat scroll;
color: #00B9F3;
font-weight: bold;
font: 10px;
position: absolute;
top: 160px;
left: 853px;
height: 82px;
width: 112px;
}

/*<!-- News -->*/
.news {
background-color: #FFFFFF;
background: url(../images/bg_news.jpg) no-repeat scroll;
position: absolute;
top: 242px;
left: 853px;
height: 526px;
width: 112px;
}

.news_pic {
background-color: #FFFFFF;
background: url(../images/pic1.gif) no-repeat scroll;
position: absolute;
top: 282px;
left: 870px;
height: 526px;
width: 112px;
}

.news_text {

position: absolute;
top: 247px;
left: 858px;
height: 516px;
width: 102px;
}
/*<!-- Div KonfigurierungENDE -->*/

Kann jemand helfen? 😢
Gruß
Andrea

Andrea_Herzog ·

Hallo Maik,
danke für eine Unterstützung.
Ich habe es dann aber doch etwas einfacher gemacht.

Setup und HTML-Template habe ich nicht geändert.

Nur im Stylesheet einige Änderungen vorgenommen.
Funktioniert im IE und im FF. Andere habe ich nicht gettestet.

Und hier das Stylesheet, falls es jemanden interessiert. Das Menu, auf das ich mich beziehe ist der Teil mit Menu (activ-sub), nicht das Menu 2:

/*<!-- Bodyeigenschaften -->*/
BODY {
  color: #000000;
  background-color: #FFFFFF;
  font: normal normal 12px Arial, Verdana, Tahoma;

  margin: 0px 0px 0px 0px;
  
  scrollbar-base-color:#FFFFFF;
  scrollbar-3dlight-color:#FFFFFF;
  scrollbar-arrow-color:#555656;
  scrollbar-darkshadow-color:#FFFFFF;
  scrollbar-face-color:#FFFFFF;
  scrollbar-highlight-color:#FFFFFF;
  scrollbar-shadow-color:#555656;
  scrollbar-track-color:#FFFFFF;
}

/*<!-- keinen Bildrand -->*/
img{border:0px;}

/*<!-- Linkeigenschaften -->*/
A:link, A:visited, A:active {
  color: #555656;
  text-decoration:none;
  font: normal normal 12px Arial, Verdana, Tahoma;
  font-weight:bold;
}

A:hover {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 12px;
  font-family: Arial, Verdana, Tahoma;
  font-weight:bold;
}

/*<!-- Ueberschrifteigenschaften -->*/
h1 {
	font-size: 18px;
	color: #000000;
	text-align: center;
                font-family: Arial, Verdana, Tahoma;
}

h2 {
	font-size: 14px;
	color: #000000;
	font-family: Arial, Verdana, Tahoma;
}

h3 {
	font-size: 10px;
	color: #000000;
	font-family: Arial, Verdana, Tahoma;
}

/*<!-- Div Konfigurierung / Textkoerper -->*/

.alles {
  background-color: #FFFFFF;
  position: relative;
  top: 0px;
  left: 0px;
  width: 1000px;
  height: 786px;
  text-align: left;
}
                  
/*<!-- Banner / Menu1 -->*/
                 
.banner {
                   background-color: #FFFFFF;
                   background: url(../images/banner.jpg) no-repeat scroll;
                   position: absolute;
                   top: 0px;
                   left: 10px;
                   height: 160px;
                   width: 980px;
                   }

/* Positionierung des Menus, seitliche Navigation*/

.menu {
                   /*float: left;*/
                   display: block;
                   /*list-style-position: inside;*/
                   background-color: #FFFFFF;
                   position: absolute;
                   top: 180px;
                   left: 35px;
                   width:auto;
                   }


/*Klasse für die seitliche Navigation, 1. Ebene*/

.menu_main{
                   /*list-style-position: inside;*/
                   color: #555656;
                   text-decoration:none;
                   font-size: 12px; 
                   font-family: Arial, Verdana, Tahoma;
                   font-color: #00B9F3;
                   }

/*Klasse für die seitliche Navigation, 1. Ebene, Aktiv*/

.menu_mainact {
                   /*list-style-position: inside;*/
                   color: #555656;
                   text-decoration:none;
                   font-size: 12px; 
                   font-family: Arial, Verdana, Tahoma;
                   font-color: #00B9F3;
                   }

/*Klasse für die seitliche Navigation, 1. Unter-Ebene*/

.menu_sub {
                   /*float: left; */ 
                   /*list-style-position: outside;*/ 
                   color: #555656;
                   text-decoration:none;
                   font-size: 12px; 
                   /*margin: 3 px;*/
                   font-family: Arial, Verdana, Tahoma;
                   
                   font-color: #00B9F3;
                   }

/*Klasse für die seitliche Navigation, 1. Unter-Ebene, Aktiv*/

.menu_subact {
                   /*float: left;
                   list-style-position: outside;*/
                   color: #555656;
                   text-decoration:none;
                   font-size: 12px; 
                   /*margin: 3 px;*/
                   font-family: Arial, Verdana, Tahoma;
                   font-color: #00B9F3;
                   }
                   
/*<!-- Menu2 / spezielle Linkfarbe für die oberere horizontale Navi-->*/ 

.menu a:hover {
                  color: #00B9F3; 
                  }

.menuact a:active {
                  color: #00B9F3; 
                  }                  
      
/*<!-- Hauptbereich -->*/

/*Positionierung Oberes Menü, Links ohne Untermenu*/    

.menu2 {
                   float:left;
                   position: relative;
                   top: 95px;
                   padding:0px;
                   padding-left: 50px;
                   width:auto;
                              
                   }
                   
/*<!-- Menu 2 -->*/
/*.menu2_text {*/
/*                   background-color: #FFFFFF;*/
/*                   position: absolute;*/
/*                   top: 180px;*/
/*                   left: 52px;*/
/*                   height: 588px;*/
/*                   width: 200px;   */            
 /*                  }*/

ul {

margin: 0px;
padding: 5px 5px 5px 10px;
}

#MENU li; #rootline li {

margin: 0px;
padding: 0px;
}

MENU a:link, #MENU a:visited {
/*padding:0 5 px 0 10 px;*/
/*background: url (../images/pix-punkt-t.gif)*/
text-decoration: underline;
color: #FFFFFF;
}                   
    
/*<!-- mitte -->*/
.haupt_mitte {
                   background-color: #FFFFFF;
                   position: absolute;
                   top: 180px;
                   left: 207px;
                   height: 588px;
                   width: 620px;
                   }
   
.haupt_text {
                   background-color: #FFFFFF;
                   position: absolute;
                   overflow: auto;
                   top: 180px;
                   left: 207px;
                   height: 588px;
                   width: 620px;
                   }
     

/* <!-- Logo Text -->*/
.logo_text {
                   background-color: #FFFFFF;
                   background: url(../images/logo_text.jpg) no-repeat scroll;
                   color: #00B9F3;
                   font-weight: bold;
                   font: 10px;
                   position: absolute;
                   top: 160px;
                   left: 853px;
                   height: 82px;
                   width: 112px;
                   }
    
/*<!-- News -->*/
.news {
                   background-color: #FFFFFF;
                   background: url(../images/bg_news.jpg) no-repeat scroll;
                   position: absolute;
                   top: 242px;
                   left: 853px;
                   height: 526px;
                   width: 112px;
                   }

.news_pic { 
                   background-color: #FFFFFF;
                   background: url(../images/pic1.gif) no-repeat scroll;
                   position: absolute;
                   top: 282px;
                   left: 870px;
                   height: 526px;
                   width: 112px;
                   }


.news_text {
                   
                   position: absolute;
                   top: 247px;
                   left: 858px;
                   height: 516px;
                   width: 102px;
                   }
/*<!-- Div Konfigurierung ENDE -->*/

Viele Grüße
Andrea