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

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.

Das Print-Design einer Website ist in manchen Fällen fast genauso wichtig wie das Screendesign. Doch in der Standardeinstellung werden Links nur mit Ihrem Namen gedruckt.
Es geht aber auch anders.
Man kann das attribut href aus einem Link filtern und hinter dem Namen ausgeben lassen, und das alles mit CSS. Die dafür zuständige Anweisung lautet:

a[href]:after {
content:" <"attr(href)">";
background-color:inherit;
font-style:italic;
size:75%;
}

Hier wird der Link der in href="" steht nach dem Namen auf das Papier gedruckt. Es erscheint also z.B.: "Der Blog von zyris.de und progchild.de <blog.zyris.de>"

Leider funktioniert diese Anweisung nur im FF und Opera. Der IE ignoriert die Anweisung.