[xhtml/css] Select menu zelfde maken in IE en FF.

Pagina: 1
Acties:

  • Onbekend
  • Registratie: Juni 2005
  • Laatst online: 23:46
Ik heb middels 1 stylesheet een pagina die voor FireFox en voor Internet Explorer bijna exact hetzelfde eruit ziet.
Alleen krijg ik het onderstaande onder FireFox en Internet Explorer niet hetzelfde:
HTML:
1
2
3
4
5
6
7
<select id="DDM" name="DDM" class="DropDown" >
<option class="Select" value ="1">Keuze1</option>
<optgroup class="DontSelect" label="Keuze2"></optgroup>
<option class="Select" value ="3">Keuze3</option>
<option class="Select" value ="4">Keuze4</option>
<optgroup class="DontSelect" label="Keuze5"></optgroup>
</select>

In de optgroup-tag wordt de tekst verschillend weergegeven. FireFox zet het deel verder naar links, en Internet Explorer zet de tekst cursief.

Dit is de bijbehorende CSS:
Cascading Stylesheet:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
optgroup.DontSelect {
    color:                  #FF0000;
    font-family:            times;
    font-size:              14px;
    font-style:             normal; 
    font-weight:            normal;
}

option.Select {
    color:                  #00FF00;
    font-family:            times;
    font-size:              14px;
    font-style:             normal; 
    font-weight:            normal;
}


Ik heb al met text-indent de tekst een vaste offset proberen te geven, maar dat schuift in beide browsers iets op. Ook het niet-cursief maken lukt me niet.
Officiëel is optgroup daar niet voor bedoeld, maar ik ken verder geen andere mogelijkheid om tekst juist niet te laten selecteren.

Heeft iemand nog een mogelijk oplossing?

Speel ook Balls Connect en Repeat


  • crisp
  • Registratie: Februari 2000
  • Laatst online: 01:00

crisp

Devver

Pixelated

Select-elementen zijn in IE (< 7 in IE7 is wel eea verbeterd als het goed is) zeer beperkt te stylen. Zelfs het 'disabled' attribuut (wat je hier eigenlijk zou moeten gebruiken) kent IE niet (in 7 ook nog niet :/).
Ik gebruik meestal dan maar een stukje javascript om te voorkomen dat dergelijke opties geselecteerd kunnen worden en vang de rest serverside wel af. Met een class="disabled" (bij gebrek aan ondersteuning voor option[disabled] in CSS in IE :/ :/) op de option regel ik dan de styling (ook meteen een mooie hook voor je JS).

[ Voor 70% gewijzigd door crisp op 28-08-2006 20:49 ]

Intentionally left blank


  • Onbekend
  • Registratie: Juni 2005
  • Laatst online: 23:46
Ik heb disabled helemaal over het hoofd gezien.
Ik gebruik dit wel, omdat tekst die niet geselecteerd mag worden toch rood gekleurd is.
JavaScript is nog teveel werk, maar misschien komt dat later wel.

Aan de server-side vang ik toch alle onjuiste combinaties op. Formulier-hackers blijven bij mij netjes buiten de deur. :D

Speel ook Balls Connect en Repeat