I første omgang lykkes det at opnå et rimeligt resultat med at bruge padding-bottom for at få hævet teksten på knappen op. Desværre ødelagde denne Firefox løsning til gengæld oplevelsen i både Chrome og alle alle IE browserne. Og løsningen endte i bedste fald i et kompromis, hvor teksten sad en smule for højt i IE og Chrome og en smule for lavt  i Firefox.

En grundig søgning på “vertical alignment input button” viste, at problemet var velkendt, og jeg fandt dette gode fix på stackoverflow: Fix af bug med vertical alignment på input submit element:

input::-moz-focus-inner {/*Remove button padding in FF*/
    border: 0;
    padding: 0;
}

I mit tilfælde var det border propertien, der løste problemet. Og linjen med padding kunne fjernes, da jeg havde fjernet eksisterende padding på knappen for at få visningen så ensartet som muligt i de forskellige browsere.

Fikset med moz-focus-inner  har dog den bivirkning at den stiplede linje i Firefox, der viser at knappen er aktiv forsvinder. Dette kan give problemer for brugere, der navigerer et website med tastaturet.

Browsernes forskellige default rendering af tekst og padding på knapper kan i det hele taget give problemer. En anden kendt bug er de meget brede knapper i Internet Explorer 7. Dette problem kan løses med følgende følgende bug fix: problemer med padding på knapper i IE.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Første gang blev buggen løst af en kollega, som siden glemte, hvad hans løsning var. Så da buggen dukkede op igen, måtte vi starte forfra. Forrige gang fik jeg aldrig ram på buggen, og da tekstgentagelserne kun optrådte i IE6 under helt bestemte forhold blev problemet  tilsidesat.

I dag dukkede buggen så op igen, i forbindelse med flytningen af et tekst element. Denne gang i IE7 hvor de sidste 3 characters i en bestemt streng blev gentaget uden for flowet og samtidig forstyrrede det øvrige flow på siden. Den gentagne tekst var kun synlig i visse situationer (helt konkret når man for søgte at se sin kurv, uden at der var andet indhold mellem kurven og sidens footer), men til gengæld fuldstændig konsistent i disse tilfælde.

En hurtig søgning afslørede at buggen kaldes ghost bug på engelsk. Der var dog mindre enighed, om hvordan ghost buggen fikses.  Her er et par af de nævnte forslag:

• Tjek at siden har en korrekt doctype declaration
• Forsøg at fjerne floats
• Undgå floats og width på 100% sammen
• Eksperimentér med fast højde på elementet og owerflow hidden

Ingen af disse forslag løste dog vores ghost bug.

Fix af ghost buggen

Mange af IE bugs skyldes eller fremprovokeres af brug af floats, så den løsning lå jo lige for. Desværre hjalp det ikke at fjerne floats på hverken elementet eller parent elementer, der også havde floats. Næste forsøg gik så på at se på både floats og widts i forældre elementerne. Og her dukkede løsningen op. Et div element 2 niveauer oppe havde en float left kombineret med en width på 100%. Ved at nedsætte width på dette element til 99.8% fik jeg has på ghost buggen.

Det kan synes ulogisk at vi først floater elementer for bagefter at give dem en width på 100%. Det skyldes, at hvis du har mange floatede div elementer inden i hinanden, og f.eks. kun den inderste div indeholder tekst. Så vil den yderste div ikke have samme højde som det indhold der vises på skærmen. Populært sagt så kollapser div-tagget. Dette giver problemer med f.eks. margin-top/padding-top på de efterfølgende elementer selv om man har clearet den ovenstående blok. Men det var et sidespring.

Fix af div tags der kollapser

Mødte endnu en ghostbug og fandt derfor et par nye metoder til at undgå at div’er der indeholder floatede div’er kollapser, hvis ikke parent div-tagget ikke også er floatet.

Man kan f.eks. give det kollapsede parent div-tag en overflow: auto eller hidden. Eller man kan give det en display:table.

Artikel om hvordan undgå div-tags der kollapser.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Jeg er stødt på problemet  med de  meget brede knapper i IE en del gange efterhånden. Derfor dette blogindlæg.

Løsningen er simpel:

input {
    overflow: visible;
    padding: 0 4px;
}

