button-per css bearbeiten

[syuam]

hey leute also ich wollte in einem einfachen Kästchen einen Button darstellen.
Dieser Button soll genau so groß sein wie das Kästchen, in dem er sich befindet(also das ganze Kästchen füllen).
Wichtig: Das Kästchen ist quadratisch.
Bisher,
html-code:

<td style="height: 50px; width: 50px; border: 1px solid black;">
  <form>
    <button style="width: 50px; height: 50px;" name="button1" type="button"</button>
  </form>
</td>

so sieht das dann aus:

1.Frage: Der button füllt trotz eindeutiger css-Angaben nicht das gesamte Kästchen aus.
Wie kann ich das lösen?
Nun verkleinere ich das ganze auf ein 10px Quadrat,
html:

<td style="height: 10px; width: 10px; border: 1px solid black;">
  <form>
    <button style="width: 10px; height: 10px;" name="button1" type="button"</button>
  </form>
</td>

es sieht jedoch wie folgt aus:

weder der Button ist 10px*10px, noch füllt er das gesamte Kästchen,
Wie könnte ich also dieses Problem lösen?
LG und danke im vorraus

 

[XraYSoLo]

Du solltest dich mal mit den grundlegenden Formularelementen auseinandersetzen.

Nils aka XraYSoLo

 

[threadi]

1.Frage: Der button füllt trotz eindeutiger css-Angaben nicht das gesamte Kästchen aus.

Die sind keineswegs eindeutig. Welche Eigenschaften hat den <form>? Was ist mit Außen- und Innenabständen?

Außerdem ist dein HTML-Code fehlerhaft:

<button style="width: 10px; height: 10px;" name="button1" type="button"[COLOR=#ff0000]>[/COLOR]</button>

 

[syuam]

ah ja sorry, das ">" hatte ich ausversehen heausgenommen weil da code kam, der hier keine rolle spielt...
zu den <form>eigenschaften: ich hab bei css das hinzugefügt:
form { padding:0; }
geholfen hat es nicht, wie soll ich den den abstand auf null kriegen?

 

[threadi]

Ohne den kompletten Code oder besser einen Link zur Seite kann man das nicht beurteilen.

 

[syuam]

ok folgender html code:

<td>
  <form>
    <button type="button"></button>
  </form>
</td>

der dazugehörige css-code:

td {
    padding: 0;
    height: 10px;
    width: 10px;
    border: 1px solid black;
}
button {
    width: 10px;
    height: 10px;
}

angezeigt wird aber das zweite Bild das ich s.o. eingefügt habe.
Nun möchte ich aber das das Kästchen(td) 10px*10px groß ist und das der Button, der auch so groß "sein sollte", dieses Kästchen ausfüllt.
Wisst ihr wie ich da vorgehen sollte?
LG