CSS-Formatiertes Auswahlfeld nur bedingt anklickbar... Fehler im CSS?

Cesideem · 5. September 2006 09:30

Moin,
ich habe folgendes Problem.
Ich habe 2 Auswahlfelder, die ich mit CSS formatiert habe. Diese Auswahlfelder habe ich auf zwei verschiedenen Seiten eingerichtet (Seite A & Seite B). Die Formatierung beider Felder identisch, dennoch verhalten sich die Felder unterschiedlich.

Wenn ich auf Seite A im Auswahlfeld Zielgruppe das erste mal geklickt habe, kann ich das Feld nur noch einmal aktivieren, wenn ich mit der Maus ganz am unteren Rand des Feldes klicke. Beim Auswahlfeld Kategorie hingegen funktioniert alles wie es - das ganze Feld ist anklickbar.
Auf Seite B hingegen funktioniert die Anwahl der beiden Auswahlfelder tadellos.

Ich nutzte FireFox 1.5.0.6 als Browser. Wenn ich mir die Seite im IE anschaue, arbeiten die Auswahlfelder auch wie sie sollen. Nur beim FireFox habe ich das Problem auf Seite A.

Hier der Link zur Seite zum selbst testen:
http://www.aikido-club-limburg.de
-> Kalender (entspricht Seite A - dort ist beim Auswahlfeld Zielgruppe der Fehler)
-> Wochenansicht (entspricht Seite B - dort läuft alles einwandfrei)

Ich hänge unten auch Auszüge aus den Quelldateien dran... Ich hab so langsam keinen Plan mehr, wo der Fehler steckt - ich vermute ihn jedenfalls irgentwo in der CSS-Formatierung... #angry#

Vielen Dank schonmal
Cesideem

Hier die jeweiligen Auszüge aus den Seiten:
SEITE A:
Templatequellcode der entsprechenden Zeile (Seite A):

<div class="cat_select">
 ###TARGETGROUP_SELECT### <label class="label" for="GroupSelect">Zielgruppe:</label><br class="br_clear" />
 ###CATEGORY_SELECT### <label class="label" for="CatSelect">Kategorie:</label><br class="br_clear" />
</div>

Quellcode der FE-Seite A:

<div class="cat_select">
 <select class="GroupSelect" onchange="document.location='http://www.aikido-club-limburg.de/' + this.options[this.selectedIndex].value;"><option value="no_cache/kalender.html"></option><option value="kalender.html?tx_calendar_pi1%5Btargetgroup%5D=1&cHash=150131de1d">Vereinsmitglieder</option></select> <label class="label" for="GroupSelect">Zielgruppe:</label><br class="br_clear" />
 <select class="CatSelect" onchange="document.location='http://www.aikido-club-limburg.de/' + this.options[this.selectedIndex].value;"><option value="no_cache/kalender.html"></option><option value="kalender.html?tx_calendar_pi1%5Bcategory%5D=1&cHash=22c1a661ec">Training</option><option value="kalender.html?tx_calendar_pi1%5Bcategory%5D=2&cHash=a6f1ecdd6c">Versammlung</option></select> <label class="label" for="CatSelect">Kategorie:</label><br class="br_clear" />
</div>

CSS-Datei zu Seite A

/*.calendar-month .cat_select {
	margin-top: 10px;
	text-align: right; 
}*/
.GroupSelect, .CatSelect {
	margin-left: 5px;
	margin-top: 5px;
	width: 120px;
	border: 1px solid #A65300;
	color: #A65300;
	font-size: 12px;
	float: right;
	background-color: #DDD9A2;
}

.label {
	margin-right: 5px;
	margin-top: 5px;
	width: 120px;
	text-align: right;
	float: right;
	font-size: 12px;
	color: #A65300;
}

.br_clear {
	clear: both;
}

SEITE B:
Templatequellcode der entsprechenden Zeile (Seite B):

<tr>
 <td align="center" valign="top" colspan="3">
  ###TARGETGROUP_SELECT### <label class="label" for="GroupSelect">Zielgruppe:</label><br class="br_clear" />
  ###CATEGORY_SELECT### <label class="label" for="CatSelect">Kategorie:</label><br class="br_clear" />
 </td>
</tr>

Quellcode der FE-Seite B:

<tr>
 <td align="center" valign="top" colspan="3">
  <select class="GroupSelect" onchange="document.location='http://www.aikido-club-limburg.de/' + this.options[this.selectedIndex].value;"><option value="no_cache/kalender/kalender-woche.html?tx_calendar_pi1%5Bf1%5D=2006&amp;tx_calendar_pi1%5Bf2%5D=36"></option><option value="kalender/kalender-woche.html?tx_calendar_pi1%5Bf1%5D=2006&amp;tx_calendar_pi1%5Bf2%5D=36&amp;tx_calendar_pi1%5Btargetgroup%5D=1&amp;cHash=fd83283359">Vereinsmitglieder</option></select> <label class="label" for="GroupSelect">Zielgruppe:</label><br class="br_clear" />
  <select class="CatSelect" onchange="document.location='http://www.aikido-club-limburg.de/' + this.options[this.selectedIndex].value;"><option value="no_cache/kalender/kalender-woche.html?tx_calendar_pi1%5Bf1%5D=2006&amp;tx_calendar_pi1%5Bf2%5D=36"></option><option value="kalender/kalender-woche.html?tx_calendar_pi1%5Bf1%5D=2006&amp;tx_calendar_pi1%5Bf2%5D=36&amp;tx_calendar_pi1%5Bcategory%5D=1&amp;cHash=70948343c2">Training</option><option value="kalender/kalender-woche.html?tx_calendar_pi1%5Bf1%5D=2006&amp;tx_calendar_pi1%5Bf2%5D=36&amp;tx_calendar_pi1%5Bcategory%5D=2&amp;cHash=0c4df1ea4a">Versammlung</option></select> <label class="label" for="CatSelect">Kategorie:</label><br class="br_clear" />
 </td>
</tr>

CSS-Datei zu Seite B

.label {
	margin-right: 5px;
	margin-top: 5px;
	width: 120px;
	text-align: right;
	float: right;
	font-size: 12px;
	color: #A65300;
}

.GroupSelect, .CatSelect {
	margin-left: 5px;
	margin-top: 5px;
	width: 120px;
	border: 1px solid #A65300;
	color: #A65300;
	font-size: 12px;
	float: right;
	background-color: #DDD9A2;
}

.br_clear {
	clear: both;
}