Efterfølgende skal du så selv sætte en passende padding på dine knapper, da ovenstående fix fjerner paddingen helt.

Du skal dog være opmærksom på at denne løsning kan have visse bivirkninger eller måske ikke virke efter hensigten, hvis din knap er placeret inde i en tabel.

Se evt. denne post for en diskussion af problemer med padding på knapper placeret inde i en tabel:  IE button width fix

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Der findes mange løsninger, problemet er at vælge den rigtige. Både i forhold til hvilke behov man har, og i forhold til hvor let det enkelte png fix er at bruge.

Jeg har udvalgt to af de bedste, der hver især har sine styker i forhold til transparent png.

Den lette vej til transparent png for IE6

Unit PNG transparency fix er den bedste allround løsning.

Du downloader et lille JavaScript (unitpngfix.js), lægger det  i websites javascript mappe og peger på det i html headeren. Pak det ind i en conditional comment, så sikrer du, at kun IE6 browsere downloader JavaScriptet:

<!–[if lt IE 7]>
        <script type=”text/javascript” src=”javascript/unitpngfix.js”></script>
<![endif]–>  

Du skal også downloade et lille gif billede på  1×1 pixel, som du placerer i din grafik mappe.  Til sidst skal du  i toppen af unitpngfix.js, angive stien fra den aktuelle webside til denne gif:

var clear=”grafik/clear.gif”;

Derefter virker alle de transparente png’er i IE6.  Png billederne skal ikke have specielle navne, eller classes. JavaScriptet tager automatisk fat på alle png’er og gør dem transparente. Både når billedet er placeret i et img/image tag, eller brugt som background-image.

Dette er p.t. den bedste og letteste løsning på transparente png’ere IMHO.

Transparent png og background-image

Mange af png transparency JavaScriptsene, har desværre den bivirkning, at de ‘ødelægger’ css property’erne: background-position og background-repeat. Baggrundsbilledet vil blive placeret på defalut: “background-position:  top left;”

Så hvis du har brug for at placere eller gentage et tranparent png som background-image kan du bruge:

IE6 tranparency med DD belated-PNG-fix

Også dette JavaScript er selvfølglig pakket ind i en conditional comment, så kun IE6 browsere skal downloade det.

<!–[if IE 6]>
<script src=”DD_belatedPNG.js”></script>
<script>
  DD_belatedPNG.fix(‘.png_background’);
  DD_belatedPNG.fix(‘img’);
</script>
<![endif]–>

I dette png fix skal JavaScript funktionen, der laver png transparens, kaldes med en CSS selector som argument. I ovenstående eksempel bruges CSS-selectoren ‘img’ og klassenavnet ‘.png_background’.

Nogle gange kan CSS selectoren skrives sammen i samme funktions-kald, adskilt af et komma. Her et eksempel der virker på billeder i imgae tag og baggrundsbilleder på liste-elementet:

DD_belatedPNG.fix(‘img,li’);

Men det virker ikke hver gang, så prøv dig frem.

Alternative løsninger til tranperant PNG 

Hvis ovenstående læsninger ikke passer til dine behov så tjek denne diskussion ud på multimedieforum.dk: Tranparent png i IE 6. Tak for de kvalificerede input. :tup:

Eller læs denne artikel om tranpsparency and png in IE6 fra 24 ways.org. Her er gode forklaringer om teorierne om PNG transparens og flere løsningsforslag.

Læs mere om png på wikien: PNG (Portable Network Graphics) transparency . Beskrivelse af PNG formatet, baggrunden for det og gennemsigtighed og tranparens.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Men energien til at lave de store krumspring alene for IE6 brugerne er dalende blandt webudviklere. Også fordi der er rigeligt med andre browsere at tage hensyn til, især med Google Chrome og IE 8 lurende i horisonten. Og også fordi både Safari og Firefox er i hastig fremgang.

Den ultmiative løsning på IE6 problemet

Heldigvis er den ultimative løsning på problembarnet IE6 inden for rækkevidde.

Dean Edwards har lavet et JavaScript, der får IE6 til at opføre sig som IE7 på en lang række områder som f.eks.:

• Understøttelse af gennemsigtige png’er
• Understøttelse af gentagne klasser
• Understøttelse af standard W3 box model
• Forbedret nedarvning
• Understøttelse af min-height og max-height

