Inputfeld & Button

[LukasHB]

Hallo,

ich habe eine Fehler und weiß nicht wie ich diesen beheben soll.

Der grafische Button für die Suche ist nicht gleich auf mit der Sucheingabe.

Woran kann das liegen? Im Internetexplorer wird es richtig angezeigt, im FireFox dagegen nicht.

Hier der HTML-Ausschnitt:

<fieldset>
<input class="sinput" name="keyword" type="text" id="ajsinput" value="" onkeyup="ajstastendruck(event);"/>
<input type="image" src="../images/button_search.png" class="submit" value="Suchen" />
</fieldset>
</form>

Hier nochmal ein Screenshot dazu:

http://bugla.biz/bugs/searchbug.png

Vielen Dank für die Hilfe im Vorraus!

Lukas

 

[LukasHB]

Hi,

der Rahmen dient nur zur Veranschaulichtung. Und der Button ist nur so groß wie er zu sehen ist. Ich habe ihn selber erstellt.

Das ist ja das Problem.

 

[assmaje]

Hi,

der Rahmen dient nur zur Veranschaulichtung. Und der Button ist nur so groß wie er zu sehen ist. Ich habe ihn selber erstellt.

Das ist ja das Problem.

Habs vorher gelöscht, weil ich im Nachhinein gesehen hab, dass du geschrieben hast, dass es im IE richtig angezeigt wird... Versuch doch mal alles in eine Tabelle zu packen, und den Inhalt der Zelle, in dem das Suchfeld und der Button sind, zu zentrieren.

 

[Efchen]

Hallo,

eine Tabelle ist an der Stelle natürlich semantisch nicht korrekt.
Wenn etwas im IE vermeintlich richtig angezeigt wird, im Firefox dagegen nicht, ist in 99 von 100 Fällen ein Fehler im Code oder im IE, der das auslöst.
Es ist anzunehmen, dass da irgendwelche margins oder sowas gesetzt sind. Schnapp Dir Firebug, ein Plugin für den Firefox und inspiziere die Elemente und ihre Eigenschaften.
Oder poste einen Link zur Seite, dann können auch andere den Fehler für Dich suchen.

Gruß,
-Efchen

 

[neuroleptika]

Als Fehler würde ich das nicht bezeichnen. Eher hat jeder Browser seine Eigenheiten bei der Formulardarstellung.

Eine Tabelle ändert da auch wenig.

Alle möglichen Abstände kann man mit float oder position:absolute aus dem Weg gehen.
Hier ein Beispiel mit float (Ungestestet):

input {
float: left;
display: block;
}

form, fieldset, input {
margin: 0;
padding: 0;
} 

fieldset {
border: none;
min-height: 1%;/*für IE7 (andere stört es nicht)*/
}

* html fieldset {
height: 1%; /*für IE6*/
}

fieldset:after {
content: "float beenden";/*für moderne Browser (css3)*/
display: block;
clear: both;
height: 0px;
visibility: hidden;
}

Damit es auch in Konqueror / Safari ähnlich wie in den meisten Browsern aussieht, könntest du eventuell auch border für input abschalten.

 

[LukasHB]

Vielen Dank, es funktioniert!