Hallo,
ich versuche derzeit krampfhaft ein kleines Suchformular mit zwei Buttons vernünftig zu positionieren (siehe beigefügtem Screenshot). Im Safari/Chrome funktioniert die Positionierung sehr gut und auch der Hover-Zustand bei den Buttons funktioniert.
Bei dem Firefox (neueste Version) gibt es sowohl ein Problem mit der Positionierung (das Input-Feld ist zu tief), als auch das er den Hover-Zustand nicht anzeigt. FF schreibt zu dem Hover-Problem folgendes in seiner Fehlerkonsole:
Zitat:
Warnung: Fehler beim Verarbeiten des Wertes für Eigenschaft 'background'. Deklaration ingoriert
|
Allerdings schreibt FF in der Fehlerkonsole viele Fehler (auch von funktionierenden Website) und der betreffende Code validiert. Kann Firefox überhaupt bei Buttons den Hover-Zustand?
Ich werde wohl eh auf zwei Varianten zurückgreifen müssen: Eine gestylte und eine wo ich die Formularelemente so belasse, da ich bei anderen Browsern (z.B. Mozilla Camino) noch weitere Probleme festgestellt habe, denn die ignorieren die Background-Eigenschaft komplett.
Hier der betreffende Code:
HTML
HTML-Code:
<div class="span-14 searchbox"> <!-- start searchbox -->
<form action="#" id="searchform" method="get">
<input name="standort" type="submit" class="btn_standort" value="Standort" />
<label for="q">Gebe einen Ort oder Bezeichnung ein …</label>
<input name="q" id="q" type="text" class="text" />
<input name="suchen" type="submit" class="btn_suchen" value="Suchen" />
</form>
<p class="pp_Notes">Hier kommt zusätzlich ein Hinweis bzgl. der zwei Buttons hin. Der Hinweis wird angezeigt, wenn das Formularfeld aktiv ist.</p>
</div> <!-- end searchbox -->
CSS
Code:
/**
* Formatierung Suchbox
*
* @subsection layout
*/
input.text, input.title, textarea, select {
border: 3px solid #195073;
color: #666;
height: 19px;
width: 298px;
font-size: 0.9em;
}
/*
FIXME Darstellungsfehler der Hover-Darsetllung bei Buttons im FF fixen.
Background wird nicht geladen.
*/
input.text:focus, input.title:focus, textarea:focus, select:focus { border: 3px solid #f7de07; }
input.btn_standort {
text-indent: -999em;
background: url('../../images/btn_standort.png') top left;
width: 94px;
height: 35px;
border: none;
}
input.btn_standort:hover { background: url('../../images/btn_standort.png') 71px left; }
input.btn_standort:active { background: url('../../images/btn_standort.png') bottom left; }
input.btn_suchen {
text-indent: -999em;
background: url('../../images/btn_suchen.png') top left;
width: 94px;
height: 35px;
border: none;
}
input.btn_suchen:hover { background: url('../../images/btn_suchen.png') 71px left; }
input.btn_suchen:active { background: url('../../images/btn_suchen.png') bottom left; }
Viele Grüße,
Christian