Se hele listen på Dean Edwards side.

Selve koden og dokumentationen kan findes på Google Code.  Hent JavaScript der løser IE6 problemer.

IE6 til IE7. For og imod løsningen

Selvom IE7 stadig er langt fra W3C’s standarderner, er det trods alt en bedre browser en IE6. Ved at få IE6 til at opføre sig som en IE7, har vi kun en IE browser at tage hensyn til, når vi udvikler (hvilket også kan være rigeligt ).

Du kan være heldig at alle dine problemer med IE6 løses med et enkelt snuptag. I så fald er løsningen meget hurtig, i forhold til at fikse alle IE6 bugs på traditionel vis.

Selve scriptet fylder kun 11kb. Altså langt mindre end et gennemsnitligt stykke grafik.

En af ulemperne ved denne simple løsning er at scriptet løber dom modellen igennem, og dermed tager det altså en smule længere tid at rendere siden. Men da koden er pakket ind i et “conditional statement”, rammer denne gene rammer selvfølgelig kun IE6 og IE5 brugere.

JavaScriptet bliver kørt ved opdatering af siden. Dvs at der i visse tilfælde kan være problemer med sider, der bliver mikroopdateret med AJAX.

Under alle omstændigheder er det værd at teste denne løsning. En sådan test kan gennemføres på ca. 5 minutter, og hvis løsningen virker, er den super hurtig.

Se diskussionen for og imod løsningen i denne tråd på multimedieform.dk

Praktisk eksempel på brug af IE6 til IE7 -scriptet

Gem IE7.js filen i eksempelvis “minJSMappe”, og indsæt følgende linjer i head-tagget på din html:

 

<head>

<!–[if lt IE 7]>
<script src=”minJSMappe/IE7.js”  type=”text/javascript”></script>
<![endif]–>

</head>

Det fremgår ikke, om du også skal gemme “blank.gif”. Men den er muligvis nødvendig for at fikse IE6′s problemer med gennemsigtige png’er. 

Vær dog opmærksom på at gennemsigtige png’er skal navngives helt bestemt for at løsningen virker. Så hvis der også er problemer med dette, så se denne tråd på multimedieforum.dk, for nogle meget smartere løsninger på det specifikke problem.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Metoden kaldes stylesheet reset, og oftest bruger man et specielt stylesheet: reset.css

Jeg har selv i flere år brugt denne meget forsimplede udgave af et reset.css, der dog kun udligner browsernes default forskelligheder  på margin og padding:

*{
margin: 0px;
padding: 0px;
}

Men metoden med et reset.css tager det hele et skridt videre og inddrager mange flere både tags, attributter og properties.

Princippet bag et stylesheet reset

Reset stylesheet’ets formål er at udligne de områder, hvor de forskellige browsere er inkonsistente f.eks margin, line-height, padding osv. Det vil sige at forskellige browsere fra IE og Firefox til Safari og Konqueror får nulstillet deres default style værdier, og derfor på vil starte fra  samme udgangspunkt.

Metoden er simpel. Man inkludere stylesheet i toppen af sit normale stylesheet. Stylesheetet nulstiller alle potentielle problemområder. Man kan enten copy-paste reset stylesheetet ind i toppen af sit stylesheet. Eller man kan importere det ind i stylesheetet med følgende:

@import url(“/stylesheet/reset.css”);

body {
background-color: black;
width: 800px;
…
}

Når man så begynder at definere de forskellige elementer længere nede i stylesheetet, vil de nye værdier overskrive reset.css

Her kan du finde et komplet reset.css lige til at copy-paste.

Potentielle problemer med reset.css

En anden af mine venner Hans Skov,  har dog oplevet problemer med “mærkelig opførsel”, når han er begyndt at overskrive styles fra et reset.css.

Thor har dog brugt metoden mange gange og kender kun til et enkelt problemområde. Nemlig tabeller, som i visse tilfælde kan give problemer. Løsningen er dog igen simpel. Følgende linie skal ifølge Thor enten fjernes eller udkommenteres, hvilket skulle løse problemet.

vertical-align: baseline;

Anvendelsesområder for reset.css

