Hjælp til salg (Ikke internet)

Svar: Webudvikling Browser - Fejl !

Adam Barry — Tue, 03 Aug 2010 05:21:32 GMT

Jeg ved godt at det er lang tid siden at der er blevet skrevet på denne tråd, men jeg synes nu alligevel, at jeg vil kaste et par linjer ind på den, da jeg har et par små fif til, hvordan man sørger for at ens state-of-the-art-website (XHTML/HTML5 & CSS) også rent visuelt fungerer med Internet Explorer 6 (IE6).

Først og fremmest, så er det vigtigt at holde fast i at IE6 sagtens kan fortolke "liquid layout" (eks. float: left) hvor elementerne har display: block, men har nogle problemer i forhold til padding og margin, der godt kan give en et chok, når man første gang ser sit værk i den gamle browser. Min løsning på dette er at indlede mit stylesheet (eller første stylesheet, hvis du har flere) med følgende definition, der sørger for at nulstille padding og margin for samtlige elementer:

* {padding: 0; margin: 0;}

Husk at værdien 0 er ren, og derfor ikke har nogen enhedsangivelse (eks. px, % eller em).

Denne metode betyder at du er nødt til at definere padding og margin for alle de elementer, der ikke skal have værdien 0 i disse properties, men mit bud vil være, at du allerede gør dette (måske med undtagelse af li-elementer i brødteksten).

Når du nu har nulstillet padding og margin er næste skridt, at du skal holde to ting in mente:

IE6 er lidt dummere end nyere browsere (men det er jo også en aldrende karl), forstået på den måde, at den skal have nogle klarere størrelsesdefinitioner for elementer end de nyere browsere: Width: 100% går bare ikke altid med IE6 – ofte skal der nogle konkrete størrelsesdefinitioner til (eks. width: 108px). Konsekvensen er at man skal kende sit layout og sine elementer,
Margin tolkes ikke ens (giver forskellige afstande) af de forskellige browsere, så undlad så vidt muligt at bruge den når det gælder layout. Det gør derimod padding, og hvis man er lidt kreativ, så er det muligt at bruge padding som erstatning for margin, så man stadig er i stand til at skabe luft mellem sine elementer.

Hvis vi f.eks. forestiller os et element (<div class=”container”></div>), der i alt er 120px bredt, har en border på 1px hele vejen rundt, og har 5px luft mellem border og indhold, så skal elementet defineres på følgende måde:

.container {width: 108px; border: 1px solid black; padding: 5px;}

Definitionen (udregningen) for width-propertien er blevet til på følgende måde:

Width:
- elementets bredde (120px).
- – border-left (1px).
- – border-right (1px).
- – padding-left (5px).
- – padding-right (5px).
- = 108px.

Samme metode gælder naturligvis også for udregning af height på et element (bortset fra at der naturligvis så er tale om hhv. -top & -bottom i stedet for -left & -right).

Skulle det alligevel vise sig, at nogle elementer har behov for særskilt styling i IE6, så kan dette gøres ved at indsætte * html inden (eller som del af, om man vil) din selector, hvormed det ikke er nødvendigt med et særskilt stylesheet til IE6. Hvis vores .container-element fra før havde behov for særskilt styling (eks. en rød baggrundsfarve) i IE6 kunne det eks. se ud som følger:

* html .container { background-color: red; }

For lige at opsummere min indgangsvinkel til IE6-compliant CSS:

Nulstil padding og margin for alle elementer.
Brug padding (og aldrig margin) til layout-definitioner.
Vær meget specifik med størrelses-definitionerne på dine elementer.
Håndtér IE6-specifik styling med * html selector.

Svar: Webudvikling Browser - Fejl !

Peter Assentorp — Fri, 02 Apr 2010 00:30:51 GMT

Nu er jeg selv opvokset med IE6 og dengang FireFox kun var noget "nørderne" brugte. Dengang galt det om at lave mange div-elementer - især pga de kendte bugs såsom "peak-a-boo" og "doublemargin" (float og margin attributten på samme element gav dobbelt værdi - yeah!).

Jeg har personlig aldrig været fan af at lave et seperat stylesheet til IE6. Det virker i mine øjne lidt kluntet kodemæssigt, og jeg ved det stortset altid kan lade sig gøre, at få det til at virke i alle browsere - så længe man kender til IE6 "små" finurligheder :-)

Er man først begyndt på css og (x)html i IE7 generationen, kan jeg godt forstå man bander og svovler. Dengang da IE7 kom på banen virkede alle kunders IE6/Safari/Opera optimeret sites automatisk i IE7.

