Fra tabeller til CSS. Padding, bugs i browsere m.m

[Ratleto]

Etter å ha lest Vevutvikling med åpne standarder fikk jeg endelig forklart hvorfor man bør bruke CSS istedet for tables.

 

På Kleven.org ser man dagens design med tabeller, og på Kleven.org v2 ser man hva jeg har fått til i CSS.

 

Mitt første problem er hvordan å få til padding i #main. Jeg har prøvd med en "#main p" uten at dette hjalp? Jeg kan ikke sette padding i #main, for da blir footeren bare rar.

 

Et annet problem jeg har så langt, er at IE og Opera nå viser det ganske slik jeg vil ha det, men ikke Firefox. Forandrer jeg det slik Firefox "vil ha det", så blir det liksom "for smalt" i IE og Opera. 1-pixelskanter forsvinner og sånn. Er dette en kjent bug? Er det noe jeg kan gjøre, utenom å kjøre forskjellig CSS for IE/Opera og FF?

 

På tips.html v2 så skjer det noe rart i Opera. Footeren dukker opp LENGE før bunnen av sida... Hva kan jeg gjøre for å fikse dette, tro? Dette skjer i alle fall i min Opera v8.0.

 

Kleven.org v2 CSS-fil. Alt er ikke rydda opp i enda, men fra starten av fila og t.o.m. #footer er det ryddet.

 

Kortversjon for de som enda ikke har skjønt CSS vs tables for design: for å gjøre det lett tilgjengelig for f.eks. blinde, og for å lett forandre på design, bruk kun HTML til selve infoen på websiden og CSS til alt designet.

 

Edit: Fiksa litt på tittelen

Endret 18. mai 2005 av Ratleto

[Flyxer15]

det med Padding hvis du har #main p så blir det ikke padding lengre det er margin siden det skal bli på utsiden av p mellom p og #main.

 

det med at firefox viser 1px "for mye" er ikke egentlig en bug det er at firefox og IE ikke er enig med hvordan en box skal lages. IE tar med border som content det gjør ikke Firefox.

man kan kompentsere for dette med å legge til en "max-height:" og en "max-width:" disse taggene leser ikke IE, så hvis du setter max- verdiene til 2x border width mindre enn height og width så vil problemet blir fjernet for firefox og IE det kan bli et lite problem i Opera.

[Ratleto]

det med Padding hvis du har #main p så blir det ikke padding lengre det er margin siden det skal bli på utsiden av p mellom p og #main.

 

Takker. Tenkte på akkurat det, men testa ikke før du kom med tipset.

 

det med at firefox viser 1px "for mye" er ikke egentlig en bug det er at firefox og IE ikke er enig med hvordan en box skal lages. IE tar med border som content det gjør ikke Firefox.

 

Akkurat ja. Da er det jo passe håpløst å lage ting med fast bredde i CSS fortsatt da.

 

man kan kompentsere for dette med å legge til en "max-height:" og en "max-width:" disse taggene leser ikke IE, så hvis du setter max- verdiene til 2x border width mindre enn height og width så vil problemet blir fjernet for firefox og IE det kan bli et lite problem i Opera.

 

Og ikke skjønte jeg hva du mente med dette.