Metoden er måske især anvendelig hvis man har travlt (læs: arbejder professionelt med stylesheets). Personligt foretrækker jeg nok at skyde med lidt mindre spredehagl. Men der er helt sikkert meget inspiration at hente i et reset.css.

Et reset af stylesheetet virker dog heldigvis ikke på de deciderede bugs. Så der vil også i fremtiden være rig lejlighed til at rive sig i håret over Microsofts programmører.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

event.srcElement i Internet Explorer

Løsningen er event.srcElement, der kan læse onclick events i JavaScript.  Det smarte ved funktionen er at den kan aflæse alle attributterne i det tag du knytter den til.

F.eks. vil  event.srcElement.href returnere hvilken link, der henvises til og event.srcElement.onclick vil fortælle hvilke onclick events, der er tilknyttet tagget. 

event.target i Firefox

Desværre  findes event objektet desværre  i 2 forskellige udgaver. Funktionaliten er ikke helt ens for Firefox og Explorer event objektet, men til basale funktioner, som f.eks. at aflæse onclick, onmouseover eller onmouseout events, har forskellen ingen praktisk betydning.

I Firefox bruges syntaksen:

event.target

En crossbrowser løsning

Men nok snak.  Lad os kigge på noget kode, der virker med begge browsere (faktisk virker det også med Safari. (Safarai har nemlig sin helt egen særhed på event objektet) :

 function log(e) {

//Opsætning af event.srcElemenet/event.target objekt i henh. IE og Firefox
var targ;
 if (!e) var e = window.event;
 if (e.target) targ = e.target;
 else if (e.srcElement) targ = e.srcElement;
 if (targ.nodeType == 3) // defeat Safari bug
  targ = targ.parentNode;

 //Indsamling af data
 var id  =  targ.id;
 var href  =  targ.href;
 var onclick  =  targ.onclick;
 var data =  “onclick: ” + onclick + “\n\nID: ” + id + “\n\nhref: ” + href;

 //Tiden med dato objektet
 var now  =  new Date();
 var hour   =  now.getHours();
 var minute  =  now.getMinutes();
 var second  =  now.getSeconds();
 var monthnumber =  now.getMonth() + 1;
 var monthday  =  now.getDate();
 var year =  now.getFullYear();

 //Tidsformateringer
 var tidspunkt =  monthday + “-” + monthnumber + “-” + year + ” ” + hour +”:” + minute + “:” + second + “\n\n”;

 //Tjek af data med en alert 
alert(tidspunkt + data);

//overførsel til serveren via prototype Ajax.Request
// du skal altså have adgang til Prototype.js fra filen for at denne del virker
new Ajax.Request(‘globals/jsp/log.jsp’, {
      method: ‘get’,
      parameters:{
      data1: tidspunkt + data}
    });

}

Vigtigt! Når du kalder funktionen skal du sende parameteren “event” med ellers virker det ikke i Firefox. Funktionskaldet skal altså se sådan ud:

onclick=”log(event)”

Microsoft kan ikke se den medfølgende event parameter, og vil derfor ignorere den. Læs den grundige forklaring om event properties.

Send data fra klienten til serveren 

Efterfølgende skal data  sendes fra klienten til serveren, så man kan gemme data i sin log fil. Dette gøres lettest med AJAX og et af de gode AJAX biblioteker, der findes. Jeg har brugt en løsning med prototype.  Hvis du ønsker at sende data fra klient til server på en anden måde. F.eks. som en parameter i URL’en eller som et hidden input felt i en formular, skal du bare slettet den sidste kode blok.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

For 3 gang i løbet af 6 måneder løb jeg atter ind i Internet Explorers display bug. Denne gang var det indholdet af nogle tabeller på statsbiblioteket’s CMS (Plone), der var problemet. Som webudvikler blandt en masse dataloger, fik jeg “æren” af at løse problemet med vore sallesammens yndlingsbrowser IE6.

Det skulle da også være en smal sag, dag jeg efterhånden kender flere løsninger på display bugs og endda har prøvet et par af dem i virkelighed.

Løsning 1

Som regel skyldes bug’en manglende dimensioner på et element, så jeg gik frisk til sagen og prøvede at tilføje en line-height til de tabelceller, hvor indholdet forsvandt fra. Intet held, så frisk videre.

Se min beskrivelse af line-height løsningen.

Løsning 2

Endnu et forsøg på at tilføje en dimension:

/* Hides from IE5-mac \*/
* html .problemboks {height: 1%;}
/* End hide from IE5-mac */

Denne løsning er beskrevet som en magic bullet på diverse forskellige displaybugs, men virkede dog ikke i Plone.

Her min tidligere artikel om denne løsning.

Løsning 3

3. gang var lykkens gang. Denne gang med den højst usandsynlige løsning, der bestod af at tilføje en position: relative, som denne:

/* Hides from IE5-mac \*/
* html table.tabelklasse_med_display_problem{
position:relative;
}
/* End hide from IE5-mac */

Det hele pakket ind i stjerne hack (* html), så kun IE 5 0g 6 kan læse det. Det så nu ikke ud til at påvirke Firefox, men bare for en sikkerheds skyld.

Læs mere om display bugs i denne fremragende artikel: How To Attack An Internet Explorer (Win) Display Bug.

Hvorfor fixer Plone det ikke for os?

Meningen med et CMS er vel at slippe for alt bøvlet? Tjaa. Plone påstår også, at de gennem en masse indbyggede fixes klarer alle de kendte Explorer bugs.

Men måske skyldes miseren, at statsbiblioteket kører en ældre Plone 2.5. Eller måske er årsagen en hjemmeudviklet template, der ikke måske ikke er helt efter bogen.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Suk! Så nu er det pinedød nødvendigt at tjekke i 3 forskellige browsere, de næste mange år.

Hacks

Hacks til at løse browser problemer og fejl,  er som regel en dårlig idé. Hacksene er bøvlede at vedligholde, efterhånden som nýe generationer af browsere kommer til. Så normalt løser jeg  bugs ved, ved at eksperimentere med margin og padding.

Men da jeg fik 3 forskellige resultater i 3 forskellige browsere (IE 6, IE7 og Firefox 2.0), måtte jeg giver op ty til et browser hack, der skjuler en blog/style i stylesheetet for IE6.

Efter lidt spredet søgning fandt jeg denne Oversigt over hacks, til internet explorer og mozilla bugs . Alle hacksene er overskueligt ordnet og godt beskrevet. Listen mangler hacks for de nyeste browsere (feks IE7), så hvis nogen kender en nyere liste, så sig endelig til.

Min løsning 

Det hack, jeg endte med at bruge var

 attribut metoden:

#indhold[id]{ /*  HACK DER SKJULER DENNE BLOK FOR IE6 */
         padding-right: 5px;
}

