padding von Input-Field

[Hitrix]

Hallo zusammen,

hab mal wieder ein kleines Problem und hoffe, dass ihr mir helfen könnt, da ich langsam verzweifle und nun schon seit einiger Zeit nach der Lösung suche.
Zum Problem:

Ich hab arbeite gerade an einer Such-Leiste und würde gerne direkt an das Input-Feld wo der Suchbegriff eingeben wird einen Button hängen. Ohne Abstand wohl bemerkt. Wenn ich jedoch nun dem Text-Feld ein padding-left: 10px; gebe dann rutscht der Suchtext zwar richtig 10px nach rechts, jedoch rückt auch der Submit-Button um 10 Pixel nach rechts und genau dies ist das Problem. Normal sollte das padding-left von dem input-Text-Feld keine Auswirkungen auf den Submit-Button haben. Hier der Link zur Homepage: Astoria Stuttgart - Neuigkeiten
Ich hoffe ihr könnt mir weiterhelfen und danke euch schon einmal im vorraus.

Grüße Hitrix

 

[vitus37]

Wenn ich das padding des Submit-Buttons lösche, werden beide Elemente zusammenhängend angezeigt.

#search {
background-image:url("http://www.elation-studios.de/customers/astoria/images/search_bg.gif");
background-repeat:no-repeat;
float:left;
height:24px;
left:63%;
[B]padding-left:0;[/B]
position:absolute;
top:0;
width:auto;
z-index:999;
}
#text {
background-color:transparent;
border:0 none;
color:#FFFFFF;
float:left;
font-family:Verdana;
font-size:8pt;
height:15px;
margin:0;
padding:0;
width:131px;
}

 

[Hitrix]

Aber dann ist die Schrift im Suchfeld auch direkt am linken Rand vom Suchfeld und nicht 10px von links entfernt, so wie ich es gerne hätte.

 

[vitus37]

Beim Einsatz von padding wird ein Element um die entsprechenden Werte vergrößert. Um das padding-left von 10px auszugleichen, musst du dem Wert des width-Attributs wiederum 10px abziehen, was voraussetzt, dass du auto durch einen festen Wert (am besten die Breite der Hintergrundgrafik minus 10px) ersetzt.

 

[Hitrix]

schaus dir mal an, nun hat er den button nach unten gesetzt. Die Grafiken sind zusammen 153px groß.

 

[vitus37]

Wenn du die Breite es Eingabefeldes auf 121px setzt, wird es scheinbar richtig angezeigt.

 

[Timmer]

Thema ist zwar eigentlich schon erledigt, aber ich empfehle dir noch Firebug, ein Addon für FireFox, mit dem du deine Seite (und jede andere Seite der Welt) live und in Farbe bearbeiten kannst. Damit kannst du schön ausprobieren und die richtigen Werte anschließend in dein Stylesheet übernehmen. Damit sparst du dir das lästige Ausprobieren im Editor (Wert raten, Datei hochladen, anschauen, Wert korrigieren, Datei hochladen, verzweifeln...).

Vielleicht hilfts dir ja ^^

 

[Hitrix]

@Timmer: Danke für den Tipp, werd mir das Addon gleich mal installieren.
@vitus37: Danke für deine Hilfe ;-)