Submittext ausrichten

[Kenin]

hi

Ich versuche verzweifelt den Text des Submitbuttons ein wenig nach oben zu schieben, aber ohne die Höhe des Buttons zu verändern:

<form action="#" method="post">
	<table border="0" cellpadding="0" cellspacing="0" width="100%">
		<tr>
			<td>
				<input type="submit" value="senden" 
					style="width: 94px;
					height: 15px;
					font-size: 11px;
					color: #424B5C;
					background-color: #e4e5e7;
					border-right: 1px solid #424B5C;
					border-bottom: 1px solid #424B5C;
					border-top: none;
					border-left: none;
					padding-left: 7px;
					text-align: left;
					padding-bottom: 2px;" />
			</td>
		</tr>
	</table>
</form>

Mit dem padding-bottom funktioniert das nicht, frage mich nur wieso? Wenn ich eine höhere Pixelanzahl eingebe funktioniert es zwar, aber dann verändert sich auch die Höhe des Buttons. Padding-top hingegen funktioniert einwandfrei. Ich habe dann schon versucht im Gegenzug die Höhe zu verringern, kam aber nie auf das gewünschte Resultat.

Und linksbündig kriege ich den Text auch nicht *hmm*

Hat jemand eine Idee?

edit:
Ok, anscheinend hat ein Submitbutton immer einen Mindestabstand. Jeweils 3px vermutlich beim FF.

Gruss
Kenin

 

[anna55]

Ganz linksbündig (außer IE) bekommst Du den Text mit

max-width:94px;
padding-right:100%;

 

[Kenin]

Das hat keinerlei Wirkung
Mit text-align: left kriege ich es immerhin ganz nach links, aber noch mit diesem Mindestabstand von ca. 3px der anscheinend vom Submitbutton bestimmt wird und man dagegen nichts machen kann.

Wichtiger als die horizontale Ausrichtung ist mir aber, dass ich den Text nach oben schieben könnte.

 

[anna55]

Das hat keinerlei Wirkung

Natürlich geht das. Allerdings nicht statt sondern zusätzlich zu Deinem width:94px;

Aber einfach ist, Du nimmst padding-left:7px; raus und dafür die padding-Angabe rein:

padding:0 0 2px;

Was den Text angelangt, Schrift kleiner machen, Button vergrößern. Sonst fällt mir dazu nichts ein.

 

[Kenin]

<input type="submit" value="senden" style="width: 94px;
height: 15px;
font-size: 11px;
color: #424B5C;
background-color: #e4e5e7;
border-right: 1px solid #424B5C;
border-bottom: 1px solid #424B5C;
border-top: none;
border-left: none;
padding: 0 0 2px;
" />

Hast du das so ausprobiert? Also bei mir verschiebt sich der Text "senden" so kein Stück weiter nach oben, warum auch, ist ja das selbe wie padding-bottom: 2px; ?

Ich teste jeweils im FF 2.0.0.13 , und du?

edit:
Im IE6/7 wird der Button auch nicht ganz korrekt dargestellt, er weist neben den zugewiesenen Rahmen noch einen weiteren auf --> rechts und unten jeweils 1px solid black. Wenn ich dann auf der Seite irgendwo hinklicke dann verschwindet der zwar, aber der Platz ist noch reserviert für ihn *verwirrt*

 

[dkdenz]

Bau Dir doch Deinen eigenen Button.
Geb dem Link ein display:block und positioniere dann Deinen Text wie Du ihn brauchst.
Den submit machst Du dann mit JS:

<a href="javascript:document.form_soundso.submit();">Linktext</a>

 

[anna55]

Ich teste jeweils im FF 2.0.0.13 , und du?

Ebenfalls. Meine Angaben zu padding haben sich lediglich darauf bezogen, dass der Text links steht, nicht dass er höher kommt. Wenn Du nicht schon dkdenz Lösung genommen hast, kannst Du diese Version zum Schluss nochmal testen. Ging bei mir im FF, IE7, IE6 und Opera.

<input style="border-top-width:1px; 
border-left-width:1px; 
background:#e4e5e7; 
border-bottom-width:1px; 
font:11px Verdana, Arial, Helvetica, sans-serif; 
color:#424B5C; 
border-right-width:1px;
text-align:left;
padding:0;
width: 94px;
border-top: none;
border-left: none;
height:15px;" 
type="submit" name="senden" value="Senden">

Zur Schrift hatte ich Dir vorher gesagt, Text kleiner oder Button größer machen.

Edit: Ich würde die height-Angabe weglassen, vielleicht auch

border-top: none;
border-left: none;

 

[Kenin]

Geht so auch nicht, da sind immer noch die Abstände von 3px, oben und links. Kann man deins online irgendwo sehen? Weil ich kann's fast nicht glauben, dass bei dir diese 3px nicht auftauchen, und das bei ein und dem selben Code.

 

[anna55]

Geht so auch nicht, da sind immer noch die Abstände von 3px, oben und links.

Eine einheitliche Darstellung des Abstandes bringt der Code nicht. FF macht links und oben einen Abstand, Opera stellt den Text links bündig, lässt aber oben noch Platz. Lediglich IE6 und IE7 lassen die Abstände - soweit ich das erkenne - weg. Den zusätzlichen Rahmen im IE vermeidest Du allerdings damit.