browserkompatibel aber wie?

[Butterstulle]

Moin liebe Freunde des tabellenlosen designs,
Ich versuche meine Seite browserkompatibel zu gestalten. Dabei habe ich aber in Opera und Mozilla häßliche Verschiebungen im Design.
Die einzelnen Layer sind mal dichter mal weniger zusammengerückt.
Wo liegt der fehler im script?!

PHP-Code:

/* CSS Document */
body{
    margin-top: 0px;
    margin-left: 0px;
    background: #EBE9E9;
    

}
body a.{
    color: #0BA0D7;
}
#logo {
    position: absolute;
    background-image:url(pics/head.jpg);
    background-repeat: norepeat;
    height: 130px;
    width: 100%; 
    
    
    
}

 
#clink {
    position: absolute;
    height: 20px;
    left: 39px;
    padding-top: 5px;  
    font: 12px "Trebuchet MS", Georgia, "Times New Roman", Times, serif; 
    width: 700px; 
    top: 135px
    
    
}

#clink a {
    border-right: #ffffff 3px solid;
    padding-right: 10px;
    display: inline; 
    padding-left: 10px; 
    border-left-width: 0px;
    background: #cccccc; 
    
    
     
    color: #065674;
    
    text-align: left; 
    text-decoration: none;
    border-style: solid;
    border-width: 2px;
    border-color: #cccccc; 
}

#clink a:hover {
    
    background: #D5F0FA; color: #0BA0D7; 
    border-bottom-width: 2px;
    border-bottom-color: #0BA0D7;
    }
    
#content{
    
    position: absolute;
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    font-size: 80%;
    margin-top: 150px;
    margin-left: 39px;
    margin-bottom: 15px;
    padding-top : 5px;
    padding-left : 10px;
    padding-right: 5 px;
    padding-bottom : 30px;
    width: 473px;
    z-index : 20;
    border-style: dashed;
    border-width: 2px;
    border-color: #cccccc;
    background-color: #ffffff;
    
}
#content a:hover {
    color: #0BA0D7;
    }
    
    
#content h1 {
     padding: 5px;
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    font-size: 120%;
    font-weight: normal;
    color: #666666;
    background-color : transparent;
}

#content h2 {
    padding: 3px;
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    font-size: 80%;
    font-weight: bold;
    color: #09688B;
    background-color : transparent;
}
#content h3 {
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    font-size: 80%;
    font-weight: bold;
    color: #666666;
    background-color : transparent;
}
#content p{
    margin-top: 0px;
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    font-size: 80%;
    font-weight: normal;
    color: #333333;
    background-color : transparent;
    line-height : 10%;
    
}
#ele1{
    margin-left: 520px;
    z-index: 10;
    padding-top : 20px;
    position: absolute;
    top: 5px;
    }
    
    
#kontakt{
    popsition: absolute;
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    font-size: 80%;
    padding-top : 10px;
    padding-bottom : 30px;
    padding-left : 5px;
    padding-right: 5px;
    width: 473px;
    z-index :30;}
#kurse{
    position: absolute;
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    font-size: 80%;
    padding: 5px;
    top: 170px;
    left: 525px;
    width:220px;
    z-index : 40;
    border-style: dashed;
    border-width: 2px;
    border-color: #cccccc;
    background-color: #ffffff;
    }
#content d{
    
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    padding-top: 0px;
    padding-left: 5px;
    font-size: 70%;
    font-weight: normal;
    color: #333333;
    background-color : transparent;
    line-height : 100%;
    
}
#info {
    position: absolute;
    font-family: "Trebuchet MS", Georgia, "Times New Roman", Times, serif;
    padding: 5px;
    top: 0px;
    left: 485px;
    width:150px;
    z-index : 40;
    border-style: dashed;
    border-width: 2px;
    border-color: #cccccc;
    background-color: #ffffff;
    } 


um das ganze übersichtlich zu halten hier die url:oopsgrafix.de

und hier eine kurze Übersicht wie die Layerbenannung gedacht ist.
Ich danke euch schon mal für eure hilfe und hoffe auf selbige, denn ich hab echt keine Idee mehr.

dicken Gruß,
Butterstulle

[webmichl]

