Rahmen um Button legen

[mr]

Hallo,

ich versuche schon seit einiger Zeit, einen 1px-starken Rahmen um einen Formular-Button zu legen, um diesen als "default" zu kennzeichnen. Der Rahmen soll auch bei Schriftgrößenänderung durch den Benutzer exakt am Button anliegen.

Meine bisherigen Versuche in der Art von

<span style="border: 1px solid blue"><input type="button" /></span>

haben mich da nicht weitergebracht. Vielleicht könnt ihr mir da helfen.

[frankx]

Hellihello

also bei mir zeigts die Border. Machs mal auf 3px. Auch könntest Du den style ins input-tag reinziehen. Dann geht aber der buttoneigene Rahmen flöten.

frankx

[mr]

Danke, aber Ich hab hier halt eine pixelgenaue Vorgabe, von der ich nicht abweichen kann. Hier also noch einmal etwas präziser formuliert:

Ich benötige einen _exakt anliegenden, exakt 1px breiten Rahmen_ um einen Button, der diese Eigenschaften auch bei einer Schriftgrößenänderung durch den Benutzer behalten soll.
Der Button-eigene Rahmen darf dadurch nicht beeinflusst werden. Das ganze soll zumindest in Mozilla/Firefox funktionieren.

<span style="border: 1px solid blue">
    <input type="button" style="border-width: 1px" />
</span>

^^^klappt nicht. Auch nicht nach diversen Spielereien an margin, padding, line-height etc.

Bis jetzt macht mich dieses Problem bzw. die zugrundeliegende Vorgabe nur ein *klitzekleinesbisschen* wahnsinnig...

[Messmar]

Hi,

<span style="border: 1px solid blue">
    <input type="button" style="border-width: 1px" />
</span>

Brauchst unbedingt den Span-Element? Span ist eigentlich ein Inline-Block und du kannst damit layoutmäßig nicht viel erreichen (auch per CSS).

^^^klappt nicht. Auch nicht nach diversen Spielereien an margin, padding, line-height etc.

Wenn ich dein Problem richtig verstanden habe, solltest du den Span einfach entfernen und die CSS-Angaben direkt im Input-Tag eingeben und dann geht's:

<input type="button" value="testtest" style="border: 1px solid blue" />  

Gruß
Messmar

[Ashura]

Hallo Messmar.

Span ist eigentlich ein Inline-Block […]

Wohl eher nicht. Es ist ein schlichtes Inline-Element. Kein Blockelement und auch keines, was display:inline-block; entsprechen würde.

Einen schönen Mittwoch noch.

Gruß, Ashura

[David Aurelio]

Das Problem ist ja (wie von Dir auch geschildert), dass, wenn Du einen Rahmen festlegst, der eigentliche Buttonrahmen verschwindet.
Wäre es nicht einfacher, den default-Button mit fetter Schrift zu kennzeichnen? Dann hättest Du auch keine sinnbefreiten Tags im Markup.
Etwa so:

CSS

/* Alle moeglichen Angaben */  
input.default {  
    font-weight: bold;  
}  
/* weitere Angaben */  

HTML

<!-- Markup -->  
<input type="submit" class="default" value="Das ist der Defaultbutton" />  
<!-- weiteres Markup -->  

[MudGuard]

Hi,

Das Problem ist ja (wie von Dir auch geschildert), dass, wenn Du einen Rahmen festlegst, der eigentliche Buttonrahmen verschwindet.

Man muß ja nicht alle Border-Eigenschaften setzen. Wenn nur die Rahmenbreite verändert werden soll, sollte es ausreichen, einen größeren Wert für die border-width anzugeben.

cu,
Andreas

[Detlef G.]

Hallo mr

Meine bisherigen Versuche in der Art von

<span style="border: 1px solid blue"><input type="button" /></span>

haben mich da nicht weitergebracht. Vielleicht könnt ihr mir da helfen.

Wie wäre es denn mit

<span style="[code lang=css]float:left; border: 1px solid blue"><input type="button" /></span>[/code]

Float macht aus dem span ein Blockelement und sorgt dafür, dass es die Breite
des Inhalts annimmt. (in aktuellen Browsern zunmindest)

Auf Wiederlesen
Detlef

[mr]

Danke für die Vorschläge, aber der richtige war leider noch nicht dabei. Ich habe mittlerweile mit Mozilla-internen CSS-Eigenschaften experimentiert. Die Browserspezialisierung ist vertretbar, da es sich um ein Intranetprojekt handelt.

<span style="display:-moz-inline-box; border: 1px solid blue">
  <input style="border-width: 1px" type="button" value="Klick mich" />
</span>

Diese Lösung ist sehr vielversprechend, aber leider wird der Button dadurch falsch(?) gerendert: der Button-Text rutscht 1px nach unten.

[Jonathan]

Wenn du schon für Mozilla optimierst, kannst du gleich -moz-outline benutzen:

<input type="button" value="Default" style="-moz-outline:1px solid black;">
<input type="button" value="Normal" style="">

Natürlich passt das nicht ganz so gut bei verwendem WinXP-Stil, deshalb solltest du dir überlegen evtl. noch -moz-apperance:none; zu definieren:

<input type="button" value="Default" style="-moz-outline:1px solid black;-moz-appearance:none;">
<input type="button" value="Normal" style="-moz-appearance:none;">

Setzt man das noch mit Klassen um, hat man relativ sauberen Code ohne zusätzliches Span. Anstatt -moz-outline müsste auch outline gehen, das sollten viele moderne Browser auch können.