Darstellungsfehler in Firefox

[CyberDemon]

Hallo zusammen,

ich habe Probleme mit der Darstellung der Navigation im Firefox Browser.

Im IE6 und Opera ist alles in Ordnung.

Screenshots:

IE:

Opera:

Firefox:

Der Code sieht so aus:

function show_arbeit(id)

{

 if (document.getElementById)

 {

	document.getElementById(id).style.display="block";

	document.getElementById('sub_partner').style.display="none";

	document.getElementById('partner').style.top="150px";

	document.getElementById('call_center').style.top="170px";

	document.getElementById('immobilien').style.top="190px";

	document.getElementById('produkt').style.top="210px";

	document.getElementById('weg').style.top="230px";

	document.getElementById('contact').style.top="250px";

	document.getElementById('impress').style.top="270px";

 } 

 else if (document.all)

 {

	document.all[id].style.display="block";

	document.all[sub_partner].style.display="none";

	document.all[partner].style.top="150px";

	document.all[call_center].style.top="170px";

	document.all[immobilien].style.top="190px";

	document.all[produkt].style.top="210px";

	document.all[weg].style.top="230px";

	document.all[contact].style.top="250px";

	document.all[impress].style.top="270px";

 } 

 else if (document.layers) 

 {

	document.layers[id].display="block";

	document.layers[sub_partner].display="none";

	document.layers[partner].top="150px";

	document.layers[call_center].top="170px";

	document.layers[immobilien].top="190px";

	document.layers[produkt].top="210px";

	document.layers[weg].top="230px";

	document.layers[contact].top="250px";

	document.layers[impress].top="270px";

 }

}[/PHP]

Der Auf- und Zuklappeffekt funktioniert, nur die Positionen sind im FF ganz anders. Warum?

[geloescht_JesterDay]

...nur die Positionen sind im FF ganz anders. Warum?

Kenne den Rest deiner Seite nicht, aber ich schätze mal: "CSS-Boxmodell". Das wurde im IE falsch berechnet. Seit IE 6 ist es im standardkonformen Modus allerdings richtig.

Dann kommt es noch darauf an, ob du deine Elemente absolut oder relativ positionierst. Da kann z.B. davor irgendwas schief gelaufen sein, was dann diese Auswrikung hat (bei welchem Browser das dabei korrekt ist, lässt sich nur aus der Abbildung schwer sagen).

[CyberDemon]

Dann kommt es noch darauf an, ob du deine Elemente absolut oder relativ positionierst. Da kann z.B. davor irgendwas schief gelaufen sein, was dann diese Auswrikung hat (bei welchem Browser das dabei korrekt ist, lässt sich nur aus der Abbildung schwer sagen).

Die Elemente werden absolut ausgerichtet.

Der restliche Code:

.div_navigation{

position:absolute;

top:80px;

left:1px;

width:200px;

height:525px;

background-color:#484848;

}[/PHP]

[PHP]<div class="div_navigation">
<div id="arbeit">
<a href="#" class="link" onClick="show_arbeit('sub_arbeit');">Arbeitnehmerüberlassung </a>
</div>
</div>

Muß man auch Angaben für "padding", "border" und "margin" angeben?

[geloescht_JesterDay]

<div class="div_navigation">

	<div id="arbeit">

		<a href="#" class="link" onClick="show_arbeit('sub_arbeit');">Arbeitnehmerüberlassung </a>

	</div>

</div>[/PHP]

Muß man auch Angaben für "padding", "border" und "margin" angeben?

Also wirklich helfen kann ich dir von hier aus nicht. Ich kenne den gesamten Aufbau deiner Seite und die Idee dahinter und alles nicht. Nur soviel, die absolute Positionierung schein ja nur für das DIV um die Menüpunkte zu sein. Innerhalb dieses DIVs sind die einzelnen Boxen dann ja wieder relativ positioniert. Wahrschenilich hast du irgendwo noch etwas wegen padding oder margin. Kann ich dir aber jetzt ehrlich nicht sagen

Nur noch ein Hinweiss:

[...]href="#"...onclick[...] sind 2 unterschiedl. Events. Es wird also einmal das onclick ausgeführt und dann auch noch dem Link gefolgt. Normalerweise geht das dennoch gut. Wir haben hier bei uns aber auch schon situationen gehabt, in denen es erst funktioniert und dann später (reproduzierbar) mit demselben Link nichtmehr.

Tip: mach es korrekt und zwar mit:

<a href="javascript:void(show_arbeit('sub_arbeit'));">

void() deswegen, weil er sonst u.U. den evtl. Rückgabewert (auch wenn er nicht unbedingt da/definiert ist) als Ziel nimmt.

[CyberDemon]

Nur soviel, die absolute Positionierung schein ja nur für das DIV um die Menüpunkte zu sein. Innerhalb dieses DIVs sind die einzelnen Boxen dann ja wieder relativ positioniert. Wahrschenilich hast du irgendwo noch etwas wegen padding oder margin.

Alle (!) Elemente sind absolut positioniert.

Die Angaben zu padding und margin habe ich so angegeben:

padding:1px;

border:1px;

margin:1px;[/PHP]

[geloescht_JesterDay]

Ist deine Seite standardkonform?

[CyberDemon]

Ist deine Seite standardkonform?

"This Page Is Valid HTML 4.0 Strict!" Laut dem W3C-Validator.

Ich habe in dieser Zeile:

<script language="JavaScript" src="script.js" type="text/javascript">

... das Attribut language="JavaScript" entfernt.

Jetzt sieht es in allen Browsern gleich schlecht aus. Das heißt, das sich das Untermenü bei allen Browsern über das Hauptmenü legt.

[geloescht_JesterDay]

Jetzt sieht es in allen Browsern gleich schlecht aus. Das heißt, das sich das Untermenü bei allen Browsern über das Hauptmenü legt.

Dann stimmt wohl die Positionierung nicht

[CyberDemon]

Nach diesen Änderungen klappt nun alles!

(Noch jedenfalls)

Danke Dir! :uli