?CSS/html? Problem, Firefox _:/:_ Opera

  • Hi zusammen!

    also ich will nicht lang drum rum reden, ich komme gleich zur Sache :

    Fuer das Design meiner Seite habe ich mir einen Kasten mit Css erstellt, der im html Dokument zentriert wird. In diesem Kasten sind dann andere Kaesten etc. . Funktionierte soweit wie geplant, sowohl im Firefox 1.5 Browser, als auch in Opera 8. Wie gewollt wurde der erste Kasten zentriert angezeigt.
    Weiter Feinheiten wie z.B. genaue px Angaben werden in den Browsern leicht unterschiedlich interpretiert, also habe ich eine Browserweiche eingebaut.
    Ziel war, und ist erreicht, das Opera auf ein fuer sich zugeschnittenes Css Dokument zugreift und Firefox auf seins.
    Zunaechst sind beide Css Datein gleich, und ich bin auch nicht dazu gekommen sie zu veraendern ( ausser der Farbe ), aber es muss sich ein Fehler eingeschlichen haben, denn in Opera wird der Kasten nicht mehr zentriert angezeigt, sondern am linken Rand :smilie101: ....

    Hier die Css Dateien ( fuer Firefox mzdesign.css & fuer Opera opdesign.css)

    mzdesign.css:

    /* CSS Document */
    <!--

    body {background-color:#000000;margin-left:8px;margin-bottom:0;margin-right:0;margin-top:0;
    color:#262323; font-family:Arial}

    #kasten1 {
    postion:relative;
    height:1000px;
    width:937px;
    background:#000000;
    border:solid 2px #0a7f15;
    border-bottom:0;
    border-top:0;
    margin-left:14px;
    padding:0;
    }
    #kasten2 {
    float:left;
    height:1000px;
    width:106px;
    background:#2e2d2d;
    border:solid 2px #0a7f15;
    border-bottom:0;
    border-top:0;
    border-left:0;
    }
    #kasten3 {
    float:right;

    height:1000px;
    width:803px;
    background:#2e2d2d;
    border:solid 2px #0a7f15;
    border-bottom:0;
    border-top:0;
    border-right:0;
    }
    a:link {color:#262323 ;text-decoration:none;}
    a:active {color:#262323 ;text-decoration:none;}
    a:hover {color:#ffffff ;text-decoration:none;}
    a:visited {color:#262323 ;text-decoration:none;}


    h1 {margin-top:20px;font-size:medium;}


    -->

    opdesign.css:

    /* CSS Document */
    <!--

    body {background-color:#000000;margin-left:8px;margin-bottom:0;margin-right:0;margin-top:0;
    color:#262323; font-family:Arial}

    #kasten1 {
    postition:static;
    height:1000px;
    width:937px;
    background:#000000;
    border:solid 2px #0a7f15;
    border-bottom:0;
    border-top:0;
    margin-left:14px;
    padding:0;
    }
    #kasten2 {
    float:left;
    height:1000px;
    width:106px;
    background:#ffffff;
    border:solid 2px #0a7f15;
    border-bottom:0;
    border-top:0;
    border-left:0;
    }
    #kasten3 {
    float:right;
    height:1000px;
    width:803px;
    background:#ffffff;
    border:solid 2px #0a7f15;
    border-bottom:0;
    border-top:0;
    border-right:0;
    }
    a:link {color:#262323 ;text-decoration:none;}
    a:active {color:#262323 ;text-decoration:none;}
    a:hover {color:#ffffff ;text-decoration:none;}
    a:visited {color:#262323 ;text-decoration:none;}


    h1 {margin-top:20px;font-size:medium;}


    -->

    Und zu guter Letzt das html doku :

    <html>

    <head>
    <![if !IE 6]><link rel="stylesheet" type="text/css" href="mzdesign.css"><![endif]>

    <link rel="stylesheet" type="text/x-opera-css;charset=utf-8" href="opdesign.css">

    </head>
    <body>

    <div align="center"> </div>
    <div align="center"><div id="kasten1">

    <div id="kasten2">

    </div>

    <div id="kasten3">

    </div>

    </div>

    </body>
    </html>

    Eigentlich muessten mzdesign & opdesign ausgenommen der Hintergrundfarbe fuer kasten1 & 2 gleich sein, aber man weiss ja wie das ist, vllt uebersehe ich ja was! :smilie033:

    Ich danke euch schon mal im Vorraus und hoffe ihr koennt mir helfen.

    gruss :.:UltraVa Flyin:.:

    nur das besteste