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.

Periodisk bug

IE kunne af en eller anden årsag ikke ALTID forstå den margin angivelse. Som regel de første gange man indlæste siden blev billederne placeret helt ude i venstre margin. Når jeg opdaterede siden, blev sandsynligheden for at IE placerede elementet rigtigt større og større.

En ikke optimal løsning

En meget mærkelig periodisk bug, jeg ikke har set omtalt nogen steder før. Jeg løste problemet ved at give class selectoren en padding istedet for en margin. Det virkede. Desværre kan den løsning jo kun bruges, hvis billledet ikke har har en border.

No related posts.

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

I mit tilfælde viste det sig som et stykke baggrundsgrafik, der fungerede ok, når man kom ind på siden eller opdaterede denne. Men minimerede jeg siden var grafikken forsvundet, når jeg maksimerede den igen.

Løsninger til peek-a-boo bug

Der findes utallige mere eller mindre komplicerede løsninger til at kurere denne bug. Jeg holder af de mest simple løsninger, så jeg surfede en del rundt før fandt jeg en passende.

Jeg tilføjede simpelthen en line-height til det div tag, hvor baggrundsgrafikken var sat i. Og voila. Mit problem var løst. Det er ikke sikkert at denne lette løsning løser dit problem, men det gode ved den er at det kun tager ca. 11 sekunder at teste.

Du kan læse om den simple line-height løsning på peekaboo buggen her.

Andre display bugs

Hvis du læse mere om tekster, links, grafik eller andre elementer, der forsvinder og dukker op igen på mystisk vis, så lav en søgning på f.eks. “peekaboo bug” eller lidt mere bredt på “display bug”. Både IE6 og IE7 har massive problemer med forskellige display-bugs.

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

No related posts.

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