[CSS/FF] Select margin: 0px problemen

[Cavorka]

Het probleem is heel makkelijk, maar ik heb geen idee hoe ik er omheen kan werken. Het probleem doet zich voor in FF 1.5.0.6, maar niet in IE6.

Als je de padding op 0 zet bij een select box dan wordt de hele box te smal. Ik heb een beetje gezocht met Google, en de 'oplossing' die daar werd aangedragen was om min-height: 1.5em te zetten. Maar dat helpt helemaal niets, want ook bij brede select boxes werkt het niet (zie de screenshot).

Voor een online voorbeeld zie: http://www.onnovanbraam.com/temp/wtf.html

En hier op de pagina waar ik het probleem heb


Basically alle boxes zijn dus te small. Ik heb gepobeerd de padding, padding-left, padding-right naar -10px to +10px te zetten, maar dat helpt niet. De selector pijl dinges (dat pijltje naar beneden) staat altijd over de laatste letter heen (behalve dus bij enkele getallen/letters, zie de 7 boven).

Iemand een idee hoe dit op te lossen, anders dan niet de padding op 0 te zetten voor alle elementen, want, laten we zeggen: dat is in dit geval gegeven, hoe krijg ik de select boxes dan weer 'normaal'. Zijn er nog meer paddings dan left, top, right en bottom?

[crisp]

Daarom is het ook geen goed idee om dmv de *-selector alle paddings en margins op 0 te zetten, doe dat liever gewoon voor die elementen waarbij dat nodig is.
Anyway, het probleem ontstaat hier doordat je option-elementen geen default padding-right meer hebben en dus niet zozeer je select-element zelf.

[Cavorka]

crisp schreef op donderdag 07 september 2006 @ 23:17:
Daarom is het ook geen goed idee om dmv de *-selector alle paddings en margins op 0 te zetten, doe dat liever gewoon voor die elementen waarbij dat nodig is.
Anyway, het probleem ontstaat hier doordat je option-elementen geen default padding-right meer hebben en dus niet zozeer je select-element zelf.

Geen goed idee omdat sommig browsers dus buggy zijn (IE doet het in dit geval namelijk wel okay). Want dat je een padding van 5px nodig hebt om te laten zien wat er in je option box zit vind ik nogal raar.

Het is misschien nogal radicaal om * op 0 margin en padding te zetten, maar naar mijn mening zou dit eigenlijk als default zo moeten zijn, vandaar dat ik het gedaan had en eigenlijk alles werkte nog zoals ik wilde dat het werkte, behalve dit.

Thanks voor de oplossing.

[crisp]

IE doet het in dit geval namelijk wel okay

Nee, in IE (< 7) zijn selects gewoon amper te stylen, derhalve heeft je rule daar geen invloed op. In Firefox zijn formcontrols meer native widgets en worden derhalve gewoon met CSS default gestyled. Als je begint over buggy browsers dan kan ik je wel vertellen welke browser er hier het meest buggy is
En standaard geen margins en paddings zou zeker geen default moeten zijn. Het is gewoon vies, echt iets voor luie devvers.

Edit: nog even een interessant artikel opgesnort mbt het nullifyen van default styles voor alle elementen:

quote: http://kurafire.net/log/a...26/starting-css-revisited

The other thing is the use of the "star-selector," or * { } in CSS. The star selector selects every single element, which produces an overkill of style-nullifying. Sander pointed out that Mozilla (for one) has a great deal of default styling on form controls, which the star selector nullifies when applying margin:0 and padding:0 to it. As a result, buttons don't behave like buttons anymore, and so forth. I never really noticed that, which only goes to show that I'm no longer used to buttons behaving like buttons. I did some research in this, and as it turned out, most of all the weblogs I frequently comment on have this same problem: buttons not behaving like buttons. In most cases, it was indeed the star selector being the culprit.

Additionally, Mozilla developers have stated that the star selector slows down things. While this is apparently not noticeable for end-users in most cases, it may slow down other aspects that interact with the CSS as well. And don't forget that it's definitely a bit overkill to loop through all elements when you only have to alter a dozen of them, roughly.

[ Voor 75% gewijzigd door crisp op 07-09-2006 23:55 ]

[Cavorka]

crisp schreef op donderdag 07 september 2006 @ 23:44:
[...]
Nee, in IE (< 7) zijn selects gewoon amper te stylen, derhalve heeft je rule daar geen invloed op.
En standaard geen margins en paddings zou zeker geen default moeten zijn. Het is gewoon vies, echt iets voor luie devvers.

Met okay bedoelde ik dat het nog te lezen was en dus meer als 'okay'.

Lui? Misschien, ik vind dat maar een rare bestempeling. Naar mijn mening betekent het controle. Menig tag (form, p) heeft namelijk nogal random margins en paddings en om daar allemaal rekening mee te gaan houden kan tricky zijn. Ik begrijp dat dat het hele idee achter de tag in the beginning was, maar om het overzichtelijk te houden zou ik liever alle margins 0 hebben en van daaruit zelf bepalen wat de margins/paddings voor tags zijn.

