Avvik css Firefox vs Explorer

[glennsjo]

Hei!

 

Er relativt ny på css, men har de siste dagene fått inn masse kunnskap, så læringskurven er bratt.

 

Etter masse om og men fikk jeg midstilt en div, men da oppstod et nytt problem da jeg skulle teste det hele i Explorer (bruker vanligvis Mozilla). Det er forøvrig mye mulig jeg har sentrert dette feil, se kode nedenfor.

 

Forskjellen mellom IE vs Firefox er at det i IE er en glippe mellom to bokser. Oppe på siden har jeg et bilde, lagt som bakgrunn, og under en hvit boks.

I MF ser alt bra ut, i IE er denne hvite boksen litt lavere enn i MF.

 

Er dette et vanlig, kjent problem, eller er det noe jeg allerede nå burde lære meg å være oppmerksom på?

Jeg oppdaget dette problemet også en smule da jeg lekte meg med et bilde på en prøveside jeg lagde. Her ble bildet lagt lenger til venstre i MF, mens jeg justerte det "riktig" (i forhold til tekst) i IE.

 

Hvordan unngår jeg dette problemet? Jeg trodde det var fordelen til css, at man eliminerer slike avvik...?

 

På forhånd takk for innspill!

 

Siden det er mulig jeg aligner på feil måte er de to kodene her:

Boksen:

#enboks {
border: 1px dotted blue;
background: #FFF;
padding: 5em;
align: center;
width: 590px;
height: 220px;
margin-top: 134px;
font-family: verdana, arial, "sans serif";
font-size: 1em;
}

 

Bildet:

img {
 padding: 0px;
 margin: 20px 5px 5px 71px;
 float: left;
 background: #fff;
 border: 1px #ccc;
 position: relative;
}

[kroekkete]

Du blir mye klokere hvis du leser artikkelen til PoleCat om prioriterte verdier!

 

Mvh Primaxx

[Haraldson]

Prøv først med universalregelen:

* {
margin: 0;
padding: 0;
}

 

Dette nullstiller margin og padding på alle elementer, men om du spesifikkt spesifiserer marginer for andre elementer, vil disse marginene gjelde, sett at universalregelen din legges øverst i stilarket.

[glennsjo]

Jeg har satt margin og padding til 0 i body, så den skal vel være grei.

 

Men nå skal jeg lese den artikkelen før jeg spør noe mer ;-p

[halvardm]

Er jeg på villspor når jeg sier at du likevel må ha:

 

* {
margin: 0;
padding: 0;
}

Og at å ha det i body ikke hjelper?

[_Paulsen_]

Er jeg på villspor når jeg sier at du likevel må ha:

 

* {
margin: 0;
padding: 0;
}

Og at å ha det i body ikke hjelper?

Hva mente du med det der a? Hehe... Skal ikke ha den kodesnutten der i body nei.., hvis det var slik å forstå..

[Haraldson]

Er vel snakk om at elementer skal arve egenskaper, så da skulle det i utgangspunktet funke, men dette har jeg aldri sett funke i praksis.

 

Prøv med * for sikkerhets skyld.

[glennsjo]

Ja * forandra en god del.

 

Uansett prøvde jeg siden i Opera også, og siden den ene boksen som er midtstilt i både IE og MF er justert til venstre i Opera, har jeg bestemt meg for å lese litt mer før jeg går over til spørrestadiet...

 

[_Paulsen_]

Ja * forandra en god del.

 

Uansett prøvde jeg siden i Opera også, og siden den ene boksen som er midtstilt i både IE og MF er justert til venstre i Opera..

Har du testet med text-align: center; i body?

Endret 14. februar 2005 av OShea22

[glennsjo]

Som jeg sa er læringskurven bratt...

 

Underveis støtte jeg på nye problemer, som at f.eks. ting hoppet ut av sine plasser bare ved at jeg satte rammen til 0px, men jeg tror sannelig jeg klarte å lage ferdig forsiden helt uten tabeller til slutt =)

 

Jeg gleder meg til fortsettelsen...

 

Jeg måtte bare skifte fra id til class og gjøre noen andre (plukkete) tilpasninger...

 

Koden nedenfor midstiller siden, og funker både i IE, Opera og Mozilla.

 

css:

* {
margin: 0px;
padding: 0px;
}

body {
background: #E1E1E3 url(banner.jpg) no-repeat top center;
text-align: center;
}

p {
font-family: arial, "sans serif";
font-size: 1em;
}

div.container {
border: 0px black;
position: relative;
margin: 0 auto;
width: 750px;
height: 432px;
text-align: left;
}


#test p {
font-family: arial;
}

#enboks {
background: #FFF url(midt2.jpg) no-repeat center;
border: 0px dotted blue;
align: center;
width: 750px;
height: 376px;
margin-top: 202px;
font-family: verdana, arial, "sans serif";
font-size: 0.7em;
}

#maintekst {
border: 0px dotted green;
margin-top: 330px;
margin-left: 15px;
width: 200px;
top: 150px;
float: left;
height: 30px;
font-family: verdana, arial, "sans serif";
font-size: 0.8em;
}

#foten {
border: 0px dotted green;
background: #E1E1E3 url(bunn.jpg) no-repeat bottom center;
}

 

html:

(...)
<body>

<div class="container">

<div id="enboks">

<div id="maintekst">
Les siste fra vårt Newsroom:

</div>

</div>

<div id="foten">
<br/>
</div>

</div>

</body>

Endret 14. februar 2005 av Glenn'ern

[Haraldson]

Det skulle fungere supert det. Har du husket doctype i HTML?

 

Forresten trenger du ikke skrive 0px, 0 er 0 uansett hvordan du snur og vender på det.

[glennsjo]

Har husket doctype, ja.

 

0 er notert. Jeg leste et eller annet sted at man ikke trengte å skrive px overalt, men så at siden min forandret seg da fordi jeg ikke hadde lagt merke til at dette bare gjelder 0.

Men nå fikk jeg jo forklart det =)

[Haraldson]

Det er ikke bare på nullverdier dette gjelder. F.eks kan linjehøyde oppgis på følgende måte:

 

p {
line-height: 2;
}