
Too cool for Internet Explorer - nu med CSS
Jeg har ikke rodet med Cascading Style Sheets (CSS) før, men været heldig at folk som Morten Liebach har kunnet mestre det på Linuxforums hjemmeside. Her til aften fik jeg rodet med CSS nok til at kunne se hvor elegant det egentlig er.
Med eksemplet på http://www.w3junkies.com/toocool/join.php er man jo hurtigt fremme med noget web-banner, som jeg ikke har kunnet lavet tidligere på et pæn måde.
En anden sød firefox reklame fandt jeg på http://surl.dk/2fh/.
Jeg må vist hellere få læst http://www.html.dk/tutorials/css/ for CSS er da en elegant måde at styre stilen på et website.
- Hov - må jeg virkelige prøve de her ting på version2.dk'''
- Skal jeg'
- Nej - jeg må vel egentlig ikke....
- Tjooo - det er sjov ....
- Så skidt da - det rammer da kun øverste venstre og nederste højre hjørne....
P.S. Ja min Ubuntu Linux er ved at opgradere til 7.04 mens jeg skriver dette.
a#tooCool { position: fixed; right: 0; bottom: 0; display: block; height: 80px; width: 80px; background: url(http://www.w3junkies.com/toocool/files/too_cool_sash.png) bottom right no-repeat; text-indent: -999em; text-decoration: none; }
Too Cool for Internet Explorer
a#tooCool2 { position: fixed; left: 0; top: 0; display: block; height: 80px; width: 80px; background: url(http://www.w3junkies.com/toocool/files/too_cool_med.png) bottom right no-repeat; text-indent: -999em; text-decoration: none; }
Too Cool for Internet Explorer Too Cool for Internet Explorer
Ved at læse dette indlæg accepterer du at enhver ublu udfordring af version2.dks design skyldes kreative udfoldelser hos skribenten og version2.dk er ikke ansvarlig for hvis din computer skulle springe dig i luften, din hund skulle falde død om eller din kone skulle være dig utro.
(Tak Sune)
Peter Toft er senior specialist hos Renesas Mobile og har blogget om open source og Linux siden Version2's begyndelse. Blogger også jævnligt om andre sjove teknologi-områder.
Follow @petertoftKommentarer (23)
Jeg ved ikke, om det er min Nvidia-driver, der er noget galt med, eller din kode, men den cool'e reklame gentager sig selv lidt spøjst, når man scroller (er allerede på Ubuntu 7.04).
Nårh, ja. Det var noget om tilranet redaktionel frihed.
Som vi ved, Peter, så helliger målet nu engang midlet i vores branche - specielt når målet er så ædelt som dit. Viva la liberté!
Uden at være cand.websted. kan jeg sagtens nikke genkendende til at CSS nu i en periode har gjort det meget lettere at få Ting(TM) til at se ordentlige ud i en browser.
Den første CSS-funktionalitet jeg faldt for var "typografihåndtering" som jeg kendte det fra LaTeX og kapable tekstbehandlingsprogrammer. Det var en fornøjelse bare at kunne skrive løs, og alligevel være i stand til at ændre skriftsnit eller -størrelse i en håndevending.
Dine fine bannere er dermed en elegant løsning i mellemklassen, men CSS besidder immervæk niveauer der kan forbavse en del. http://www.csszengarden.com/ har nogle udmærkede eksempler.
Tillykke, Peter. Det er ikke hver dag man får lov at udvide sin horisont samtidig med man mobber et vellidt offer. :)
P.S.: Det blev 14 lange nanosekunder, men nu går jeg altså også i seng.
Firefox 2.0 på Edgy virker siden fint her, hvor logoerne bliver stående mens jeg scroller.
Jeg kan vist teste på samme vis med Nvidia om ca. 9 min på Ubuntu 7.04....
Til Jesper Stein Sandal: Brug "konqueror http://www.version2.dk/artikel/2200" - det er vist en firefox fejl
Brug Windows XP med Firefox, det virker! Øhh.. det er måske det forkerte forum at sige det i. ;-)
Godt sådan noget pjat ikke virker i ordentlige browserer som for eksempel links og lynx. Og i firefox ødelægger det tilsyneladende den "It's all text"-extenision jeg bruger til at redigerer TEXTAREA-felter.
På min Ubuntu Feisty med nvidia kort (dog med nvidia's egen driver), ser det fint ud.
Sjovt nok havde jeg problemer på Edgy med at baggrunden trak efter ting der stod stille når man scroller.
Nu når vi snakker ubuntu, er der nogen af jer der har opgraderet en ubuntu 6.10 server til 7.04 ?
ifølge http://www.ubuntulinux.org/getubuntu/upgrading
skal man installere update-manager-core
anh@www2:~$ sudo apt-get install update-manager-core
Reading package lists... Done
Building dependency tree
Reading state information... Done
E: Couldn't find package update-manager-core
andre der har samme problem ?
Typisk at lige så snart en ph.d. får mulighed for at lege med noget, så ødelægger han straks noget andet :-) - som f.eks. HTML valideringen:
"Line 215 column 22: document type does not allow element "style" here."
(jaja, jeg ved godt, at der er et par fejl på siden i forvejen, men jeg vil have lov til at lave mit sjov alligevel)
Jeg har skrevet om min egen første feisty oplevelse på min <a href="http://codegirl.dk"> blog </a> Det er en lækker distro.
Jan Keller Pedersen; jeg kan godt se at valideringen ikke er ok pt. Jeg har fejlrapporteret det jeg ikke selv kan rette. Tidligere rapporter om w3c fejl er blevet rettet på version2.dk, så følg med....
Jeg mente nu, at dit lille trick med at putte style tags i teksten er imod w3c standarden - og så ville jeg lige erkende, at det ikke kun er din skyld, at valideringen fejler på indeværende side... men hvis de andre småfejl havde været rettet, så ville dit trick have fået den til at fejle :-)
Men ja - CSS er fantalastisk.
CSS er dejligt, og det gør det nemmere for de fleste, men tit så ødelægger Internet Explorer hele opbygningen af CSS med deres inkompatibilitet med W3C standarderne, håber virkelig at det bliver endnu bedre end det er i forvejen på IE7
Undskyld at jeg bryder ind i jeres lærde diskussioner, men noget af det ovenstående forekommer mig at være lidt sært, med en svag overtone af noget paranoidt. Eller måske snarere med en undertone af noget fra samme slemme skuffe (som det fx findes materialiseret nede i højre hjørne).
Ved I hvad? Tag fri! Stress af! Få noget mere f.. host.. erie. Ærligt talt!
Hej Peter,
Hvis du vil lege mere med CSS, kan jeg kun anbefale dig at læse denne bog:
Fidusen med dette indlæg var egentlig mest min egen oplevelse af "hold da op - CSS er smart til at styre stil konsistent", at jeg så fandt "Too cool for IE" bannerne var bare en nemt eksempel at vise frem her.
Så tak Lars - jeg køber den :)
Fejlen skyldes en buggy nVidia driver i kombination med Compiz og firefox.
Da compiz bliver installeret per default i Ubuntu og aktiveret så snart det opdages at der er et kompatibelt grafikkort, er der nok mange der vil opdage denne fejl.
Det man kan gøre er et gå ind i System -> Preferences -> Desktop Effects og så det fra.
Jeg havde den fejl på Edgy UDEN Compiz/Beryl, ihvertfald uden at Compiz/Beryl var window manager, mener du evt. selve XGL/AIGLX/AddARGBGLXVisuals?
Du skal forøvrigt selv slå Desktop Effects til i Feisty, det skulle jeg ihvertfald. Men ok, selvom mit kort er kompatibelt, er der en god chance for at det ikke er listet hvis de bruger whitelists (Det er et Quadro wanna-be-professional NVS kort, effektivt svarer det vist til et GeForce 7200 Go).
Scroll opfører sig næsten rigtigt hos mig (RH EL5 + KDE 3.5.4 + FF 2.0.0.3 med ATI gfx, Thinkpad T41) bortset fra at når jeg scroller så bliver teksten nederst på siden sådan udtrukket indtil siden bliver gentegnet. Nogle gange bliver den gentaget mere og mere efterhånden som man scroller længere ned på siden.
Scroll opfører sig næsten rigtigt hos mig (RH EL5 + KDE 3.5.4 + FF 2.0.0.3 med ATI gfx, Thinkpad T41) bortset fra at når jeg scroller så bliver teksten nederst på siden sådan udtrukket indtil siden bliver gentegnet. Nogle gange bliver den gentaget mere og mere efterhånden som man scroller længere ned på siden.