*Edit: Ik wist dat het niet echt snel was (loopen door alle elementen op de pagina). Maar lui als in: 'je kan beter even de elementen zoeken die je vaag vindt gedragen en daar dan de margin van op 0 zetten'. Daar ben ik eigenlijk wel mee eens, ik had je verkeerd begrepen. Zal daar maar tot overgaan.
Nevertheless: dat je margins moet hebben om een form te laten werken bijvoorbeeld vind ik dan weer raar en zeer buggy behaviour van FF.

[ Voor 22% gewijzigd door Cavorka op 07-09-2006 23:56 ]

[crisp]

Op buttons lijkt het geen negatief effect te hebben: (links met padding en margin op 0, rechts default)
waaaaa? waaaaa?
Het 'push'-effect is een beetje weg maar that's it.

Verder is het sowieso ook niet zo dat je form-elementen niet meer werken, ze zien er hooguit wat raar uit (zoals je selects) en dat is gewoon te verklaren (by design) en geen buggy behavior.

[ Voor 6% gewijzigd door crisp op 08-09-2006 00:03 ]

[MBV]

denk eens even na hoe een select eruit ziet voor een browser: dat is een box waarvan de breedte afhangt van de 'onderliggende' option-elementen. Die option-elementen zijn zo breed als de tekst die ze bevatten. Als je daar een padding invoert van de breedte van het pijltje, heb je rechts een witruimte waar het pijltje kan zitten. Is de enige fool-proof manier: anders zou het pijltje in de padding van de select-box moeten zitten, iets wat waarschijnlijk niet leuk is bij het 'tekenen' van de browser.

IE is hier echt veel fouter: die 'merkt' niet eens dat jij je padding op 0 hebt gezet voor die items! Hij heeft dus helemaal niet geluisterd naar *{padding:0} voor die paar elementen, dat vind ik veel iritanter...

@crisp: de stippelrandjes om de tekst zitten anders, links zitten ze 'in' het push-effect.

[ Voor 6% gewijzigd door MBV op 08-09-2006 00:08 ]

[Cavorka]

MBV schreef op vrijdag 08 september 2006 @ 00:07:
denk eens even na hoe een select eruit ziet voor een browser: dat is een box waarvan de breedte afhangt van de 'onderliggende' option-elementen. Die option-elementen zijn zo breed als de tekst die ze bevatten. Als je daar een padding invoert van de breedte van het pijltje, heb je rechts een witruimte waar het pijltje kan zitten. Is de enige fool-proof manier: anders zou het pijltje in de padding van de select-box moeten zitten, iets wat waarschijnlijk niet leuk is bij het 'tekenen' van de browser.

@crisp: de stippelrandjes om de tekst zitten anders, links zitten ze 'in' het push-effect.

Dat bedoel ik precies met rare paddings of margins van elementen. Ik vind dat echt heel erg lelijk dat je standaard een padding van 5px nodig hebt (hoe bedoel je random, dat pijltje is iets van 10-12px breed) op de option elementen. En ook heel erg vaag, waarom is de option niet gewoon zo breed als ze content en dan tekent hij het pijltje ernaast als default. Dat je de padding nodig hebt om het standaard er normaal (ik neem toch aan dat iedereen het wel met me eens is dat het normaal is om de tekst van je option in zijn geheel te kunnen lezen) uit te laten zien, dat vind ik vreemd.
Dit is echt niet een fool-proof manier. Dat select pijltje moet in de select-box zitten. Als je die over je tekst zou willen, zou je de breedte van je select element moeten aanpassen vind ik.

Dus in jouw worden: select box is zo breed als onderliggende elementen + breedte van pijltje (en dit is uiteraard weer browser en OS afhankelijk, altijd leuk ) of zo breed als aangegeven door de user in de CSS:

Cascading Stylesheet:

select.shabbaBox { width: 200px ; }.

[ Voor 7% gewijzigd door Cavorka op 08-09-2006 00:16 ]

[MBV]

Dat kan dus niet, volgens de basisstructuur van heel CSS: Alles is een rechthoek, met een formaat dat afhangt van padding, width, border en content. Dan zou je dus zeggen dat een select zijn breedte afhangt van padding, width, border, content én het pijltje? Dan zou de hele structuur van CSS overhoop moeten worden gehaald.
Padding op de select zal waarschijnlijk búiten het pijltje worden getekend, check maar eens met een border.
[edit]Hmm, hoe de padding op de select werkt snap ik ook niet. Magoed, wat jij beschrijft vind ik prima in de filosofie van CSS passen.

[ Voor 13% gewijzigd door MBV op 08-09-2006 00:52 ]