Button ist wiederspenstig

[Bachsau]

Hallo,

ich habe einen <button>, und dazu so ein CSS:

*  
{  
	margin: 0;  
	padding: 0;  
	border: 0;  
	font: inherit;  
	color: inherit;  
	text-decoration: inherit;  
	text-align: inherit;  
}  
  
.textblock  
{  
	display: block;  
	position: absolute;  
	padding: 5px;  
	background-color: #55AAFF;  
	border-style: solid;  
	border-color: #0077FF;  
	border-width: 1px;  
	color: #000000;  
}  
  
button.textblock  
{  
	cursor: pointer;  
}

Wie ihr seht, wird erst einmal eine Menge Browser-Gedöns entfernt. Anschließend werden blöcke definiert. Das funktioniert auch soweit ganz gut.

Mit class="textblock" sind neben buttons auch <div>'s und <a>'s formatiert, was super klappt. Nur die Buttons haben Macken:

Zunächst mal sind sind die Buttons grundsätzlich und in jedem Browser ~5 pixel kürzer als andere Elemente mit der gleichen width-angabe, zum anderen ruckt der Text im Opera immer nach unten rechts, wenn man drauf klickt. Im FIrefox passiert das nicht, dafür wird hier während des Klicks ein hässlicher, gestrichelter Markierungsrahmen angezeigt.

Ich schätze die beiden letzteren sind Fehler der Browser, die sich wohl nicht ändern lassen, aber auch nicht so schlimm sind.

Dass sie zu kurz sind nervt allerdings gewaltig. Vermutlich steckt hier eine CSS-Eigenschaft dahinter, die ich noch rausboxen müsste. Jemand eine Idee? Oder gibt es eventuell irgendwo die built-in stylesheets der Browser zur Einsicht, so dass man es dort nachschauen kann?

Gruß & Danke schonmal,

• Bachsau