[ Content | Sidebar ]

Hvordan lage CSS for IE7 og lavere

Selv om jeg vil gi blanke i IE6, så må vi nok leve med å hacke CSS for IE en stund til.

Så for å gjøre dette begynner man først med å legge følgende kode i <head> elementet ditt:

<!--[if lte IE 7]><link type="text/css" href="style-ie.css" media="screen" rel="stylesheet" /><![endif]-->

Denne koden forteller da en nettleser at stilarket style-ie.css bare skal lastes hvis den er IE7 eller lavere.

Neste skritt er da å lage style-ie.css: dette kan gjøres i en teksteditor som f.eks. notepad (notisblokk).

I denne skal man da bare legge inn de elementene som ser feil ut i en eller annen IE nettleser.

Nå er det slik at IE6 og IE7 oppfører seg litt forskjellige fra hverandre, så man må ty til forskjellige metoder for å fortelle hva som gjelder for hvilken versjon:

  • foo { } vil gjelde for alle IE varianter
  • * html foo { } vil kun leses av IE 6
  • html>body foo { } vil kun bli forstått av IE7

Om du lurer på om dette funker så har jeg laget et lite IE Eksempel.

Published January 5, 2008

Filed in Uncategorized

Tags: , , , , ,

RSS Comments 15 Comments

- Trackback

  1. Comment by radiohode

    Det du sier er egentlig at man kopiere den vanlige css-filen, og deretter slette alt man ikke trenger i kopien? Vil da IE hente resten av det som trengs i den vanlige css-filen?

    Eller er det sånn at den henter alt fra den vanlige css-filen, og deretter overskrives enkelte av verdiene fra den andre css-filen?

    January 8, 2008 @ 11:08 pm

  2. Comment by Kristin

    Det er egentlig mindre jobb å bare kopiere akkurat de elementene som er feil.
    Det vanlige stilarket vil bli lastet uansett, og så blir hva man enn har hivd i style-ie.css overskrevet.

    January 9, 2008 @ 8:33 am

  3. Comment by radiohode

    Vel, nå jobber jeg med saken, men ikke søren om jeg får til dette. er i header.php, men det ser ikke ut til at det nye stilarket hentes. Jeg kan lime inn koden over nøyaktig som den står? Ikke bytte ut ” med ‘ ?

    January 9, 2008 @ 9:56 pm

  4. Comment by radiohode

    Beklager spamming, men nå fikk jeg det til. Det viste seg at alle CSS-kodene for IE starter med _ (underscore). Så da trimmet jeg i små trinn til det ser ok ut. Så da kan jeg se bort fra den metoden du beskriver her. Men jeg har søkt etter dokumentasjon i temaet på at det er sånn det er gjort. Men det står ikke noe der. Grrr!

    January 9, 2008 @ 10:47 pm

  5. Comment by Kristin

    _ hacken er for at IE skal ignorere css deklarasjonen.

    I det lange løp vil det være enklere å bruke eget stilark, siden det ikke er så mye å ha oversikt over.

    Det er mulig du må bytte ut ” med ekte (shift+2) typer i koden over siden WP har en tendens til å vise dette feil.

    January 10, 2008 @ 9:06 am

  6. Comment by radiohode

    Men du: Jeg er helt sikker på at koden med _ foran påvirket IE og bare IE. Og jeg tror at den bare påvirket IE6.0.
    Men det er flere rare ting i 3K2-koden, tror jeg. Som at header-imaget er definert i CSS-fila, og at 3K2 dermed ikke kan gjøre som f.eks. Iversen, med roterende header-images.

    January 10, 2008 @ 9:58 pm

  7. Comment by Kristin

    Hmm, kanskje jeg roter..?

    Du kan jo bare hive ut den bilde koden til background på headeren hvis du vil bruke noe annet.

    January 10, 2008 @ 10:01 pm

  8. Comment by radiohode

    Det står bare katalog/header.jpg
    (I stedet for “katalog” står det navnet på katalogen, som jeg ikke husker.)

    Så jeg må i så fall bygge om header.php en del. Og der…. der er jeg på verdens tynneste is. :-)

    January 10, 2008 @ 10:06 pm

  9. Comment by Kristin

    Har du ikke en kode du kan se etter da?

    January 10, 2008 @ 10:18 pm

  10. Comment by radiohode

    Hvor finner jeg sånt? :-)

    January 10, 2008 @ 11:03 pm

  11. Comment by Kristin

    Er ikke “rotating bannners” en plugin da?

    January 11, 2008 @ 9:31 am

  12. Comment by radiohode

    Jo, men koden er ment puttet inn i header.php, tror jeg. Ikke i css-filen.

    January 11, 2008 @ 8:10 pm

  13. Comment by Kristin

    Ja, men du får sikkert instrukser om akkurat hvordan det skal legges inn?

    php biter ikke.

    January 11, 2008 @ 8:16 pm

  14. Comment by radiohode

    Hehe. Neida, php biter ikke. Eller sjelden. Men jeg har tatt sånn vaksine.

    Problemet er at jeg hadde regnet med en kommando hvor det står noe sånt som “header image = bla bla bla”. Det gjør det ikke. Det vises til en klasse (?) i css.

    Men du: Du ser at jeg har rydda opp masse? Har fulgt alle rådene dine, tror jeg.

    January 11, 2008 @ 8:27 pm

  15. Comment by Kristin

    Vaksine mot php-biting er bra, da får man ikke panikk.

    Hva står det som instruks da?

    Ellers begynner siden din å bli mye bedre. Fint noen hører på meg ;-)

    January 11, 2008 @ 10:34 pm