---
title: "CSS Menu IE vs. Firefox"
url: "https://www.typo3.net/d/44394-css-menu-ie-vs-firefox"
source: "typo3.net"
tags: ["TYPO3","Menüs","Frage"]
created: "2006-06-07"
last_reply: "2006-06-09"
replies: 10
solved: false
page: 1
pages: 1
lang: "de"
---
# CSS Menu IE vs. Firefox
TYPO3 › Menüs · 10 Antworten · gestartet 2006-06-07
## Eröffnungsbeitrag
**star27** · 2006-06-07 · [Beitrag #1](https://www.typo3.net/d/44394-css-menu-ie-vs-firefox/1)
Hallo Leute
zum wahnsinnig werden...stundenlanges probieren führt zu keinem resultat:
wenn ich in diesem css die height angaben im LI rausnehme ist es beim Firefow OK aber im IE ist alles (!) vom Menü im A***h...lasse ich die height angaben drin ist im IE alles ok im Firefox nichts mehr mit OK... habe Ihr ev. einen Tip?
Level1
```html
#main_nav_box ul {
margin:0px;
padding:0px;
list-style:none;
}
#main_nav_box li.NO {
margin:0px;
padding:0px;
color:#FFcc00;
background-color:#CC9900;
height:20px;
}
#main_nav_box li.NO a {
text-decoration:none;
display:block;
color:#222222;
background-color:#CC9900;
padding-top:4px;
padding-bottom:4px;
padding-left:4px;
}
#main_nav_box li.NO a:hover {
text-decoration:none;
color:#CCCCCC;
background:#222222;
}
#main_nav_box li.CUR {
color:#FFFFFF;
height:20px;
}
#main_nav_box li.CUR a {
text-decoration:none;
display:block;
color:#00CCFF;
background:#3F3F3F;
padding-top:4px;
padding-bottom:4px;
padding-left:4px;
}
#main_nav_box li.CUR a:hover {
text-decoration:none;
color:#CCCCCC;
background:#222222;
}
#main_nav_box li.ACT {
color:#FF0000;
height:20px;
}
#main_nav_box li.ACT a {
text-decoration:none;
display:block;
color:#FF0000;
background:#3F3F3F;
padding-top:4px;
padding-bottom:4px;
padding-left:4px;
}
#main_nav_box li.ACT a:hover {
text-decoration:none;
color:#FFCC00;
background:#222222;
}
```
Level2
```html
#main_nav_box li li.NO_2 {
color:#FFcc00;
}
#main_nav_box li li.NO_2 a {
text-decoration:none;
display:block;
color:#FF0000;
background-color:#666666;
padding-top:4px;
padding-bottom:4px;
padding-left:4px;
}
#main_nav_box li li.NO_2 a:hover {
text-decoration:none;
color:#CCCCCC;
background:#222222;
}
#main_nav_box li li.CUR {
display:block;
color:#FFFFFF;
}
#main_nav_box li li.CUR a {
text-decoration:none;
display:block;
color:#00CCFF;
background:#3F3F3F;
padding-top:4px;
padding-bottom:4px;
padding-left:4px;
}
#main_nav_box li li.CUR a:hover {
text-decoration:none;
color:#CCCCCC;
background:#222222;
}
#main_nav_box li li.ACT {
display:block;
color:#FFFFFF;
}
#main_nav_box li li.ACT a {
text-decoration:none;
display:block;
color:#00CCFF;
background:#3F3F3F;
padding-top:4px;
padding-bottom:4px;
padding-left:4px;
}
#main_nav_box li li.ACT a:hover {
text-decoration:none;
color:#CCCCCC;
background:#222222;
}
```
und hier noch TS:
```typoscript
temp.MAIN_MENU = HMENU
temp.MAIN_MENU.stdWrap.wrap =
temp.MAIN_MENU {
1 = TMENU
1 {
expAll = 0
NO.wrapItemAndSub = |
ACT = 1
ACT.wrapItemAndSub = |
CUR = 1
CUR.wrapItemAndSub = |
}
2 = TMENU
2 {
expAll = 0
wrap =
NO.wrapItemAndSub = |
ACT = 1
ACT.wrapItemAndSub = |
CUR = 1
CUR.wrapItemAndSub = |
}
}
```
## Antworten
### [#2](https://www.typo3.net/d/44394-css-menu-ie-vs-firefox/2) · woida · 2006-06-07
Das einfachste wär wohl für jeden Browser einen eigene CSS-Datei zu laden.
### [#3](https://www.typo3.net/d/44394-css-menu-ie-vs-firefox/3) · star27 · 2006-06-07
hmmm dachte mir schon sowas...wollte aber nicht aufgeben...naja...ist wohl das beste.. weist du wo ich eine anleitung dafür bekomme? infos für den einbau?
### [#4](https://www.typo3.net/d/44394-css-menu-ie-vs-firefox/4) · woida · 2006-06-07
Ja, über die Suchfunktion.
Diese Frage gabs schon mehrmals. Gestern zb. wurde was in der Richtung gefragt.
### [#5](https://www.typo3.net/d/44394-css-menu-ie-vs-firefox/5) · igorshmigor · 2006-06-07
Firefox und IE behandeln die Höhe unterschiedlich: Firefox nimmt die Höhe exklusiv Padding und IE inklusiv Padding.
Um bei beiden die gleiche Höhe zu erhalten machst Du es am besten so:
Du erstellst die CSS normal für Firefox und erstellst dann mit dem Sternchen-Hack die Regel für IE, indem Du das Padding für oben und unten zur Höhe dazu addierst.
Beispiel:
```html
li { padding-top: 15px; padding-bottom: 25px; height: 50px }
*html li {height:90px} // 50px+15px+25px=90px, das *html bewirkt, dass nur IE diese Definition befolgt.
```
### [#6](https://www.typo3.net/d/44394-css-menu-ie-vs-firefox/6) · woida · 2006-06-07
> ... dann mit dem Sternchen-Hack die Regel ...
Genau deshalb empfehle ich 2 verschiedene CSS-Datein: Mit dem IE6 mags ja funktionieren, aber wie wir IE7 (IE7+SP1, IE8, ...) dann die Hacks interpretieren?
### [#7](https://www.typo3.net/d/44394-css-menu-ie-vs-firefox/7) · igorshmigor · 2006-06-07
Stimmt. Die bevorstehende Version 7 verdränge ich so gerne aus meinem Kopf. Microsoft hat ja schon angekündigt, dass IE7 die alten Hacks ignoriert. Da muß das dann so aussehen:
```html
```
### [#8](https://www.typo3.net/d/44394-css-menu-ie-vs-firefox/8) · star27 · 2006-06-07
ok danke leute...also mache ich mal zwei css files....oder wechsle wieder zu table layouts ;)
### [#9](https://www.typo3.net/d/44394-css-menu-ie-vs-firefox/9) · miwolfram · 2006-06-08
Muss ich die ganze Zeit hinter euch aufräumen?
Vor 2 Tagen hatten wir dieselbe Frage.
[/d/44297-ie-darstellung-total-vermurckst](https://www.typo3.net/d/44297-ie-darstellung-total-vermurckst)
@woida: Das mit den 2 verschiedenen CSS-Files ist überhaupt nicht das einfachste, braucht Zeit und ist völlig unnötig.
Also - jetzt zum letzten Mal:
Dass sich IE und Firefox unterschiedlich verhalten stimmt. Aber nur im QuirksModus.
Eine gleiche Darstellung kann man mit der richtigen Doctype-Setzung erzielen.
Ist der richtig gesetzt gehen IE und Firefox in den StandardsMode und die Interpretierung von CSS ist zu 99% gleich (auch das verdammte Box-Modell).
("darum ist der doctype wichtig...")
### [#10](https://www.typo3.net/d/44394-css-menu-ie-vs-firefox/10) · star27 · 2006-06-08
musst nicht aufräumen...schon gelesen...ist aber keine garantie das es funktioniert...
```typoscript
page {
config.doctype = xhtml_trans
#config.doctype = xhtml_strict
#FOR IE
config.doctypeSwitch = 1
config.xhtml_cleaning = all
xmlprologue = none
etc
```
bringt nichts....ie = chaos
### [#11](https://www.typo3.net/d/44394-css-menu-ie-vs-firefox/11) · miwolfram · 2006-06-09
> **star27 schrieb:**
>
> musst nicht aufräumen...schon gelesen...ist aber keine garantie das es funktioniert...
Ich kenne genau 2 Fälle (die wirklich in Seiten vorkommen) in denen es Probleme gibt.
Der eine ist dass margin-Abstände im IE verdoppelt werden wenn zwei gefloatete Boxen nebeneinanderstehen. (lässt sich leicht durch eine **display:inline;** Anweisung auf alle Boxen die du mit Float definiert hast beheben. - Hat sonst keine Auswirkung aufs Design da Float-Objekte automatisch Block-Elemente sind)
Der zweite Bug betrifft eine falsche Positionierung von Labels in Formular-Fieldsets.
(die bekannten IE Bugs und wie/ob sie in IE7 behoben wurden, bzw. wie man sie umgehen kann)
Wie sieht dein Doctype aus? Wenn er wie folgt aussieht funktioniert es auch - glaub mir ich hab schon viele Seiten erstellt, jeweils mit genau einem CSS-File.
```html
```
Meine Default-TS sieht übrigens so aus (ohne Spracheinstellungen):
```typoscript
###### DEFAULT CONFIG #########
############################
config.doctype = xhtml_trans
config.xhtml_cleaning = all
config.htmlTag_langKey = de
config.removeDefaultJS = 1
config.disablePrefixComment = 1
#to clear msie xml-to-quirksmode bug
[browser = msie]
config.doctypeSwitch = 1
[END]
```
---
Quelle: „CSS Menu IE vs. Firefox“, typo3.net, https://www.typo3.net/d/44394-css-menu-ie-vs-firefox
Beiträge von Mitgliedern des Forums. Bitte mit Link auf die Diskussion zitieren.