Fiks CSS-bugs

I moderne webdesign er det mange utfordringer. De fleste av oss støter på ulike problemer, enten vi er nybegynnere eller drevne i faget. Utfordringen vi vil sette fokus på denne gangen er nettlesere og CSS-bugs. I denne kategorien stiller Internet Explorer (IE) i særklasse, og står for svært mange av problemene som skal løses. IE 6 er den store synderen, men også IE 7 har en del problemer.

Vi har samlet sammen fire velkjente og typiske IE 6 bugs, og forklarer deg hvordan du kan unngå eller fikse dem, slik at utseende på nettsiden fungerer i moderne nettlesere og IE 6. Stoffet er hentet fra de dyktigste folkene i bransjen og vi tar en gjennomgang for dere her.

Double Float-Margin Bug

Dette er en bug du garantert vil treffe på ofte om du jobber med floatlayouter. Kort fortalt dobler IE marginen på en div som har float og margin på den siden du setter float til. Løsningen er enkel og krever ikke en lang forklaring. Sett diven med float:left; eller right; til display:inline; så slutter IE med «togangern».

100px avstand til venstre i Safari

200px avstand til venstre i Internet Explorer 6

Løsningen har ikke fått noe eget navn, men ble oppdaget av Steve Clason. Det er ikke nødvendig å isolere den for IE 6, men alle ekspertene anbefaler at bugfiksinger markeres godt.

.wrapper {
    float: left;
    padding: 3px;
    width: 405px;
    display: inline;  /* Fikser IE double float-margin bug. */
    margin-left: 100px;
    background: #fac853;
    border: 1px solid #fff;
}

Løsningen er også brukt for å fikse Duplicate Indent Bug.

IE Escaping Floats Bug

Dette er en bug du ikke vil treffe på like ofte som Double float-margin bug, men den gir innsikt i litt av den merkelige oppførselen IE har, som er veldig nyttig.

Se for deg en div uten width, height eller float. Inni denne er det mange diver som har width, height og float:left; eller right;. Til slutt er det plassert en div med clear: both; for å sikre at den ytre diven omslutter alle de indre divene.

Safari pakker innholdet fint inn

Igjen strever Internet Explorer 6 med å oppføre seg riktig

Fordi den ytre diven ikke har width, height eller float, omslutter IE 6 bare noen få av de indre divene som har float. Det finnes flere løsninger på problemet, men det er kun Holly Hack (height:1%;) som ikke endrer på css'en som som i utgangspunktet er skrevet. Holly Hack trenger heller ikke å begrenses til IE 6 med * html, om du ønsker å slippe det.

Oppdatering

imack påpeker i kommentarfeltet under, at det ikke nødvendigvis er så fritt frem å eksponere Holly Hack for alle nettlesere. Flott om noen kan finne noe info om dette. Uansett er det kanskje like greit å bare eksponere height: 1%; for nettleseren som trenger det.

    * html .wrapper { height: 1%; } /* Viser Holly Hack kun for IE 6 */

En annen løsning er å gi den ytre diven en bredde eller floate til venstre eller høyre. Den merkelige oppførselen forklarer oss at IE trenger dimensjoner på layoutelementer for å vise dem riktig.

Explorer 6 Duplicate Characters Bug / IE 6 Ghost text bug

Mange utviklere liker å kommentere koden for å ha orden og oversikt. Dette kan by på problemer med IE 6 i spesielle tilfeller. Når den siste diven i en serie av diver med float:left; eller right; har maksimal width innenfor en omsluttende div, vil IE 6 duplisere de to siste tegnene i den siste diven, dersom det er HTML kommentarer blant divene med float. Jo flere kommentarer du putter inn mellom divene, jo flere tegn vil IE 6 duplisere.

Safari viser siden normalt

Internet Explorer 6 dupliserer deler av innholdet

Det er flere måter å unngå denne bugen på. Om den siste diven med float:left; har mer enn 3px avstand på høyre side av den omsluttende diven, oppstår ikke problemet. Det er også en mulighet å gi den siste diven med float en (negativ) margin på -3px. En annen løsning er å benytte conditional comments <!--[if !IE]> comment <![endif]--> som i dette tilfellet er satt til å sjekke og skjule kommentarens innhold for IE.

Den siste løsningen er ikke like godt dokumentert som de andre. Løsningen er å sette display: inline; på divene med float.

CSS Box model

Av en eller annen grunn har IE valgt å tolke CSS Box model på en annen måte enn moderne nettlesere. IE inkluderer border og padding inne i width, mens moderne nettlesere legger til border og padding til width.

Det er viktig å merke seg at denne oppførselen ikke er noe problem så lenge man sørger for å gi HTML-dokumentet riktig deklarasjon. Det kalles å sette nettleseren i standards-compliant mode.

For eksempel:

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

Hvordan unngår man feilene i første omgang?

Det viktigste du kan gjøre for å unngå nettleserfeilene er å sørge for at koden er riktig. For utviklere som jobber på Mac, har vi tidligere nevnt Panics Coda, som kommer med innebygget validering (koblet mot w3.org). Men at koden er riktig, betyr ikke bare at den skal validere, for det skal den gjøre uansett. Det er også viktig å skrive semantisk riktig kode.

Veerle Pieters forklarer det godt:

Make sure your markup is well structured, in other words use the appropriate markup for the appropriate content. Use headings for titles, paragraphs for blocks of text, ordered and unordered lists to sum things up in list form or for your navigation, fieldsets in combination with legend and label elements for forms... Last but not least, use tables only for what they're meant for, tabular data.

Verktøy

CSSEdit

Milestones kan være et meget nyttig verktøy i bugfiksing om du bruker CSSEdit. Det fungerer slik at du lagerer revisjoner for CSS-filen du jobber på. Dermed er det enkelt å hoppe tilbake til en tidligere revisjon, hvis du får rotet til for mye i koden.

Firefox tillegg

- Web Developers Toolbar har litt av de samme egenskapene som CSSEdit, men også mye mer. Du kan for eksempel sjekke hvordan siden oppfører seg uten javascript, CSS eller bilder, som er en viktig del av tilgjengelighet og brukervennlighet.
- Firebug, med Yslow er også glimrende verktøy for alle som driver med webdesign. Med det kan du for eksempel teste hastigheten på nettsider, og optimalisere for best mulig strukturering av nettsiders ulike bestanddeler.

Kilder og ressurser:

Position Is Everything: Explorer Exposed!
CSS contents and browser compatibility
Starting with CSS and bug fixing tips
How To Attack An Internet Explorer (Win) Display Bug
Internet Explorer 6 Ghost text bug fix
Internet Explorer and the CSS box model
The Motive Web Design Glossary
On having layout (hasLayout) Takk for tipset imack