Zum Inhalt springen

CSS Menu IE vs. Firefox

Erstellt am 7. Juni 2006 · 10 Antworten · letzte Antwort am 9. Juni 2006

Tags: Frage

star27 ·

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

#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

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

temp.MAIN_MENU = HMENU
temp.MAIN_MENU.stdWrap.wrap = <ul> | </ul>
temp.MAIN_MENU {
   1 = TMENU
   1 {
      expAll = 0
      NO.wrapItemAndSub = <li class="NO"> | </li>
      ACT = 1
      ACT.wrapItemAndSub = <li class="ACT"> | </li>
      CUR = 1
      CUR.wrapItemAndSub = <li class="CUR"> | </li>
   }

     2 = TMENU
     2 {
     expAll = 0
     wrap = <ul> | </ul>
     NO.wrapItemAndSub = <li class="NO_2"> | </li>
     ACT = 1
     ACT.wrapItemAndSub = <li class="ACT_2"> | </li>
     CUR = 1
     CUR.wrapItemAndSub = <li class="CUR_2"> | </li>
   }
}
star27 ·

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?

woida ·

Ja, über die Suchfunktion.
Diese Frage gabs schon mehrmals. Gestern zb. wurde was in der Richtung gefragt.

igorshmigor ·

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:

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.
woida ·

... 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?

igorshmigor ·

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:

<!--[if IE]>
<style>
li
{
   height: 90px;
}
</style>

<![endif]-->
star27 ·

ok danke leute...also mache ich mal zwei css files....oder wechsle wieder zu table layouts 😉

miwolfram ·

Muss ich die ganze Zeit hinter euch aufräumen?
Vor 2 Tagen hatten wir dieselbe Frage.
#44297

@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).

http://www.stichpunkt.de/css/css-tipps.html#doctype ("darum ist der doctype wichtig...")

star27 ·

musst nicht aufräumen...schon gelesen...ist aber keine garantie das es funktioniert...

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

miwolfram ·
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.

http://www.thestyleworks.de/tut-art/ie7.shtml (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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<?xml version="1.0" encoding="iso-8859-1"?>

Meine Default-TS sieht übrigens so aus (ohne Spracheinstellungen):

###### 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]