Seit css-Änderung wird select-box nicht mehr geladen

[raggut]

Hallo.
Es ist am ehesten ne css-Frage, daher mal hierher:

 <div class="styled-select" style="font-size:14px;POSITION: absolute; FLOAT: left; LEFT: 284px; TOP: 218px; z-index: 100">  
	      <!-- START BLOCK : Herstelleranzeige -->  
	      <input type="hidden" name="NAV" value="startseite" />  
	      <input type="hidden" name="ktyp_select" value="4" />  
	      <select  style=" " name="hersteller" id="Marke" onchange="loaddata('start','?q=Hersteller&index='+this.options[this.selectedIndex].value,'');">  
		  <!-- START BLOCK : Hersteller_leer -->  
		  <option value="" {sel}>Hersteller wählen</option>  
		  <!-- END BLOCK : Hersteller_leer -->  
		  <!-- START BLOCK : Hersteller -->  
		  <option value="{value}" {sel}>{bez}</option>  
		  <!-- END BLOCK : Hersteller -->  
	      </select>  
	      <!-- END BLOCK : Herstelleranzeige -->  
	      <div class="select_space">&nbsp;</div>  
	      <!-- START BLOCK : Modellanzeige -->  
	      <select style="z-index: 100; " name="modell"  id="Modell"  onchange="loaddata('start','?q=Modell&index='+this.options[this.selectedIndex].value,'');">  
		<!-- START BLOCK : Modell_leer -->  
		<option value="" {sel}>&nbsp;</option>  
		<!-- END BLOCK : Modell_leer -->  
		<!-- START BLOCK : Modell_waehlen -->  
		<option value="" {sel}>Modell wählen</option>  
		<!-- END BLOCK : Modell_waehlen -->  
		<!-- START BLOCK : Modell_Opt -->  
		<optgroup class="u" label="{value}" {sel}>{bez}</optgroup>  
		<!-- START BLOCK : Modell -->  
		<option class="{gu}" value="{value}" {sel}>{bez}</option>  
		<!-- END BLOCK : Modell -->  
		<!-- END BLOCK : Modell_Opt -->  
	      </select>  
	      <!-- END BLOCK : Modellanzeige -->  
	      <div class="select_space">&nbsp;</div>  
	      <!-- START BLOCK : Typanzeige -->  
	      <select  style="z-index: 100;" name="typ" id="Motor" onchange="loaddata('start','?q=Typ&index='+this.options[this.selectedIndex].value,'');">  
		  <!-- START BLOCK : Typ_leer -->  
		  <option value="" {sel}>&nbsp;</option>  
		  <!-- END BLOCK : Typ_leer -->  
		  <!-- START BLOCK : Typ_waehlen -->  
		  <option value="" {sel}>Typ wählen</option>  
		  <!-- END BLOCK : Typ_waehlen -->  
		  <!-- START BLOCK : Typ -->  
		  <option value="{KtypNr}" {sel}>{bez}</option>  
		  <!-- END BLOCK : Typ -->  
	      </select>  
	      <!-- END BLOCK : Typanzeige -->  
	    </div>

Das sind halt einfach 3 select-Boxen, denen die Hässlichkeit genommen werden wollte, also habe ich denen ein Stylesheet hinzugefügt mit einem custom pull-down arrow:

.styled-select select {  
   background: transparent;  
   font-family:Arial;  
   width: 233px;  
   padding: 5px;  
   font-size: 14px;  
   line-height: 1;  
   border: 0;  
   border-radius: 0;  
   height: 30px;  
   -webkit-appearance: none;  
   }  
  
.styled-select {  
   font-family:Arial;  
   width: 195px;  
   height: 30px;  
   overflow: hidden;  
   background: url('dingdong') no-repeat right #fff;  
   border: 1px solid #ccc;  
   }  

Seitdem der Style da ist - sieht übrigens fein aus -  erscheinen selectbox 2 und 3 nicht mehr, auch nicht mit dem behelfsweisen z-index.
Was kann der Grund sein??