WMH - Positionierung in IE und FF unterschiedlich

Hallo alle zusammen. Ich bin neu hier und komme auch gleich mit meinem ersten Problem ^^

Ich bin gerade dabei eine Webseite zu gestalten die über div menüs gesteuert wird. Mein Problem ist nun, das die Menüs im Firefox prima angezeigt werden und auch richtig positioniert sind, im IE jedoch sind sie leicht verschoben.

Hier ein Bild um zu verdeutlichen was ich meine (Die Leiste oben ist nach links und nach unten verschoben, die Leiste unten nur nach unten):

Bild

Hier der Auszug aus der CSS Datei der die divs betrifft:

Code:

/* Div Hauptmenü oben */

div.navigation {

        z-index:3;

        color: #cecece;

        margin: 0px;

        padding: 0px;

        font-size: 12px;

        font-family: Arial, Helvetica, sans-serif;

        letter-spacing: 2px;

        background-color: #7F7F7F;

        position: absolute;

        width: 850px;

        height: 17px;

        top: 54px;

        left: 250px;

        padding-bottom: 1px;

        padding-top: 3px;

        }

ul.navigation {

        list-style-type: none;

        margin: 0px;

        width: 850px;

        margin-left: 0px;

        }

ul.navigation li {

        float: left;

        }

/* Links Hauptmenü Oben */

ul.navigation a {

        margin: 0px;

        padding: 0px;

        display: block;

        font-family: Arial, Helvetica, sans-serif;

        color: #ffffff;

        text-decoration: none;

        letter-spacing: 2px;

        }

ul.navigation a:visited {

        margin: 0px;

        padding: 0px;

        display: block;

        font-family: Arial, Helvetica, sans-serif;

        color: #ffffff;

        text-decoration: none;

        letter-spacing: 2px;

        }

ul.navigation a:hover {

        margin: 0px;

        padding: 0px;

        display: block;

        font-family: Arial, Helvetica, sans-serif;

        color: #e7b405;

        text-decoration: none;

        letter-spacing: 2px;

        }

/* Div Hauptmenü unten */

div.bottom {

        background-color: #fcc300;

        margin-top: 175px;

        margin-left: 40px;

        text-align: right;

        position: static;

        bottom: 0px;

        width: 1050px;

        padding-bottom: 1px;

        padding-top: 3px;

        height: 17px;

        font-size: 11px;

        font-family: Arial, Helvetica, sans-serif;

        color: #515151;

        }

/* Links Hauptmenü Unten */

div.bottom a {

    margin: 0px;

        padding: 0px;

        font-size: 11px;

        font-family: Arial, Helvetica, sans-serif;

        color: #515151;

        text-decoration: none;

        }

div.bottom a:visited {

    margin: 0px;

        padding: 0px;

        font-size: 11px;

        font-family: Arial, Helvetica, sans-serif;

        color: #515151;

        text-decoration: none;

        }

div.bottom a:hover {

    margin: 0px;

        padding: 0px;

        font-size: 11px;

        font-family: Arial, Helvetica, sans-serif;

        color: #949393;

        text-decoration: none;

        }

Und hier aus dem Quelltext:

Code:

<div class="navigation">

      <ul class="navigation">

        <li><div style="width: 240px">&nbsp;</div></li>

        <li><a href="Teams.htm">Team</a></li>

        <li><div style="width: 15px">&nbsp;</div></li>

        <li><a href="partner.htm">Partner</a></li>

        <li><div style="width: 15px">&nbsp;</div></li>

        <li><a href="produkte.htm">Produkte</a></li>

        <li><div style="width: 15px">&nbsp;</div></li>

        <li><a href="projekte.htm">Projekte</a></li>

        <li><div style="width: 15px">&nbsp;</div></li>

        <li><a href="referenzen.htm">Referenzen</a></li>

        <li><div style="width: 15px">&nbsp;</div></li>

        <li><a href="medien.htm">Medien</a></li>

        <li><div style="width: 15px">&nbsp;</div></li>

        <li><a href="vertretungen.htm">Vertretungen</a></li>

      </ul>

    </div>

<div class="bottom">

        <a href="Kontakt.htm" target="_self">Kontakt</a> <img src="Bilder/Platzhalter.gif">|<img src="Bilder/Platzhalter.gif"> <a href="#" onClick="printPage();">Druckversion</a>

        <img src="Bilder/Platzhalter.gif">|<img src="Bilder/Platzhalter.gif"> <a href="Impressum.htm" target="_self">Impressum</a> <img src="Bilder/Platzhalter.gif">|

        <img src="Bilder/Platzhalter.gif"> Home <img src="Bilder/Platzhalter_Menue_unten.gif">

      </div>

Meine Frage ist nun ob es denn überhaupt eine Möglichkeit gibt, das im FF und im IE wirklich einheitlich darzustellen. Hoffe es kann mir jemand weiterhelfen. ^^

liebe Grüße
Tei

Hi und Herzlich Willkommen.

Tut uns leid, dass du solange hast warten müssen.

Ich denke mal das es an dem Box Model Bug des IE 5 liegt.

Kurze erklärung falls du damit nichts anfangen kannst Tongue

