Vaag CSS + <Select> probleem...

[mees]

OK, nu heb ik wel een héél vaag probleem...

ik heb een .css bestand staan, aangeroepen door een <link>

in deze .css staat o.a. hetvolgende:

code:

INPUT{font-family: Verdana; border: 1 solid #146DC0; color: #093E6F; background: #BBDCFB;}
SELECT{font-family: Verdana; base-color: #FF8000; border: 1 solid #146DC0; color: #093E6F; background: #BBDCFB;}
TEXTAREA{font-family: Verdana; border: 1 solid #146DC0; color: #093E6F; background: #BBDCFB;}
#main {width:640; height: 450; overflow: auto; align: left}

Verderop in de site, staat:

code:

<select name=id>
<option value=1>bla</option>
<option value=2>bla</option>
</select>

Nu werkt dit perfect in Internet Explorer, maar in NS en Mozilla komt er een vaag iets tevoorschijn:
Hij weergeeft de select-box, maar als je erop klikt komt niet het dropdown-menu tevoorschijn. Ik heb vanalles geprobeerd, met devolgende resultaten:
de <link> tag weghalen: dropdown werkt (dus het zit in de .css)
in de .css de SELECT regel weghalen: dropdown werkt niet
in de .css regel de #main regel weghalen: dropdown werkt

De dropdown box bevind zich inderdaad in de 'main' layer, maar wat heeft het er mee te maken? Wat botst er hier?

[Verwijderd]

"Gij zult geen selectboxen stijlen"

Altijd gedonder met die dingen. Ze worden door het OS aangemaakt en niet door de browser (ofzoiets, 'k weet niet het precies in elkaar zit).

Op het lettertype na is een selectbox volgens mij niet te stijlen. Ook geeft het gedonder met layers. Zijn al zat topics over het select-stijl-layer-probleem voorbij gekomen volgens mij. Misschien dat je in een van deze topics meer duidelijkheid vindt.

[mees]

Die had ik inderdaad ook wel gevonden...
maar het vage is, de style wordt perfect toegepast op die dropdownbox als ik de #main lijn weghaal..

dus als ik niet aangeef hoe breed de leyer moet zijn waar de dropdown in staat, doet ie het. VERY vaag

[RM-rf]

code:

border: 1 solid #146DC0;

netscape 4x gaat idd flink de mist in hiermee, zodra je het toepast op form-elements.

de beste oplossing is om dit eventueel op te splitsen (border is shorthand voor border-width, border-style en border-color, en meen dat ns4x juist bij border-style de mist ingaat)

vervolgens zet je in je ge-LINK-de stylesheet een
@import-rule:

code:

@import "non_ns4x_styles.css";

en in dat stylesheet definieer je je border-style voor SELECT, ns4x kent de gehele @import-rule niet, terwijl betere css-ondersteunende browsers dat wel doen.

[mees]

Hmm, dat kan ik er in ieder geval inzetten voor de ns4x gebruikers... goeie tip!

maar het geval is dat ik hier dus Netscape 6 heb! die zou het toch gewoon moeten doen?!

trouwens, de dropdown werkt ook niet als ik de hele SELECT regel weghaal uit de css... hij werkt alleen als ik de #main regel weghaal...

[Bluestorm]

Heb je er ook een pagina bij? want als ik deze code in een HTML documentje plak, werkt het gewoon.

[mees]

ja dat is het allerleukste ervan.. als je het appart in een html'etje plakt werkt het, maar bij de site in z'n geheel werkt het niet...

site is http://blob.xs4all.nl/2 (tijdelijk)

Dropdown is bijvoorbeeld te vinden bij "zoek nieuws"

[Mindwalker]

Misschien heeft het niks met je probleem te maken: maar je kunt sowieso de </option> achter de <option> weghalen, lijkt mij overbodig (ik gebruik het niet, en ik heb het nog nooit gezien).

[mees]

ehm, je moet het toch zo doen:

code:

<option value="value">Ding in lijst</option>

?

Maarja dan nog.. als ik het weghaal werkt ie ook niet, maar toch bedankt voor de tip..

[Verwijderd]

"border: 1 solid #146DC0" is natuurlijk sowieso fout, aangezien je bij elke afmeting die niet 0 is een maateenheid moet zetten, bijvoorbeeld px. Dat geldt ook voor height en width. Verder heb ik nog nooit van een property base-color gehoord, dus als het al bestaat, vermoed ik dat het IE only is.

En in plaats van background: #BBDCFB; kun je ook beter background-color: #BBDCFB; gebruiken. Ook is Verdana geen standaard font, en ik raad je aan om altijd nog alternatieve fonts erbij te zetten, bijvoorbeeld font-family: Verdana, Sans-Serif;

align bestaat ook niet volgens W3C, dus waarschijnlijk bedoel je text-align. (overigens is text-align IMHO een verkeerde naam, aangezien het op alle elementen invloed heeft, niet alleen tekst)

/genoeg gezeurd

[Exe-cuter]

[offtopic]
Moet je ff op tweakerstracker kijken : staat er achter "vaag CSS" een dropdownbox !

lol

[mees]

is geen zeuren, je hebt gelijk

alles aangepast, maar nog steeds geen resultaat
ik word af en toe zo MOE van netscape!

[mees]

Op zondag 02 juni 2002 12:18 schreef EXE-cuter het volgende:
[offtopic]
Moet je ff op tweakerstracker kijken : staat er achter "vaag CSS" een dropdownbox !

lol

das inderdaad wel een vieze bug
al gemeld ?

[Bluestorm]

Als je die main layer buiten de tabel zet gaat 't wel goed. Dus zou maar eens zoeken of die tabel die er om heen staat wel klopt

De pagina even door een HTML-validator halen zou ook wel handig zijn:

#

Error: end tag for element "TD" which is not open; try removing the end tag or check for improper nesting of elements

en dat voor allerlei elementen.


(Oja, alleen de 'overflow: auto' er uit halen werkt ook)

[Exe-cuter]

Op zondag 02 juni 2002 12:23 schreef mees het volgende:

[..]

das inderdaad wel een vieze bug
al gemeld ?

Aan wie moet je dat melden ?

[mees]

Op zondag 02 juni 2002 12:24 schreef Bluestorm het volgende:
Als je die main layer buiten de tabel zet gaat 't wel goed. Dus zou maar eens zoeken of die tabel die er om heen staat wel klopt

ik a het inderdaad ff checken ja.. tnx..

(Oja, alleen de 'overflow: auto' er uit halen werkt ook)

Nee, want dan rekt ie de layer uit ipv er een scrollbar naast te zetten (als de inhoud v/d layer hoger is dan de layer zelf)

[RM-rf]

voor netscape 6x zouden er twee elementen kunnen zijn waardoor het fout gaat;
oftewel hij renderd in Quirks-mode, dat is dat het document niet valideert en netscape6x de rendering van ns4x volgt, incl. een aantal bugs (dacht overigens niet dat de border-bug daarbij hoorde)

anders kun je zoeken naar de mogelijke bug door per style-definitie te kijken welke de veroorzaker is:
zo kent mozilla nog wel een aantal bugs mbt de implementatie van float
http://www.richinstyle.com/bugs/mozilla.html#float

gebruik bovenstaande site om mogelijke bugs te onderzoeken, is een uitgebreid en redelijk volledig overzicht va bugs en ondersteuning van CSS door browsers.

overigens is netscape6.0 een erkende 'failed release', erg buggy en slecht in veel implementaties, zou je aan willen raden minstens over te stappen op 6.1 als ondergrens voor ondersteuning
(netscpae heeft d pijnlijke neiging om hun vX.0 releases steeds de mist in te laten lopen, voor ns4.0 geldt dat ook, eerste stabiele release is 4.01)

[mees]

Op zondag 02 juni 2002 12:24 schreef EXE-cuter het volgende:

[..]

Aan wie moet je dat melden ?

In "Lieve adjes" ofzo?

[RM-rf]

Op zondag 02 juni 2002 12:27 schreef mees het volgende:

[..]

In "Lieve adjes" ofzo?

ne, dit is Tnet gerelateerd dus dat hoort in [forum=43]

edit: heb dit al gemeld: [topic=512325/1/100]

[mees]

hmm ja das waar inderdaad..

[ACM]

Op zondag 02 juni 2002 12:24 schreef EXE-cuter het volgende:
Aan wie moet je dat melden ?

Graag op devtrack.tweakers.net en liefst met een screenie (als je die hebt).
De php-code die die tracker bakt zou dat namelijk niet mogen toelaten.

[edit]
Topic in TFF kan ook natuurlijk

[mees]

kheb nu de overflow: auto; weggehaald uit de #main regel (index.css), en nu werkt het... maar: hoe zorg ik nou dat ie een scrollbar toevoegd aan die layer? dat werkte prima met overflow: auto; ...