Dagens CSS hack

Dagens simpleste opgave bestod i at sætte en border på billederne i en kategori liste, og lave en on mouse over effekt på samme border.

Skide nemt tænker man, men sådan skulle det ikke være..

Efter første forsøg må jeg konstatere at det bare ikke virker i IE6. Fordi billederne er PNG og gjort ordeligt gennemsigtige med JavaScript, og det fedter altså så meget med styles at det faktisk er umuligt at få dem på..

Så tænker man at man da bare smækker det på det a tag der er om hvert billede, men så laver Firefox et nummer med at gøre borderen line-height høj istedet for at lægge den udenom billedet (jeg skal vist lige have fat i Morten for at få en forklaring på den).

Den endelige løsning har noget over sig:

  1. .category img,
  2. * html .category a {
  3.   border: 8px solid #c79a47;
  4. }
  5.  
  6. * html .category img {
  7.   border: none;
  8. }
  9.  
  10. .category img:hover,
  11. * html .category a:hover {
  12.   border: 8px solid #592381;
  13. }

PngFix gemmer img elementet, så den første selector har ingen effekt i IE6 med JavaScript. Desuden forstår IE6 ikke :hover på andet end a tags, så den første selector i rule nummer 3 ignorerer den for hårdt.

Regel nummer 2 fjerner borderen på billeder for IE6 igen, for det tilfælde at JavaScript er disabled og pngFix ikke er kørt. Så må de bare leve med at det ikke er gennemsigtigt.

'* html' tricket gemmer så de samme regler på a tagget for Firefox og IE7 istedet, med det resultat at IE6 laver borderen på a elementet, mens rigtige browsere bruger img tagget.

Det har da en hvis charme?

Blog tags: