Aneinanderreihen von input-Feldern & Bildern: unerklärbarer Rand

[Klener]

Hi liebe html.de'ler,
diesmal macht die grafische Umsetzung eine Suche Probleme (siehe Screenshot).
Für die Suche habe ich ein input(text)-Feld, rechts daneben ein Bild (pseudo-Kategorieauswahl) und rechts neben der Auwahl einen submit-Button.

Mein HTML-Code:

<!-- SEARCH -->
<div id="search">
	<form action="#" method="POST">
		<input type="text" name="query" value="Suche..." class="query" /><img src="./res/images/search_crop.jpg" alt="crop" class="crop" /><img src="./res/images/search_categorie.jpg" alt="Kategorie wählen" class="categorie" /><input type="submit" name="search" value="Suchen" class="submit" />
         </form>
</div>
<!-- /SEARCH -->

Der Ausschnitt der CSS-Datei:

/* SEARCH */
#search{
	margin-top: 3px;
	margin-left: 350px;
}

#search .query{
	background-image: url('../images/search_input.jpg');
	display: block;
	background-repeat: no-repeat;
	height: 39px;
	padding-left: 13px;
	width: 317px;
	border: 0;
	color: #656363;
	float: left;
}

#search .crop {
	height: 39px;
	width: 12px;
	float: left;
	border: 0;
}

#search .categorie{
	display: block;
	height: 39px;
	padding: 0;
	width: 81px;
	border: 0;
	float: left;
}

#search .submit{
	background: url('../images/search_submit.jpg') ! important;
	background-repeat: no-repeat ! important;
	height: 39px ! important;
	width: 72px ! important;
	border: 0 ! important;
	color: #656363 ! important;
	float: left ! important;
	display: block ! important;
}

Leider werden mir, mir unerklärliche, Ränder angezeigt, kennt da jemand eine Lösung für?



Vielen Danke & nächtliche Grüße
Klener

 

[mermshaus]

Livebeispiel?

Vielleicht könnte man es auch so beantworten, aber ich habe gerade nicht den Nerv, mir zu überlegen, was wohl geplante Grafik ist und was nicht.

In Firebug oder so solltest du zudem erkennen können, ob eines der Elemente ungeplante padding- oder margin-Abstände gesetzt hat.

 

[Klener]

Hi,
Das ganze gibt's live hier: Klick mich
Hab' schon einiges versucht, steh aber irgendwie auf dem Schlauch, Firebug konnte mir da auch nicht weiterhelfen. :(

MfG
Klener

 

[mermshaus]

Dir ist schon klar, dass die Rahmen Teil der Grafiken sind? :-|

 

[Klener]

Du weißt ja gar nicht wie peinlich das ist...! :S
Wieso auch immer hab' ich die in der Vorlage nicht gesehen, 1000 Dank, ich hätte noch Jahre gesucht!

Schande über mein Haupt!

 

[mermshaus]

Ich war mir erst nicht sicher, ob das ein Scherz sein soll. :) Nein, ist okay, passiert.

Bei dem „crop“-Element hast du zudem glaube ich eine width von 12 px gesetzt, die Grafik ist aber nur 8 px breit.