---
title: "Listenmenu mit IE und FF - Einrücken"
url: "https://www.typo3.net/d/34589-listenmenu-mit-ie-und-ff-einruecken"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage","HTML & CSS"]
created: "2005-12-08"
last_reply: "2005-12-09"
replies: 2
solved: false
page: 1
pages: 1
lang: "de"
---

# Listenmenu mit IE und FF - Einrücken

TYPO3 › Menüs · 2 Antworten · gestartet 2005-12-08

## Eröffnungsbeitrag

**Andrea_Herzog** · 2005-12-08 · [Beitrag #1](https://www.typo3.net/d/34589-listenmenu-mit-ie-und-ff-einruecken/1)

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ß:

```html
Ebene 1
    Ebene 2
```

Der IE macht gar nichts

```html
Ebene 1
Ebene 2
```

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

Kann jemand helfen?

Hier mein setup:

```typoscript
# 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

## Antworten

### [#2](https://www.typo3.net/d/34589-listenmenu-mit-ie-und-ff-einruecken/2) · maik · 2005-12-08

Schau dir mal die folgende URL an, da findest du einige Beispiele, wie man das mit CSS macht.

<http://css.maxdesign.com.au/listamatic2/vertical02.htm>

### [#3](https://www.typo3.net/d/34589-listenmenu-mit-ie-und-ff-einruecken/3) · Andrea_Herzog · 2005-12-09

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:

```html
/*<!-- 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

---

Quelle: „Listenmenu mit IE und FF - Einrücken“, typo3.net, https://www.typo3.net/d/34589-listenmenu-mit-ie-und-ff-einruecken
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.