Ich habs endlich wieder gefunden, seit Wochen war ich auf der Suche nach dem Link der Firebug Alternative für den IE. Doch weder Name der Anwendung noch Link wollten mir wieder einfallen. Jetzt endlich kam ich durch Zufall wieder auf die Download-Seite der Internet Explorer Developer Toolbar.

Im Prinzip sind die wichtigsten Funktionen des Firebugs auch mit drin, wie z.B. durchsuchen des DOM und Anzeige der referenzierten CSS-Styles.

Was leider fehlt ist eine Konsole mit Ausgabe der einzelnen Requests, aber gut man kann ja nicht alles haben. Die IEDT funktioniert allerdings nur im IE7 für den IE8 gibts bereits Boardmittel und für den IE6 gibts wie zu erwarten war nichts, soll mir an dieser Stelle aber auch egal sein.

Arbeit kann trotzdem wieder los gehen...

Heute habe ich eine der besten Illustrationen gegen den IE6 gefunden.

Das Bild wird IE6-Usern auf momentile.com angezeigt. Sehr lustig ist außerdem, dass der Designer ins CSS-File folgendes geschrieben hat:

This is not being lazy. Momentile is for entertainment and I just can't justify taking the time to hack my way to IE6 glory for a user that is too lazy to upgrade their browser. It's time to push back.

Frei Übersetzt: Hier gehts nicht darum, dass ich faul bin. Momentile dient zur Unterhaltung und ich sehe nicht ein mich durch den werten IE6 zu hacken nur weil einige Nutzer zu faul sind ihren Browser zu aktualisieren. Es ist Zeit zurückzuschlagen.

Jeder Webdesigner kennt es, man fertigt neue, coole Designs und was passiert,- am Ende sitzt man genauso lange am IE6-Bug-Fixing wie an der gesamten Erstellung.

Ich kann nur sagen boykotiert den IE6!!!

Runde Ecken sind in aller Munde und mittlerweile gibt es auch etliche Anleitungen und Möglichkeiten diese zu realisieren. Ich war nun aber auf der Suche ein horizontales Menü zu basteln, dass einfach nur gewinkelte Ecken/Ränder hat:

Das Ganze sieht auf den ersten Blick nicht so kompliziert aus, aber auf den zweiten Blick ergeben sich doch ein paar Probleme, denn die einzelnen Menüpunkte sollten Hovern können und eine Active-State haben. Wie also vorgehen?

Warum Problem?
Nun ja CSS ist ein BoxenModell in denen die Boxen jeweils 90° haben. Eine Darstellung in dieser Form ist nicht ohne Weiteres möglich. Man könnte nun sagen, dass wir Bilder ziwschen die Einzelnen Elemente setzen und so den Eindruck der Winkel erstellen, dargestellt wie folgt:

Doch wie man ganz rechts sieht würde es sehr viele Bildchen geben, um jeden Fall abzudecken.
Ich habe das ganze also anders lösen müssen.
So kam es dazu, dass ich gif's benutzte. Der Vorteil: Gifs werden auch vom IE richtig in ihrer Transparenz dargsetellt.
Das heißt ich habe jeden Menüpunkt genommen und ihn so wie er ist ausgeschnitten:

Links und rechts habe ich mit Photoshop "weiß" als Tranpsarente Farbe eingerichtet, sodass ich nur noch ein margin-right:-20px als unschöne Eigenschaft benutzen musste und es war getan.

Wie schon gesagt, "schön" ist diese Lösung nicht aber sie funktioniert in allen Browsern ab Version 6, sodass man mit einer unschönen CSS-Eigenschaft leben kann.

Wer sauber arbeitet rückt seinen Code ein. Doch Vorsicht: Der IE fasst Tabs sehr sonderbar auf.
Wenn man z.B. eine Liste für sein Menü aufbaut und in dieser Form einrückt:

<div class="menu"><ul>
<li><a href="#">menupunkt1</a></li>
<li><a href="#">menupunkt2</a></li>
<li><a href="#">menupunkt3</a></li>
</ul>
</div>

wird schnell merken, dass der IE trotz padding:0 und margin:0 Abstände zwischen die Listenelemente setzt.
Diese wird man nur los indem man entweder alles in eine Zeile schreibt also:


<ul>
<li><a href="#">menupunkt1</a></li><li><a href="#">menupunkt2</a></li><li><a href="#">menupunkt3</a></li>
</ul>


