Transparentes PNG im IE 6
28. Juli 2008Transparente PNG’s im Internet Explorer 5.5 und 6 durch PNGfix JavaScript.
Binden Sie einfach folgendes JavaScript in den Head-Bereich Ihres Quellcodes ein:
<script type="text/javascript"> <!-- if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) { document.writeln(' <style type="text/css">img { visibility:hidden; } </style> ‘); window.attachEvent(”onload”, fnLoadPngs); } function fnLoadPngs() { var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, ”); var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5); for (var i = document.images.length - 1, img = null; (img = document.images[i]); i–) { if (itsAllGood && img.src.match(/\.png$/i) != null) { var src = img.src; var div = document.createElement(”DIV”); div.style.filter = “progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’” + src + “‘, sizing=’scale’)” div.style.width = img.width + “px”; div.style.height = img.height + “px”; img.replaceNode(div); } img.style.visibility = “visible”; } } </script>
Nach dem einbinden des PNGfix JavaScript Codes, habe Sie die möglichkeit ganz normal Ihre PNG’s einzubinden. Absofort werden im Internet Explorer 5.5 und 6 auch transparente PNG’s korrekt dargestellt.
(XHTML) und Doctype
2. Juli 2008Um eine möglichst standardkonforme Darstellung der Webseite in allen Browser zu ermöglichen, ist die Validität des Quellcodes und die Angabe eines korrekten Doctypes wichtig.
In diesem Tutorial möchten wir Ihnen den Doctype etwas genauer erläutern.
In der aktuellen HTML Version exisitieren 3 Varianten: strict, transitional und frameset. In der strict-Variante werden nur Sprachelemente der Version 4.01 erkannt.
Ältere HTML-Elemente wie zum Beispiel
XHTML 1.0 steht ebenso wie HTML 4.01 in den 3 Varianten strict, transitional und frameset.
XHTML ist eine einfache Weiterentwicklung von HTML 4, in der einfach der Syntax einer Umformulierung vollzogen wurde.
In XHTML müssen auch allein stehende Tags geschlossen werden. Dadurch kann HTML die Vorteile von XML nutzen.
Dadurch wird das Document Object Model (DOM) nutzbar.
Darstellungsmodi
Die meisten Browser unterstützen 3 verschiedene Darstellungsmodi. Die Docytpe Definition (DTD) ist ein Hinweis an den Browser, nach welcher Regel eine Seite geschrieben wurde.
Bekommt der Browser keine DTD zugewiesen, verwendet er ein besonders tolerantes Regelwerk und schaltet in einen speziellen Modus (Quirks Modus) um.
Quirks Mode
Im Quirks Mode ist die Tolerant gegenüber Fehlern im Quelltext und im CSS sehr hoch. Zudem werden veraltete HTML Elemente und Attribute erkannt.
Kein Doctype oder ein fehlerhafter Doctype führen zum Umschalten in den Quirks Mode.
Der Internet Explorer 6 erwartet in der ersten Zeile des Quellcodes den Doctype. Auf Grund dieses Bugs führt bereits ein normaler HTML Kommentar oder ein XML-Prolog in der ersten Zeile
des Quelltextes dazu, dass der Browser in den Quirks Mode schaltet, unabhängig vom gewählten Doctype.
Beispiel: Bug im IE6 erzwingt Quirks Mode
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Standard Mode
Im Standard Mode (alternativ Standard-Compilant Mode) oder Full Standards Mode) richtet sich der Browser nach der CSS-Spezifikation des W3C.
Die Toleranzgrenze gegenüber Fehlern ist sehr niedrig. Dafür sichert dieser Darstellungsmodus eine standardkonforme Darstellung der Webseite.
Beispiel: Doctypes für den Standard Mode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/DTD/strict.dtd">
Almost Standard Mode
Der Almost Standard Mode wird nur von Mozilla Browsern ab 1.01 unterstützt. Er Unterscheidet sich vom Standard Mode nicht viel, denn nur der Umgang mit der CSS Eigenschaft line-height
hat Auswirkungen auf Mozilla Browsern mit Bildern innerhalb vonm Tabellen. Im Standard Mode entstehen zwischen einzelnen Grafiken in Layouttabellen tweilweise seltsame Lücken.
Der Almost Standard Mode stellt die Bilder in Tabellen analog zum Quirks Mode dar und behebt das Problem.
Beispiel: Doctypes für den Almost Standard Mode
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
IETester 0.2.2
30. Juni 2008IETester ist ein kostenloses Tool um erstellte Websites in allen gängigen Internet Explorer Versionen zu testen. Das rendern von javascript engines zeigt in welchem Browser Fehler entstehen. Der IETester unterstützt Internet Explorer 5.5, 6, 7 und 8beta. Das Tool ist in sehr vielen Sprachen vorhanden und wird von Windows XP als auch Windows Vista unterstützt. Die alpha Version von IETester hat ein paar Bugs. Zum Beispiel werden Java applets nicht dargestellt und im Internet Explorer 6 gibt es kein Flash.
Dennoch ist IETester eine gute Alternative zum bekannten Multiple IE, welcher die Browser einzelnd installiert und die Registry unnötig zumüllt.
Fröhliches debuggen …
Download: IE Tester 0.2.2
Forum: my-debugbar Forum
Typo3 Backend Fehler im Firefox 3
18. Juni 2008Wer hat sich nicht auf den neuen Firefox 3 gefreut. Allerdings haben ältere Typo3 Versionen einen Bug im Firefox 3. Der RTE sowie die Baumstruktur werden nicht richtig dargestellt. Der Bug tritt nur in manchen Versionen unter 4.2 auf. Die 4.1.6 ist zum Beispiel davon betroffen, in der Version 4.1.7 treten allerdings keine Fehler auf. Den Hotfix gibt es als Extension zum Download.
Download:
mn_ff3_be_bugfix