Schau Dir mal prefix Child-Selector-Erklärung in diesem Thread an - könnte auch Dich betreffen...

[Butterstulle]

Moin Michl,
Danke für den link.
Jetzt hab ich verstanden woran es liegt, aber noch nicht ganz wie ich dieses ie spezifikation richtig einbinde.
Prefix schreibt da:

in dem ich die problemzonen für den ie vorab definiere, dann mittels child-selektor das css an sich richtig stelle!

frei nach dem grundsatz: sowenig hacks wie nötig (child-sel. ist ja kein hack) und richtigen code verwenden (der für den ie ist oft eben nicht richtig gem. spezifikation, weil der ie den code falsch interpretiert)!

Diesen Part habe ich noch nicht ganz geblickt.
wie hast du den Spagat umgesetzt?

Gruß,
Butterstulle

[webmichl]

Ich hab's zuerst für den IE entwickelt und anschliessend die Problemkinder für den Rest zurechtgerückt ( prefix Vorgehensweise hatte ich nämlich auch nicht so ganz kapiert... )

[prefix]

morgen

sorry, bin heute ziemlich im stress, ev. erklärt das hier die sache verständlich

[prefix]

kurz, wenn du z.b. einen ie5 zur verfügung hast, schau dir mal diese beispielseite im ie5 und in den anderen browsern an.

der ie5 macht beide container gleich breit, während sie im ie6, mozfb usw. jedoch unterschiedlich breit (wie es sich gehört) dargestellt werden!

ie5: rechnet breite (200px) + border (je 10px) = 220px, hat hier jedoch den bug, dass er die 20px von den 200px abzieht -> rote fläche somit nur noch 180px

standard: breite = breite + border = 220px breit, rote fläche (richtig) 200px!

das ist der box-model-bug des ie, der in kleinen variationen auch in ie6 noch auftreten kann - dadurch verschiebungen gegenüber den "guten" browsern

[Butterstulle]

Moin Moin,
ich bin auch im streß und schau nachher mal rein, werde mich melden, Danke!!!!
Gruß,
Butterstulle

[Butterstulle]

Moin,

Das sind schon mal prima Infos.
Das hab ich schon mal begriffen. Was ich noch nichts ganz verstehe, ist der Bezug zu meinem css. script s.o.
Vielmehr, wie kann ich da die einzelnen Browser ansprechen?
Ein kleines Beispiel wäre toll.
Oder vielleicht nochmal die Erklärung des voice-family Ausdrucks bezogen auf mein css.

THXund lieben Gruß,
Butterstulle

[prefix]

grundsätzlich ist es nicht gut, zuviel mit hacks bzw. child-selektoren zu arbeiten - der beste code ist der einfache code

leider jedoch ist es oft nötig, dafür child-selektoren bzw. tanteks hack heranzuziehen.

was genau verstehst du bei voice-family nicht?? das ist tantek's hack - alles davor lesen alle browser, alles NACH voice-family dann nur noch browser ie > 6 bzw. die anderen, also nicht der 5er!

um dein problem mal konkret behandeln zu können, lad es bitte mal ins netz

[Butterstulle]

Moin auch,

aha, damit ist mir auch weitergeholfen.
Meine css datei ist oben angeführt oder brauchst du noch den Quellcode meiner .php datei?

Muß ich denn bei dem jeweilig verrutschen Container meine margin Angaben mit diesem voice-family Begriff verändern?
Danke erstmal,
Butterstulle

[prefix]

langsam

tantek's hack hilft dir bei problemen mit nn oder opera oder mozilla GAR NIX!

dafür ist der child-selector zuständig

bitte lad es mal rauf - dann schaun wir uns mal die troubles an

[Butterstulle]

Meine css datei kannst du oben einsehen ebenso den link und eine Erklärung für die Container im ersten post, oder was soll ich hochladen?

Sei mir nicht böse, meine Kleine weigert sich heute einzuschlafen, deshalb bin ich zeitweise nicht online.
Bitte nicht als desinterresse werten, ich bin brennend interessiert

Vielen dank schonmal

[prefix]

sorry butterstulle, hab ich oben übersehen

na, dann kümmer dich mal um die kleine, keine angst - wir können das morgen auch noch lösen - werd mir das jetzt mal ansehen...