Jeg tror aldrig du finder et software-værktøj der kan klare sagerne for dig, da meget IE6 styling er trial and error og så "lærer" man IE6 lige så stille - men det er vist også at spilde tiden på et døende stykke software :-)

Mit tip er at bruge massere af divs (især når det gælder floats og hold igen med brug af heights - husk at sætte font-size:0px; og line-height:0px; hvis du skal bruge et element med en lav height værdi) - og ellers så lad eventuelt andre "bugfixe" dit site til IE6 ;-)

Er dit problem mere relateret til javascript fejl, så overvej at skifte til et jslib såsom jQuery.

Er dit problem mere relateret til png-support, så er der ikke meget mere end at rulle håbløst med øjnene.

Håber du kan bruge svarene.

Svar: Webudvikling Browser - Fejl !

Mr. Moski2.net — Thu, 01 Apr 2010 23:29:05 GMT

Det gør den jo for så vidt heller ikke - der findes en JS-fil der tror den er FireBug ;) Men det er et imponerende stykke arbejde vil jeg sige.

Svar: Webudvikling Browser - Fejl !

Arlo — Thu, 01 Apr 2010 23:26:58 GMT

Mr. Moski2.net:

Til enhver form for debugging af UI på IE (sjov bogstavleg, egentlig :) ) ville jeg nødigt være foruden FireBug Lite: http://getfirebug.com/firebuglite

Woow tak for linket jeg vidste faktisk ikke at firebug fandtes til IE..

Svar: Webudvikling Browser - Fejl !

Mr. Moski2.net — Thu, 01 Apr 2010 22:57:55 GMT

Til enhver form for debugging af UI på IE (sjov bogstavleg, egentlig :) ) ville jeg nødigt være foruden FireBug Lite: http://getfirebug.com/firebuglite

Svar: Webudvikling Browser - Fejl !

Peter J. Jensen — Wed, 31 Mar 2010 14:02:33 GMT

Vi har også 10 % der stadig bruger IE6 på vores site.

Det er nemt at vurdere om man stadig skal optimere mod IE6.

Kan de 10 % kunder som bruger IE6 genere en værdi der kan dække udviklingsomkostningerne - så optimer endelig mod IE6
Skaber de 10 % IE6 brugere ikke nok værdi. Så brug pengene på noget andet.

Derudover skal man også være opmærksom på hvem der lægger pengene på siden. Er ens primære kunder større danske virksomheder, hvor der stadig en del der sidder fast i IE6, så er det farligt at ignorere IE6. Desuden synes jeg at "brand" værdien falder drastisk når jeg kommer ind på en hjemmeside jeg ikke kan se - selvom jeg ikke har den mest opdaterede browser. Så hvis man ikke gider optimere mod IE6, så send dog i det mindste brugeren et andet sted hen, lav en boks der forklarer hvorfor siden ser håbløs ud eller lign.

Konklusion: (Desværre!) kan vi ikke helt afskrive IE6 - selvom det et helvede at optimere mod den.

Teknisk tip: Det kunne have sparet mig en del timer at have kendt til "display:inline;" ved at sætte denne attribut på alle float elementer kan en del af problemerne med float og margin løses.

God påske!

Svar: Webudvikling Browser - Fejl !

keysersoze — Wed, 31 Mar 2010 13:48:26 GMT

Jeg mener ikke at man konsekvent hverken kan sige at man skal eller ikke skal understøtte IE6 - det må være en opvejelse i forhold til hvem målgruppen er. Jeg har sites kørende med stor variation i målgruppen og deraf følgende stor forskel i browsere, specifikt omkring IE6 ligger jeg på alt fra 2-11 % af IE-brugerne - de steder hvor andelen ligger på 2% gør jeg ingenting, hvorimod jeg ikke mener jeg kan tillade mig hverken at ignorere eller pege de 11% hen på en "opgradér"-side.

En opgradér-side kan være en god og pæn måde at "slippe af" med en masse arbejde for en ofte meget lille del af de besøgende - i hvert fald hvis man er opmærksom på målgruppens muligheder. Mange virksomheder kører stadig IE6 og selvom de netop burde have viden til at få opgraderet, modsat farmor, er det ofte ikke viden der er begrænsningen men en blanding af økonomi og ikke mindst krav om understøttelse af ældre systemer, der ikke kan køre i nyere/alternative browsere og ikke bare lige kan fornys/opgraderes.

Så kend målgruppen og tag en beslutning ud fra det.

Svar: Webudvikling Browser - Fejl !

Peter Lauge — Wed, 31 Mar 2010 12:24:13 GMT

5-10% af de statistikker jeg har set for danske sites, er brugeren stadigvæk en IE 6.0.

