Border IE vs Mozilla

[azidG]

Sliter litt med en sak her;

 

Legger til en 1PX BORDER-RIGHT på en DIV i CSS, og det virker som Mozilla (og muligens Opera) legger denne pixelen til bredden på DIVen, mens IE tolker bredden på DIVen inkl. borderen.

 

Noen smart måte å fikse dette på?

[azidG]

Ingen som har vært borti dette før??

[Haraldson]

Boksmodellen.

 

Kort fortalt tolker IE denne modellen feil, mens andre nettlesere stort sett tolker dette korrekt.

 

Én måte å fikse problemet på kan du lese om på PoleCats blogg: Prioriterte verdier.

[azidG]

Takk for den!

 

Nå dukket det imidlertid opp et nytt kompatibilitetsproblem

 

Når jeg setter padding på en DIV forlenger da Mozilla bredden på DIVen tilsvarende, mens den beholder bredden jeg har angitt, i Opera og IE.

 

Noen triks på lur??

[Haraldson]

Igjen, prioriterte verdier er din venn.

 

div {
width: 500px !important; /* Denne velger FF, Opera osv */
width: 480px; /* Denne velger IE */
padding: 10px;
}

 

Det går kort fortalt på å definere forskjellige bredder, slik at det uansett ser likt ut.

[azidG]

Igjen, prioriterte verdier er din venn.

 

div {
width: 500px !important; /* Denne velger FF, Opera osv */
width: 480px; /* Denne velger IE */
padding: 10px;
}

 

Det går kort fortalt på å definere forskjellige bredder, slik at det uansett ser likt ut.

Fungerer bra for IE og FF, men i Opera blir det problemer. Opera viser DIVene likt som IE, men tar samtidig i bruk "!important" verdiene. Derfor blir det feil...

 

For noe knot...

[azidG]

Glem det; fiksa det med en ekstra DIV isteden.

Endret 10. februar 2005 av azidG