CSS in de war bij verschillende webbrowsers

[BasWeb]

Goedenavond allen,

Ik ben een beginnend website bouwer en loopt tegen een probleem aan. Ik heb zelf een website gebouwd d.m.v. HTML en CSS bestanden.

Maar nu ik de website online zet, gaan al mijn CSS instellingen niet meer op, omdat elke webbrowser (Chrome en IE getest) de opmaak

door elkaar gooit. Zou iemand mij willen helpen aub. hieronder mijn CSS bestand:

body {

background-color: #EBEAEA;

font-family: "Trebuchet MS", sans-serif;

font-size: 100%;

color: #5E5E32;

font-size: 15px;

}

#libo {

width: 240px;

height: 240px;

margin-left: -27.9%;

margin-top: -22.6%;

background-color: #5E5E32;

}

#wschaal {

width: 250px;

height: 250px;

margin-left: -32%;

margin-top: -40%;

background-color: black;

position: relative;

z-index : 2;

}

#kop {

width: 900px;

height: 230px;

margin-left: 25%;

margin-top: -2%;

border-left: 4px solid #5E5E32;

border-bottom: 4px solid #5E5E32;

background-color: #cdb979;

}

#linker {

width: 240px;

height: 1350px;

margin-left: 10%;

margin-top: 0.8%;

background-color: #cdb979;

border-right: 4px solid #5E5E32;

border-top: 4px solid #5E5E32;

font-size: 18px;

color: #ffffff;

z-index: 1;

}

#kop p {

font-family: Georgia, serif;

font-size: 30px;

font-weight: bold;

color: #3D090C;

font-variant: normal;

padding-left: 350px;

padding-top: 12px;

}

#kop y {

font-family: Georgia, serif;

font-size: 18px;

font-weight: bold;

color: #3D090C;

font-variant: normal;

padding-left: 0px;

padding-top: 12px;

}

#midden {

width: 700px;

margin-left: 7%;

margin-top: 14%;

}

.title1 {

font-weight: normal;

font-size: 26px;

color: #3D090C;

}

#voet {

font-family: Georgia, serif;

font-size: 18px;

font-weight: bold;

color: #3D090C;

font-variant: normal;

}

table {

margin: 5px 0 30px 0;

}

table tr th, table tr td {

background: #5E5E32;

color: #FFF;

padding: 5px 4px;

text-align: left;

}

table tr td {

background: #eee;

color: #5E5E32;

border-top: 1px solid #FFF;

}

table tr:hover td {

background: #fff;

color: #555;

border-top: 1px solid #FFF;

}

Alvast bedankt voor uw moeite!

Groetjes Bas,

- - - Updated - - -

Hij is trouwens binnen Google Chrome ook anders op mijn 21" beeldscherm, als op mijn 19" beeldscherm..

[leroy]

Wij kunnen niet alle CSS reviewen zonder de HTML code erbij.

Maar ik zou graag als tip mee willen geven om in plaats de CSS allemaal zelf te schrijven, een soort HTML+CSS framework te gebruiken. Wat deze doen is eigenlijk voor de meest gebruikte 'dingen' een standaard HTML en CSS opmaak meegeven die naar smaak nog aan te passen zijn. De beste die ik tot nu toe heb gevonden is bootstrap (Bootstrap). Versie 2 is wat makkelijker om te leren, versie 3 is wat lastiger om mee te beginnen.

Op deze website is een aantal templates te downloaden die je volledig kunt aanpassen. Zo kun je helemaal "blanco" beginnen, maar ook al met een volwaardige homepagina (Getting started · Bootstrap).

Misschien is het verstandig om uw html en css hierop te baseren. De website is dan ook direct in alle nieuwste browsers goed te lezen omdat bootstrap geoptimaliseerd is voor verschillende browsers met de laatste CSS3 techniek.

Voor een aantal ´snippets´ verwijs ik naar de website bootsnipp (Home of free code snippets for Bootstrap | Bootsnipp.com). Deze website bied een heleboel HTML snippets aan die gemaakt zijn op het bootstrap framework. Denk aan een mooie opmaak voor: formulieren, tabellen, homepagina, etc.

MVG,

Leroy