[CSS2] form elementen standaard style

[Verwijderd]

ik ben bezig met een linked stylesheet, een extern stylesheet bestand dus. hierin heb bijna alle elementen een eigen style gegeven.

zoals je misschien weet kan je met "*" alle elementen in 1 keer een opmaak geven. op die manier heb ik alle elementen dezelfde font-familie en font-size gegeven.

code:

* {
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 9pt;
}

de elementen die ik wil laten afwijken van deze style (bv h1,h2, etc) defineer ik gewoon weer apart.

een formulier heeft zo ook zijn eigen look, alle invoer velden moeten even breed zijn. die defineer ik met

code:

input {
    width: 100px;
    ...
}

nu worden dus ook de radioboxes 100px breed, wel grappig effect (zeker in mozilla - moet je maar eens kijken), alleen niet de bedoeling. daarom wil ik de radioboxes een eigen style definitie meegeven, volgens de officiele css2 (zie hier http://www.w3.org/TR/REC-CSS2/selector.html#q1) beschrijving zou dit dan moeten werken:

code:

input[type="radio"] {
    width: 20px;
}

Mozilla 1.0 houdt zich er prima aan, MSIE6.0 niet... ik ben dus genoodzaakt om radioboxes een eigen class te geven, beetje vies. als je bedenkt dat ik in de toekomst misschien wel 300 radioboxes zou kunnen hebben, die dan allemaal een eigen class mee moeten krijgen omdat IE anders niet de goede opmaak meegeeft (overhead dus). er zit helaas waarschijnlijk niks anders op.

goed, nu het probleem. ik weet niet hoe breed een radiobox hoort te zijn. 20px is namelijk ook niet goed. nou zou je zeggen, gewoon alle waardes proberen tot je de goede hebt... maar er zijn nog veel meer attributen van elementen waar ik vraagtekens zet bij de standaard waarde. weet iemand waar ik een overzicht van alle elementen de standaard style kan vinden?
ik heb zelf deze al gevonden http://www.w3.org/TR/REC-CSS2/sample.html
maar juist de form elementen ontbreken...

of bestaat er een style als "normal" zodat het element op de standaard manier wordt weergegeven?

[André]

Mozilla 1.0 houdt zich er prima aan, MSIE6.0 niet... ik ben dus genoodzaakt om radioboxes een eigen class te geven, beetje vies. als je bedenkt dat ik in de toekomst misschien wel 300 radioboxes zou kunnen hebben, die dan allemaal een eigen class mee moeten krijgen omdat IE anders niet de goede opmaak meegeeft (overhead dus). er zit helaas waarschijnlijk niks anders op.

Met js een browserdetectie doen, en dan je juiste stylesheet includen voor de betreffende browser.

MSDN CSS

[ Voor 10% gewijzigd door André op 11-12-2002 10:52 ]

[drm]

IE6 ondersteunt dergelijke constructies inderdaad (nog) niet, en ben je zo goed als genoodzaakt een class op te geven voor radio buttons.

Wat ook mogelijk is, is een fieldset of desnoods een divje om die velden heen zetten die een bepaalde class heeft, en vervolgens een style op contextual basis voor de inputs vaststellen die in die div voorkomen. Mooie zin he?

code:

fieldset.checkboxes {}
fieldset.checkboxes input {
   width:17px; height:17px;
}
input { 
   width:100px; height:14px; 
   font-size:11px; font-family:Verdana;
}

code:

<fieldset class="checkboxes">
    ...
   <input type="checkbox" ... />
   <input type="checkbox" ... />
   <input type="checkbox" ... />
   ...
</fieldset><input type="text" /> ...

standaard hoogte en breedte in IE6 windows is 17 bij 17 pixels, uit mijn hoofd gezegd. Maar daar lijkt me niet moeilijk achter te komen. Dit zou ik dan overigens inderdaad enkel met een IE useragent vaststellen, met een NS6 of Mozilla useragent kun je de [type=radio] manier wel gebruiken.

[Verwijderd]

Internet Explorer vanaf 5.0 ondersteunt ook expressions. Het zijn eigenlijk walgelijke dingen, maar je zou het kunnen gebruiken in je stylesheet:
input{
width:expression(this.type=='checkbox'?return '200 px':return '20px');
}

[Verwijderd]

drm schreef op 11 December 2002 @ 11:46:
standaard hoogte en breedte in IE6 windows is 17 bij 17 pixels, uit mijn hoofd gezegd. Maar daar lijkt me niet moeilijk achter te komen. Dit zou ik dan overigens inderdaad enkel met een IE useragent vaststellen, met een NS6 of Mozilla useragent kun je de [type=radio] manier wel gebruiken.

De afmetingen van (veel) form-elementen is geloof ik afhankelijk van de gebruikersinstellingen. Een standaard afmeting is er dus niet....?

[drm]

Bij IE volgens mij niet, hoor

[Verwijderd]

drm schreef op 11 december 2002 @ 16:02:
Bij IE volgens mij niet, hoor

Sommige XP themes hebben toch van die eigenaardig opgemaakte formuliertjes?

[drm]

zit wat in

Anyhoet, als je 't omdraait ben je natuurlijk van 't probleem af. dat je enkel de input's waarvan de styles aangepast moeten worden in een aparte fieldset of div oid zet.

[Verwijderd]

bedankt voor de tips. ik denk dat de er idd geen form standaard bestaat en dat elke browser een beetje zijn eigen opmaak geeft. dit geld ook voor bv de scrollbar. in IE is die 20px breed in Mozilla isdie net ietsies smaller... niks aan te doen.

en het zuigt gewoon dat MSIE zich weer eens niet aan de standaard houdt... want op die manier moet je overbodige classen creeren... (of je de boel nou omdraait of niet...)

over die expression waar Martijn22 het over had, ziet er ranzig uit maar er zit wel wat in (IE only geintje?). ik ga daar eens wat meer over lezen! nog nooit iets over gelezen namelijk...

[drm]

mja, het is hier niet zo zeer een kwestie van 'zich houden aan' de standaarden, maar 'het ondersteunen van' de standaarden

En overbodige classes zul je er inderdaad voor aan moeten maken. En dan zou ik liever voor een contextual gaan dan voor zo'n ranzige IE-only oplossing (bah)

[Verwijderd]

Verwijderd schreef op 11 december 2002 @ 16:53:
bedankt voor de tips. ik denk dat de er idd geen form standaard bestaat en dat elke browser een beetje zijn eigen opmaak geeft. dit geld ook voor bv de scrollbar. in IE is die 20px breed in Mozilla isdie net ietsies smaller... niks aan te doen.

en het zuigt gewoon dat MSIE zich weer eens niet aan de standaard houdt... want op die manier moet je overbodige classen creeren... (of je de boel nou omdraait of niet...)

over die expression waar Martijn22 het over had, ziet er ranzig uit maar er zit wel wat in (IE only geintje?). ik ga daar eens wat meer over lezen! nog nooit iets over gelezen namelijk...

Van de breedte van een scrollbar kun je ook in geen geval opaan. Aangezien je in windows ook fijn je scrollbar een stuk smaller / breder kan maken, en dan hebben we het nog niet eens gehad over de befaamde xp-themes ...

[drm]

komt 'ie weer met zijn XP themes


Maar scrollbars zijn ook geen dingen waar je je site op moet vastpinnen, sowieso niet. Ik wil namelijk mijn browserscherm zo groot kunnen maken als ik zelf wil, en dan moet niet het ontwerp allerlei fratsen voor mij uit gaan halen, ajbwib. Als je echt graag de scrollbar of iets wat daar vanaf hangt wilt customizen, kun je beter een dhtml-scrollbar achtig alternatief bedenken/opzoeken

[Verwijderd]

drm schreef op 11 december 2002 @ 18:09:
komt 'ie weer met zijn XP themes


Maar scrollbars zijn ook geen dingen waar je je site op moet vastpinnen, sowieso niet. Ik wil namelijk mijn browserscherm zo groot kunnen maken als ik zelf wil, en dan moet niet het ontwerp allerlei fratsen voor mij uit gaan halen, ajbwib. Als je echt graag de scrollbar of iets wat daar vanaf hangt wilt customizen, kun je beter een dhtml-scrollbar achtig alternatief bedenken/opzoeken

Inderdaad, hetzelfde geld voor de checkboxes / radiobuttons....
Dan heb je 'alle vrijheid'..