Hva er gæærnt?

[_Paulsen_]

Heisann!

 

Har nå den siste tiden prøvd å sette meg enda bedre inn i CSS, og synes jeg kommer meg for hver gang jeg bruker litt tid til det.. Men det er fortsatt noe jeg ikke helt skjønner... Hvis noen kunne tatt en bitteliten kikk på følgende kodesnutt, og kanskje kommet med et tips ang. hva som er feil, hadde jeg blitt særs takknemlig! Det som er saken er at den ikke er lik i IE og Opera...

body {
background-image: url(bg2.gif);
background-attachment: fixed;
background-repeat: repeat x;
font-family: tahoma, verdana, san-serif;
font-size: 12px;
text-align: center;
color: #000;
}

p {
font-size: 10px;
}

h1 {
font-size: 14px;
font-weight: bold;
}

#header {
background: #fff;
border: 2px solid #0076A0;
margin-left: auto;
margin-right: auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 5px;
text-align: right;
height: 100px;
width: 700px;
}

#content {
color: #0076A0;
margin: auto;
text-align: left;
line-height: 16px;
width: 700px;
height: auto;
padding: 10px;
border: 2px solid #0076A0;
background-color: #efefef;
}

 

Det skal sies at dette er bare et utdrag fra min css-kode, som forøvrig er i en meget tidlig testfase

Endret 7. september 2004 av OShea22

[joffar]

Hva er forskjellen?

 

Har bare IE 6 her...

[PoleCat]

Grunnen til at den ikke er helt lik, er at hver nettleser i utgangspunktet har sine egne standardverdier for margin og padding.

 

En grei regel er å sette universalregelen

* {
margin: 0;
padding: 0;
}

som gjelder for alle elementer, for deretter å styre disse selv.

[_Paulsen_]

Hva er forskjellen?

Forskjellen er at header'en blir vist smalere i Opera enn det den gjør i IE, og at <h1> i #content blir vist lenger ned på siden i Opera enn i IE, hvis du skjønte hva jeg mente nå..

[svamp]

Og sett lik padding på #header og #content, eller minsk width på elementet med like mye padding som du har på det.

[_Paulsen_]

Grunnen til at den ikke er helt lik, er at hver nettleser i utgangspunktet har sine egne standardverdier for margin og padding.

 

En grei regel er å sette universalregelen

* {
margin: 0;
padding: 0;
}

som gjelder for alle elementer, for deretter å styre disse selv.

Jasså? I did'nt know! Thanks

 

EDIT:Fant ut av problemet nå, etter at jeg la inn kodesnutten din, Pole En fordel å ha lik padding i header og content gitt, hehe...fant ut at jeg ikke hadde det!

Endret 7. september 2004 av OShea22

[_Paulsen_]

Og sett lik padding på #header og #content, eller minsk width på elementet med like mye padding som du har på det.

Aahh, kjära nonn, hehe Erre mulig det a? Blind på begge øya her jeg sitter gitt

[PoleCat]

Og legg også merke til det svamp nevner her ja. Om du f.eks har en div som skal være 500px bred, med 10px padding inkludert i dette, blir det:

 

div#test {
 width: 480px !important;
 width /**/ : 500px;
 padding: 10px;
}

 

Du vil da få samme resultat i alle nettlesere, da første width blir prioritert av alle lesere som legger padding på bredden, og den andre er for IE5- som ikke gjør det.

 

Correct me if I'm wrong.

[_Paulsen_]

Ting begynner og lysne for meg her nå, PoleCat

 

Takk for hjelpen!