menü mit divs und css schaut auf verschiedenen browsern anders aus [Hilfe!]

Jacky2611

Hi!
Gleich im voraus, ich bin neu. Sollte das also an der falschen stelle sein bitte ich einen mod es zu verschieben.

Ich versuche gerade wieder mit html und css zu beginnen (hab es das letzte mal vor 2 Jahren verwendet) und erstelle gerade eine Seite mit einem auf css basierendem Menü.

Mein momentaner code:

Spoiler anzeigen

HTML

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Titel</title>
        <style type="text/css">
            html, body {
                margin:0;
                padding:0;
                height:100%
            }




            #hintergrund {
                min-height:100%;
                height:auto !important;
                height:100%;
                background:#d95d5d;
                width:100%;
                margin:0 auto;
                z-index: 1;
                position: absolute;








            }

            #menu {
                min-height:100%;
                height:auto !important;
                height:100%;
                background:#968767;
                width:15%;
                position:fixed;
                z-index: 2;








            }
       #menuelement {
        display:block;
                height:25%;
        min-height:25%;
        height:auto !important;
                background:#923457;
                width:100%;
        text-align:center;
                z-index: 3;








                




            }





            #inhalt {
                overflow: auto;
                margin-left: 15%;
                float:right;
                width:85%;
                background:RED;
                min-height:100%;
                height:auto !important;
                height:100%;
                z-index: 4;
                position: absolute;








            }
        </style>
    </head>
    <body>
        <div id="hintergrund">
            <div id="menu">

                <a href="http://www.tagesschau.de/" id="menuelement">
                [menue]
                </a>

                <a href="http://www.tagesschau.de/" id="menuelement">
                [menue]
                </a>

                <a href="http://www.tagesschau.de/" id="menuelement">
                [menue]
                </a>

                <a href="http://www.tagesschau.de/" id="menuelement">
                [menue]
                </a>

            </div>
            <div id="inhalt">
                    inhalt
            <div>








        </div>
    </body>
</html>

Alles anzeigen

Ich habe mit windows zu arbeiten begonnen und jetzt das ganze Projekt auf meinen Laptop kopiert (osx10.8 ) um im Urlaub weiterarbeiten zu können.
Jedoch haben auf meinem mac alle css formatierungen nicht mehr richtig funktioniert:

So sieht es jetzt auf meinem mac aus:

Spoiler anzeigen

So in parallels(virtuelles windows):

Spoiler anzeigen

und so auf windows(Ziel):

Spoiler anzeigen

Bin mit meinem Latein am Ende, es sollten eigentlich alle browser unterstützt sein...
Danke im voraus, Jacky

EDIT:Und es ist wichtig das die Größen mit Prozent und nicht mit px geregelt sind.
EDIT2: CSS wird später in eine externe Datei verschoben.

explanator

Dir fehlt der Doctype.
Warum verwendest du z-index?
Warum verwendest du Position: absolute?
Warum verwendest du erst min-height und danach height: auto? Was davon willst du denn?
Verzichte auf !important, das ist nicht notwendig, oder du machst etwas falsch.
Warum zentrierst du dein Hintergrund?
Warum ist dein Listenmenü nicht eine Liste bestehend aus UL und LI Elementen?

Ein div inhalt zu nennen ist aussagelos, welcher Inhalt wird repräsentiert?
Das DIV hintergrund kannst du dir sparen, dein Hintergrund ist body, wende die Farbe darauf an.

synaptic

dieses konstrukt hier:

CSS

min-height:100%; 
height:auto !important; 
height:100%;

kenne ich nur als min-height-fix für den guten alten IE6.
aber, dann gehört der teil hier:

CSS

height:auto !important; 
height:100%;

in die ie6fix.css ausgelagert und nicht direkt ins normale stylesheet rein

Tags