Crossbrowser Menü Buggy

[sh0x]

Webdesignprofis aufgepasst: Wieso zerreißen es IE und Opera?

Hey Leute,

ich versuche gerade nach einem Tutorial ein Menü zu entwerfen. Wenn ich mir das Endprodukt aber in verschiedenen Browsern anschaue, muss ich feststellen, dass es wieder jeder Browserkandidat anders anzeigt.
Zur Veranschaulichung habe ich mal die Ausgabe folgender Browser angehängt:
1) Opera 8.0
2) Firefox 0.8
3) Netscape 7.1
4) IE 5.5

Hier ist das CSS:

<style type="text/css" media="all">

	#divNav {
		background: transparent url(bk-nav.jpg) no-repeat top left;
		margin: 0;
		padding: 0;
		height: 80px;
		width: 800px;
	}

	#nav {
		position: relative;
		top: 55px;
		height: 80px;
		width: 800px;
	}

	#nav li ul, #nav li ul {
		margin: 0;
		padding: 0;
	}

	#nav a {
		text-decoration: none;
	}

	#nav li { /*float the main list items*/
		margin: 0;
		float: left;
		display: block;
		padding-right: 15px;
	}

	#nav li ul {
		display: none;
	}

	#nav li.off ul, #nav li.on ul  { /*put the subnav below*/
		position: absolute;
		top: 25px;
		left: 0;
		padding-top: 15px;
		background: #224d6f;
		height: 28px;
		width: 740px;
		padding-left: 60px;
	}

	#nav li.on ul {
		background: #f90;
	}

	#nav li.on:hover ul, #nav li.over ul { /*for ie*/
		background: #224d6f;
	}

	#nav li a {
		color: #224d6f;
		font-weight: bold;
		display: block;
		width: 93px;
		padding: 0;
	}

	#nav li.on a {
		color: #f90;
	}

	#nav li.on ul a, #nav li.off ul a {
		border: 0;
		float: left; /*ie doesn't inherit the float*/
		color: #f90;
		width: auto;
		margin-right: 15px;
	}

	#nav li.on:hover ul a, #nav li.over ul li a { /*for ie - the specificity is necessary*/
		background: #224d6f;
	}

	#nav li.on ul {
		display: block;
	}

	#nav li.off:hover ul, #nav li.over ul {
		display: block;
		z-index: 6000;
	}

	#nav li.off a:hover, #nav li.on a:hover { 
		color: #f90;
	}

Habt ihr Ideen, woran die Unterschiedliche darstellung liegen könnte? Alles Browser müssten doch die CSS-Anweisungen wenigstens annähernd verstehen können, oder?
Mich macht das immer wütend, wenn ein Design super aussieht und man stolz ist, dann aber in einem anderen Browser testet und enttäuscht wird.

Freu mich über jeden Beitrag,
Gruß

Nochmal meine Analyse:
Opera schiebt das Untermenü so weit nach rechts, dass es weder links noch rechts mit derm Obermenü abschließt. Firefox und Netscape 7.1 machen es optimal - so soll es nämlich aussehen.
Und IE 5.5 macht das Untermenü wenigstens links bündig zum Obermenü. Jedoch leider auch auf der rechten Seite zu kurz. Das sieht ebenso nicht so gut aus.
Außerdem ist die Schrift auffällig groß. Warum macht der IE einfach die Schrift so groß?

 

[sh0x]

Ich hasse es, ungeduldig rüberzukommen, aber ... Ähh.. Hat niemand den Hauch einer Idee? Ist es ein unlösbares Problem? :-(