der effektivt fik kureret buggen.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

På et webprojekt på multimediedesigner uddannelsen havde vi lavet en række bokse med runde hjørner. Grafikken var hæftet på en række div tags som baggrundsbilleder(backgroundimage), i en spalte som var floated til venstre.

Display bug

Det virker fint i både Firefox og Internet Explorer. Indtil vi scrollede ned og så op igen. Nu var der pludselig forsvundet dele af grafikken i IE. Første tanke var selvfølgelig peekaboo-bugen, men den er ofte beskrevet omvendt. Altså at tingene er væk fra starten og så dukker op, når man har scrollet væk og så tilbage.

Løsningen

Jeg prøvede et par af de løsningsforslag, man kan finde til peekaboo-buggen, men uden held. Lidt mere søgen førte til en artikel på CommunityMX, der beskriver forskellige IE display bug. Artiklens udgangs punkt var, at et væld af IE bugs stammer fra problemer med float og manglende angivelse på dimensioner af div-bokse. Idéen med vores bokse var netop, at de skulle være dynamiske, og derfor selvfølgelig ikke havde fået angivet nogen højde.

En hurtig test med følgende hack placeret efter det div tag vi mistænkte for miseren:

/* Hides from IE5-mac \*/
* html .problemboks {height: 1%;}
/* End hide from IE5-mac */

Og sørme om det ikke virkede. For en udførlig forklaring på hacket, og et par andre løsningsforslag på lignende bugs check selv artiklen på CommunityMX.

I denne artikel beskriver jeg ikke færre end 3 løsninger med elementer der forsvinder i Internet Explorer 6

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.