Bredden på div forskjellig i iexplore og firefox

Melfacion · 11. mars 2005

Har laget en veldig basic side for å vise problemet mitt, så det er ikke kritikk på designet jeg er ute etter. Jeg har laget en div som skal inneholde alt innholdet på siden, som jeg har satt en bredde på 768px i css filen. Denne skal stå rett under headeren som også er 768px bred.

Dette gikk helt fint (tror jeg) til jeg satte padding på innholdsdiven. Problemet var at teksten gikk helt ut i kantene, og ble vanskelig å lese, så jeg satte en padding-left på 10px og plutselig var hele diven 10px bredere, og stakk utenfor headeren på høyre side. (firefox)

Så satte jeg bredden på diven 10px mindre og tenkte at sånn skal det være, helt til jeg testet siden fra en windowsmaskin med IE6 og så at diven nå var 10px for kort til å dekke hele headeren.

Det går sikkert ann å sette margin-left 10px på p elementet, men jeg bare lurte på hvilken browser som viser dette riktig. for første gang tror jeg faktisk at IE gjør det mer riktig enn firefox (og preview funksjonen i quanta som viste samme resultat som firefox).

(og ja, DTD er satt, så problemet bør ikke ligge der)

klikkbar link:

www.hybelen.net

Endret 11. mars 2005 av Melfacion

pgdx · 11. mars 2005

Ikke det at jeg leste posten din, men har du lest om Box model-hacken?

Melfacion · 11. mars 2005

nei, det har jeg ikke. skal se om jeg får tid til det etterpå.

edit: jeg uthevet det egentlige spørsmålet i første post

Bolson · 11. mars 2005

Firefox og Opera viser korrekt i henhold til spesifikasjonene til W3C. Mens IE viser ikke korrekt. Spesifikasjonen sier nemlig at bredden på padding, margin og border skal legges til bredden på selve diven. Se spesifikasjonene her. Særlig figuren gir forklaring. Bredden ved hjelp av attributten width angir således breddden på content (innholdet). IE er her helt på bærtur, dvs IE 6.0 gjør noe rett og noe galt avhengig av noe oppsett. IE er for det meste på bærtur.

Så dersom du skal lage design på sider anbefales følgende.

Lag sidene i henhold til W3C standard - primært XHTML1 strict
Bruk Firefox til å teste designen i første omgang.
Utfør nødvendige hacks (box-model hack) eller lag egen css for IE slik at den viser sidene på samme måte. Anbefaler det siste, da validerer også css.

Jeg gjør det på følgende måte - her er det brukt Transitional - grunnen er et CMS verktøy som ikke takler helt strikt.

//Første linje får IE til å oppføre seg likt for ver 5.5 og 6.0. De oppfører seg nemlig helt ulikt uten litt hjelp.

<?xml version="1.0" encoding="iso-8859-1"?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>Linnea Rådgivning</title>

//Denne koden henter css for IE browsere.

<!--[if IE]>

<![endif]-->

Som du ser bruker jeg egne css-filer for skjermvisning, utskrift og mobile enheter. Virker glimrende på mobile enheter med opera, men ikke i pocket internet explorer.

Her har du noen linker til ressusrer som er glimrende.

A list apart

Sitepoint

W3schools

Så - bare stå på.

Endret 11. mars 2005 av Bolson

Melfacion · 11. mars 2005

Enormt bra og utfyllende svar, Bolson. Tusen takk for hjelpen. Da er det visst jeg som har misforstått hva padding egentlig er.

Jeg trodde at paddingen ble trukket fra innholdet istedenfor å utvide hele boksen, noe som virker logisk for meg, men slik er det da altså ikke.

uansett, tusen takk for oppklaringen. artikkelen drange_net linket til hjalp også når jeg leste igjennom den.

Logg inn

Bredden på div forskjellig i iexplore og firefox

Anbefalte innlegg

Melfacion

Lenke til kommentar

Videoannonse

pgdx

Lenke til kommentar

Melfacion

Lenke til kommentar

Bolson

Lenke til kommentar

Melfacion

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Opprett konto

Logg inn

Populær nå

Mange menn var single før også - kvinner er ikke for kresne i dag 1 2 3 4 7

Trump 2025 1 2 3 4 234

Hvem er aktive 0 medlemmer