Webudvikling Browser - Fejl !

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..

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.

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.