Vom Internet Explorer weiß man, dass dieser "padding"-Angaben anders Interpretiert als Gecko-Browser. So auch bei Buttons deren Länge variabel, aber einen Abstand links und rechts vom Buttontext haben sollen.
Der IE (im übrigen macht er das bis Version 7) hat offenbar eine Art "Default-Padding" bei seinen Buttons und fügt man diesen dann noch ein CSS-Padding hinzu wird es natürlich irgendwann riesig. Um diese Verhalten zu verhindern benutzt man einfach folgende CSS Anweisungen:

 
input.button {
  width:auto;
  overflow:visible;
}
 

Damit wird der Abstand des Internet Explorers zurückgesetzt und er hört nur noch auf die eigenen Angaben

Wer Webseiten mit PHP entwickelt, greift meist auf kostenlose OpenSource Entwicklungsumgebungen zurück, die in den meisten Fällen nur kaum als Professionelle Entwicklungsumgebung im Sinne von IDE geeignet sind.
Auf vielen Computern ist daher eine Masse an kleinen Programmen installiert, deren interne Kommunikation zu wünschen übrig lässt.

Vor kurzem entdeckte ich aber Aptana. Eine auf Eclipse-basierende IDE, die dem professionellen Webentwickler alle Möglichkeiten bietet, die er haben will und meistens auch braucht.

Neben den elementarin Dingen wie Debugging (was die wenigsten PHP-Entwickler wirklich machen) und Texteditor mit Syntaxhighlighting bietet Aptana plugins für die Entwicklung von Mobilen Websites, SVN und CVS kompatibilität, sowie bereits konfigurierte Server die per Icon-Click gestartet bzw. beendet werden können.

Ein Langzeittest wird nun zeigen, ob das Programm hält was es verspricht.

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

Ich perönlich habe vor einigen Tagen
phpmyvisites für mich entdeckt. Einfach, schnell und übersichtlich.
Wer seine Homepage statistisch erfassen möchte und ohne viel schnick schnack schnell eine Übersicht über "Besuchte Seiten" "Besuscher" und/oder "einmalige Besucher" haben will dem empfehle ich dieses nette Tool:

Es ist schnell installiert und man findet sich so schnell zurecht, als hätte man nie etwas andres gemacht. Neben den übelich Erfasungsmöglichkeiten bietet die neue Version 2.3 auch die Möglichkeit der generation einer Heatmap auf der Sichtbar wird wohin die meisten Benutzer klicken.

Man kann sich die Statistiken per Mail zuschicken lassen oder bequem als RSS-Feed abonieren. Auch die Verwaltung mehrere Webseiten ist möglich.

Das ganze wird mit einem Javascript-Snippet in die eigene Seite integriert und schon kann die Erfasung losgehen.

Ich finds super einfach und super zu bedienen.

CSS-Sprites sind eine sehr gute Möglichkeit die Größe und Ladezeit einer Website erheblich zu verringern.
Angenommen man hat 10 Grafiken auf einer Seite die jeweils 2 KB groß sind, so bedeutet dies eine Gesamtgröße von 20 kb für die Grafiken und 10 HTTP Requests.
Wenn man nun alle Grafiken in einer einzigen Grafik vereint kommt man auf etwa 15 KB bei nur einem HTTP Request. Das Ganze hört sich kompliziert an ist aber sehr simpel und effektiv.
Als erstes muss man alle relevanten Grafiken z.B. einer Navigation, in ein großes Bild packen und soweit komprimieren, dass man das richtige Maß an Qualität erhält.
Daraufhin kann man sich an das CSS machen. In diesem haben wir die Möglichkeit die Position einer Hintergrundgrafik anzugeben.
Heißt für eine Navigation in dieser Form:

<ul id="navigation">
<li><a href="#" class="link1">link 1</a></li>
<li><a href="#" class="link2">link 2</a></li>
<li><a href="#" class="link3">link 3</a></li>
</ul>

dass wir den einzelnen Klassen jeweils das gleiche Bild aber mit unterschiedlicher Position der Grafik zuordnen können. Das passsende Stylesheet sieht dann so aus

#navigation { background: url(test-3.jpg); }
#navigation li { list-style: none; }
#navigation li, #navigation a { display: block; }
.link1 a:hover { background: transparent url(test-3.jpg) 0 -200px no-repeat;}
.link2 a:hover { background: transparent url(test-3.jpg) -96px -200px no-repeat;}
.link3 a:hover { background: transparent url(test-3.jpg) -172px -200px no-repeat;}

Und schon würde die Navigation in der gewünschten Position der Grafik hovern.