Hos os www.esprezzo.dk er vi hårde - vi sender den til en info side om at update browseren.

Der er sikkert også et par stykker der surfer rundt med en IE 5.5 til MAC endnu.

Svar: Webudvikling Browser - Fejl !

mrsam — Wed, 31 Mar 2010 12:14:31 GMT

Men er det ikke vores job som webdesignere, at sørge for at tingene virker, om det så er til IE6, Firefox eller whatever? Ingen tvivl om, at mange virksomheder sikkert gerne vil opdatere, men når det pludseligt betyder, at de muligvis skal købe nye maskiner eller bruge en masse udviklingstimer på et eller andet intranet fra stenalderen, ja så ved vi godt i hvilken retning pilen drejer. For mange mennesker er det "ikke bare lige" at opdatere, fordi deres system er bundet op omkring ældre platforme og software.

Og jeg er helt enig med dig Holder man sin kode simpel og så semantisk korrekt som man overhovedet kan, så vil det som regelt se pænt ud i alle browsere :)

Svar: Webudvikling Browser - Fejl !

Mikael Boel Laursen — Wed, 31 Mar 2010 11:48:33 GMT

Det er korrekt at mange stadig bruger IE6, men vi webdesignere kan ikke blive ved med at støtte dem, bare fordi de ikke vil opdatere. Jeg optimerer altid til IE7, og min erfaring er, at hvis siden fungerer i IE7, så fungerer den til dels også i IE6. Og hvis man følger reglerne og holder sin kode enkel og validerende, så er det ikke svært at få siden til at se fin ud i IE6 browsere.

Eksterne stylesheets er smarte nok, og nogle gange nødvendige for visse elementer. Men generelt kan optimering sagtens klares med et enkelt stylesheet.

Man kan kort sagt sige: Just keep it simple :)

Svar: Webudvikling Browser - Fejl !

mrsam — Wed, 31 Mar 2010 11:40:53 GMT

Mikael:

Som udgangspunkt optimerer man ikke længere til IE6.

Det er da rigtig mange delte meninger omkring. Jeg har efterhånden fulgt en del diskussioner omkring dette emne og der er ingen tvivl om, at mange giver udtryk for deres frustrationer omkring optimering af design til IE6. Mange er dog stadig af den opfattelse, at så længe der er en brugerflade af IE6, så bør man understøtte det. Hvorfor begrænse tilgængeligheden for folk, der ikke har mulighed for at upgradere? Hvis det potentielt er 5-10 procent af besøgende der kan sidde med IE6, bør man så ikke understøtte dem?

Godt nok så har Google meldt ud, at de vil udfase IE6, samt at Youtube i fremtiden ikke vil understøtte IE6 - og det vil helt sikkert skubbe IE6 brugerfladen i en nedadgående retning - men spørgsmålet om mange af de mennesker som sidder på computere med IE6 er villige til at opgradere? For mange virksomheder vil det betyde sekscifrede beløb.

Personligt gør jeg ligesom Mikael når jeg udvikler hjemmesider.
Åbner IE6, IE7, IE8 og Firefox og tjekker konsistent når jeg laver opdateringer.

Svar: Webudvikling Browser - Fejl !

Mikael Boel Laursen — Wed, 31 Mar 2010 10:56:29 GMT

Som udgangspunkt optimerer man ikke længere til IE6. Både fordi den er virkelig besværlig, og netop fordi den er utrolig gammel efterhånden.

Der er mange forskellige regler der spiller ind, og det ville være umuligt at liste dem alle. Måden jeg har lært det på er ved erfaring. Jeg har simpelthen prøvet mig frem. Udover det tjekker jeg alle mine hjemmesider i alle browsere løbende når jeg laver dem, så jeg ikke får en grim overraskelse når jeg er færdig.

Svar: Webudvikling Browser - Fejl !

Michael — Wed, 31 Mar 2010 08:32:04 GMT

Ikke andet end at man nogle gange bliver nødt til at lave et separat stylesheet til <IE7.0

Det kan være rigtig bøvlet nogle gange at få IE6.0 til at spille optimalt da det er en gammel browser.

Jeg ville ikke ofre så mange ressourcer på det da IE6.0s markedsandel endelig er på vej ned til negligerbar niveau.( ~5% iflg. FDIM.)

Mvh. Michael

Webudvikling Browser - Fejl !

Arlo — Wed, 31 Mar 2010 07:44:52 GMT

Hej Aminoer

Jeg har et spørgsmål når i retter browser fejl iforhold til iE6, har i et godt tip eller værktøj man kan bruge?

Lad mig hører fra jer..