Laut W3C HTML Standart wird z.B. bei divs rahmen und ausabstände zu der in width angegebenen Hinzugefügt. Der IE rechnet die rahmen und Abstände allerdings nach innen ab.

Wie lösen wir das Problem? Ganz einfach wir benutzen einen anderen Bug des IE Wink

Du definierst deine CSS sachen wie immer und fügst nach der letzten Angabe einfach folgendes ein:

Code:

voice-family: "\"}\"";

                 voice-family:inherit;

                 width: 200px;

                 }

html>body .deine CSS Klasse {width: XXXpx;}

Achtung da wo deine CSS Klasse steht kommt die gleiche hin wie die, die oben steht.

falls du noch Fragen hast, frag einfach Smile

mfg: Robby

Also erst mal vielen, vielen Dank für deine Antwort, sie hat mir schon mal ganz schön weitergeholfen.

Ich hab die Balken jetzt wenigstens alle gleich hoch bekommen.

Jetzt hab ich aber noch eine Frage und ein Problem ^^

Meine Frage ist, was hab ich mit den Befehlen eigentlich genau gemacht habe, da ich immer gerne verstehe was ich da eigentlich in meinem Quellcode drinstehen hab.. =)

Und mein Problem ist immer noch das die Schrift im oberen Menue im IE noch zu weit links anfängt. Hab das auch versucht mit deinem Code zu verändern aber es hat nichts gebracht.
Das Problem scheint auch eher hierbei zu liegen (was den Abstand zwischen linken Frame :

Code:

<li><div style="width: 240px"> </div></li>

Was vom IE wohl anders interpretiert wird als von FF da ich sonst eigentlich schon an allen Angaben rumgebastelt habe um zu sehen ob sich was ändert..

Hab auch versucht das als CSS Klasse zu definieren:

Code:

div.abstand {

        width: 240px;

        }

Und dann mit deinem Code dranzugehen, dann wird es mir auch kurz richtig angezeigt aber springt dann wieder zurück..

Code:

div.abstand {

        voice-family: "\"}\"";

        voice-family:inherit;

        width: 280px;

        }

        html>body div.abstand {width: 240px;}

Weiß sonst auch nicht mehr woran es liegen könnte..

Sry ich hatte gestern nicht soviel Zeit, desshalb konnte ichs dir nicht genauer erklären.

Also was hast du da gemacht:

Wie gesagt der IE berechnet den in width angegeben teil inclusive rahmen, abstände usw. Das heißt man gibt dem IE erst die komplette breite also inclusive abständen. bei der codezeile "voice-family: "\"}\"";" stürzt der CSS Parser des IE kurz zeitig ab und macht erst mit der nächsten klasse weiter. Also er ignoriert alles was noch in dieser Klasse steht. Mit "voice-family:inherit;" macht ihr die änderung einfach wieder rückgängig. Alle anderen CSS Parser wie gecko (Mozilla und co.) und Netscape ignorieren diese Zeile und lesen unten die andere Breite, also die korrekte. Da neue angaben in CSS immer alte überschreiben wird die korrekte Breitenangabe verwendet.

Die letzte Zeile (html>body div.abstand {width: 240px;}) ist eigentlich nur für Opera (wird vom erfinder nicht umsonst "Be nice to Opera line" genannt ^^). es heißt nichts anderes wie html "first child" body und dann der div mit klasse .abstand dadrin. Also es ist für alle klassen .abstand die sich innerhalb von einem div befinden, die sich innerhalb des elements body befinden, was html als direkts übergeordnetes element enthalten. Hm ich kann nicht gut erklären Rolleyes

Und das ist immer der fall weil body nunmal immer direkt unterhalb von HTML steht. Warum das ganze? Ganz einfach: Der IE kann das nicht weil er zu doof dafür ist (wie selten das mal was beim IE nicht funktioniert...). Der Opera mag die zeile, wo der IE abstürtzt auch nicht, hat aber nicht den Box model hack, was dazu führt, dass der Opera die breite für den IE kriegt, es allerdigs richtig darstellen würde und dann wäre die Box zu breit.
Daher nochmal diese Zeile, dass auch der Opera sowas richtig anzeigt.

So genug geschrieben Tongue

was war jetzt genau mit der Schrift? Hab ich nicht so ganz verstanden ^^

mfg: Robby

Entschuldige, dass ich jetzt erst antworte.

Also erst mal danke für die Erklärung und die Hilfe ich denke ich hab es jetzt verstanden ^^

Hab durch die Erklärung jetzt auch das Problem mit der Breite in den Griff bekommen, aber nur wenn ich die letzte Zeile für den Opera weglasse, wenn ich die einfüge, lessen sowohl Firefox als auch IE den Inhalt aus.. wenn ich die Zeile also einfüge ist wieder alles verschoben.. liegt das daran das die neueren Versionen von FF und IE die Zeile auch verstehen können oder hat das vielleicht andere Gründe?

Vielen, vielen Dank nochmal und
liebe Grüße
Tei

welchen IE benutzt du denn, also mit welcher version testest du es?

mfg: robby

Mit Version 6.0

liebe Grüße
Tei