<button> padding lässt nicht auf 0 reduzieren

[Tobias Braun]

Hallo zusammen,

ich habe ein echt kurioses Problem und konnte bei Google auch nichts wirklich hilfreiches finden... darum nun mein Post hier:

Ich habe folgendes HTML Konstrukt:

<button type="button">  
    <div></div>  
</button>

Folgende CSS Eigenschaften sind definiert:

  
button {  
background: black;  
margin: 0;  
padding: 0;  
border: 0;  
}  
  
div {  
background: red;  
width: 120px;  
height: 30px;  
}  

Nun zu meinem Problem... Eigentlich sollte bei diesem Code der Browser lediglich den roten DIV Container anzeigen da dieser sich ja innerhalb des Buttons befindet und diesen komplett ausfuellt.

IE8 Windows, Safari 4 Mac zeigen es genau so an wie ich es mir wünschte.

FF 3.5.2 Win und Mac, Safari 4 Win nehmen irgendwo her einen geisterhaften abstand, so als wuerde man padding: 1px 3px; im button definieren.

Statt DIV habe ich auch schon SPAN oder IMG versucht. Mit dem unterschied das man unterhalb des Containers statt 1px nun 3px abstand hat.

Weiss hier jemand Rat?

[LX]

Die Leerzeichen um das Div werden als zusätzliche Elemente geparst. Gebe dem div ein float: left;, das sollte das Problem lösen. Alternativ kannst Du natürlich dem button-Element Höhe, Breite und overflow:hidden; mitgeben.

Gruß, LX

[Tobias Braun]

Die Leerzeichen um das Div werden als zusätzliche Elemente geparst. Gebe dem div ein float: left;, das sollte das Problem lösen. Alternativ kannst Du natürlich dem button-Element Höhe, Breite und overflow:hidden; mitgeben.

Gruß, LX

Hallo LX,

schonmal danke für die Antwort. Zum HTML Code ist zu sagen das alles in einer Zeile steht, z.B.:

  
...  
<td><button type="button"><div class="button-login">Anmelden</div></button></td>  
...  

Höhe und Breite habe ich schon getestet funktioniert allerdings auch nicht, der Rand bleibt.

hier mal die testseite: http://www.visionworks.de/csstest.html

[Gunnar Bittersmann]

@@Tobias Braun:

nuqneH

Gerade bei Formularelementen haben Browser manchmal ihre eigen Vorstellungen.

<td><button type="button"><div class="button-login">Anmelden</div></button></td>

Höhe und Breite habe ich schon getestet funktioniert allerdings auch nicht, der Rand bleibt.

div.button-login  
{  
  margin-top: -1px;  
  margin-left: -3px;  
}

per Hacks für die Browser, für die es gelten soll.

Was soll diese abenteuerliche Konstruktion überhaupt? Wozu ein 'div' (oder anderes Element) innerhalb des 'button'?

Und das Ganze in 'td'? Gehört ein Button zu tabellarischen Daten? Kann ich mir kaum vorstellen.

hier mal die testseite: http://www.visionworks.de/csstest.html

Hier mal die Hilfe: http://forum.de.selfhtml.org/hilfe/bedienung.htm#verweise-einbinden

Qapla'

[Tobias Braun]

Keine Sorge, das TD war nur ein Beispiel.

Mittlerweile habe ich auch eine Lösung gefunden. Firefox hat in der Tat Browserspezifische CSS Einstellung, mit diesem CSS kann man es für den Firefox lösen:

button::-moz-focus-inner { padding: 0; border: none; }

Warum das ganze? Der Button hat ein Background Image und mit dem DIV Container möchte ich ein Icon für verschiedene Buttons einbinden. Klappt jetzt auch wirklich gut :-)

Danke euch für die Hilfe.

Tobi

@@Tobias Braun:

nuqneH

Gerade bei Formularelementen haben Browser manchmal ihre eigen Vorstellungen.

<td><button type="button"><div class="button-login">Anmelden</div></button></td>

Höhe und Breite habe ich schon getestet funktioniert allerdings auch nicht, der Rand bleibt.

div.button-login

{
  margin-top: -1px;
  margin-left: -3px;
}

>   
> per Hacks für die Browser, für die es gelten soll.  
>   
> Was soll diese abenteuerliche Konstruktion überhaupt? Wozu ein 'div' (oder anderes Element) innerhalb des 'button'?  
>   
> Und das Ganze in 'td'? Gehört ein Button zu tabellarischen Daten? Kann ich mir kaum vorstellen.  
>   
>   
> > hier mal die testseite: <http://www.visionworks.de/csstest.html>  
>   
> Hier mal die Hilfe: <http://forum.de.selfhtml.org/hilfe/bedienung.htm#verweise-einbinden>  
>   
> Qapla'