Oder man mit PHP jede Zeile mit einem echo ausgibt (was im HTML-Quelltext das gleiche bewirkt) also so:


<ul>
echo'<li><a href="#">menupunkt1</a></li>';
echo'<li><a href="#">menupunkt2</a></li>';
echo'<li><a href="#">menupunkt3</a></li>';</ul>

Das gleiche Verhalten zeigt der IE bei Tabellen. Dort müssen die TD's in einer Zeile stehen, um Abstände zu vermeiden.

Newsletter haben schon lange nicht mehr den Ruf den sie einst hatten.
Die meisten landen im Spamfilter wieder andere werden gar nicht erst geöffnet. Was also muss ein Newsletter sein, damit er akzeptiert wird?

Ein Newsletter sollte heutzutage niemandem mehr aufgezwungen werden, das nervt und bewirkt oft nur das Gegenteil vom gewünschten Resultat. Ein Internetnutzer sollte selber entscheiden dürfen welche Informationen er z.B. wöchentlich bekommen möchte. Niemand wünscht sich E-Mails mit dem Betreff "Mahnung" im Postfach, um dann Werbung von einer Glücksspielseite zu erhalten.

Also: "Informationen nur dem der sie auch will!"

Doch in welcher Form, ist die Frage die sich dann automatisch anschließt. Text oder doch HTML?
Textnewsletter haben den Vorteil, dass sie von jedem E-Mail Client "richtig" angezeigt werden, aber im Zeitalter von Web 2.0 soll auch ein Newsletter nett aussehen und nicht "nur" schwarz-weiß sein.

Natürlich muss die Form des Newsletters auch immer an die Informationen angepasst werden. Ein Newsletter eines Reiseanbieters wird ohne Fotos wohl kaum Wirkung erzielen, während ein Newsletter zum Thema Bücher auch gern Textbasiert sein darf. Auf den Inhalt kommt es eben an.

Doch nun zu den Richtlinien, die keinen Anspruch auf Vollständigkeit haben soll, aber einen kleinen Hinweis zu häufig auftretenden Problemen geben soll.

Die Größe

Ein Newsletter (sowohl Text als auch HTML) sollte nicht breiter als 400px sein, damit er auch im Internet, also bei gmx, web.de o.ä. angezeigt werden kann.

Die Technik

Wer sich nun für den HTML-Newsletter entschieden hat sollte nun einiges beachten, was sonst in der Webdesign-Produktion nicht auftaucht oder sogar verpönt wird.

Damit ein Newsletter in den gängigen E-Mail Clients (Outlook, Thunderbird usw.) richtig dargestellt wird sollte man auf
CSS-Styles gänzlich verzichten. Outlook kann externe CSS-Dateien gar nicht verarbeiten und Styles die im Header unter

<style type="text/css"> ... </style>

stehen werden auch nur selten erkannt.
Wenn Styles dann Inline!!!
Allerdings sollte man versuchen Styles die etwas mit Abstand zu tun haben zu vermeiden. Das heißt alles was mit Padding, Margin usw. zu tun hat wird von Client zu Client unterschiedlich interpretiert (oder auch gar nicht) und sollte vermieden werden.
Auch eine oft Fehlinterpretierte Anweisung ist "Border".

Tabellen statt Divs

Auch wenn es sich schlimm anhört, aber nur Tabellen werden von (fast) allen richtig interpretiert. Dementsprechend soltle der Newsletter mit Tabellen gelayoutet werden. Doch Vorsicht: Lotus Notes schafft nur eine Tabellentiefe-Verschachtellung von 3 Tabellen, alles was darüber hinausgeht wird nicht mehr interpretiert. Divs sollten nach Möglichkeit nicht verwendet werden, da viele Clients diese nicht interpretieren.

Texte

Textstyles werden zum Glück von den meisten Clients korrekt dargestellt, doch auch hier gibt es eine Änderung:
Statt p-Tags sollte man seine Texte mit font-Tags definieren. P-Tags werden z.B. von Notes nicht erkannt.

Wichtig zum Schluss: Outlook mag es gar nicht, wenn es noch Leerzeichen vor einem schließenden "td" gibt. Er bringt dort dann eine Zeile Abstand.
Heißt dass das td- Element direkt hinter das letzte Zeichen der Zeile gehört, um diese Abstände zu vermeiden