[Webkit] Input box te groot

[ZpAz]

Aloha,

Momenteel ben ik bezig met een project en loop tegen een probleem aan. Ik heb een reactie-formulier (Wordpress) en in Safari is input veld voor de gebruikersnaam te groot. Terwijl ik in de CSS dat niet declareer.

Heb hier het element geinspecteerd, zodat je kan zien welke CSS er op toegpast wordt. Maar ik snap niet waarom hij zo groot is? De input velden eronder zijn dat niet. In Firefox bijvoorbeeld zijn ze wel allemaal goed. In Opera ook maar in Chrome weer niet. Enkel in Webkit doet hij het dus vreemd.

[RobIII]

ZpAz schreef op dinsdag 26 april 2011 @ 20:32:
Heb hier het element geinspecteerd, zodat je kan zien welke CSS er op toegpast wordt.

Handig zo'n screenshot... behalve als er maar de helft op staat. Die scrollbar suggereert toch echt dat er meer staat. Een online testcase zou vele malen handiger zijn geweest

[jw_moonshine]

Een testcase zou in dit geval handig zijn iid.
Wat me wel gelijk opvalt is het rode kruis rechtsonderaan met een 7 ervoor. Misschien heeft dat er wat mee te make ? Of het geval dat height op auto staat( en dan ook een padding van 3px), zet die eens op een bepaalde waarde, en kijk of die input dan nog steeds raar groot is.

[Verwijderd]

Ik had laatst precies hetzelfde probleem: het bleek dat ik nog een andere div had die, net zoals de input in kwestie, ook id="author" had waardoor de styles voor die div ook op de input werden toegepast. Zoals te zien op de screenshot heb jij óók een div met id="author", en zou dat dus wel eens het probleem kunnen zijn (en zo nee, dan is het alsnog fout ).

[Bosmonster]

Verwijderd schreef op woensdag 27 april 2011 @ 10:04:
Ik had laatst precies hetzelfde probleem: het bleek dat ik nog een andere div had die, net zoals de input in kwestie, ook id="author" had waardoor de styles voor die div ook op de input werden toegepast. Zoals te zien op de screenshot heb jij óók een div met id="author", en zou dat dus wel eens het probleem kunnen zijn (en zo nee, dan is het alsnog fout ).

Dat zou met een fatsoenlijke IDE al niet voor mogen komen natuurlijk, maar ook een mooi voorbeeld voor waarom het een goed idee is om altijd element-selectors te gebruiken.

div#author of input#author dus bijvoorbeeld

Naast minder foutgevoelig, ook een stuk leesbaarder voor jezelf en je collega's.

[Borizz]

Bosmonster schreef op woensdag 27 april 2011 @ 10:13:
[...]


Dat zou met een fatsoenlijke IDE al niet voor mogen komen natuurlijk, maar ook een mooi voorbeeld voor waarom het een goed idee is om altijd element-selectors te gebruiken.

div#author of input#author dus bijvoorbeeld

Naast minder foutgevoelig, ook een stuk leesbaarder voor jezelf en je collega's.

Daarnaast zou je natuurlijk nooit één id op 2 verschillende elementen mogen zetten. En het kan soms juist erg handig zijn om een style te zetten onafhankelijk van het type element. Maar gebruik dan een classname i.p.v. een id.

[ZpAz]

Verwijderd schreef op woensdag 27 april 2011 @ 10:04:
Ik had laatst precies hetzelfde probleem: het bleek dat ik nog een andere div had die, net zoals de input in kwestie, ook id="author" had waardoor de styles voor die div ook op de input werden toegepast. Zoals te zien op de screenshot heb jij óók een div met id="author", en zou dat dus wel eens het probleem kunnen zijn (en zo nee, dan is het alsnog fout ).

Ik zie het idd, thanks daar zal ik naar kijken. Het is een form gegenereerd door Wordpress, vandaar de dubbele ID.

[Bosmonster]

Borizz schreef op woensdag 27 april 2011 @ 19:41:
[...]


Daarnaast zou je natuurlijk nooit één id op 2 verschillende elementen mogen zetten. En het kan soms juist erg handig zijn om een style te zetten onafhankelijk van het type element. Maar gebruik dan een classname i.p.v. een id.

Mjah met formulieren is dat soms niet altijd te voorkomen, zeker niet als je met meerdere mensen op een project werkt. Als een andere developer een formulier implementeert en inputs wat ID's toekent, maar verder niet weet hoe alle CSS in elkaar zit.

Voor de rest van CSS ben ik het met je eens hoor, maar vooral met formulieren is het natuurlijk snel nogal ID-overkill.

[ Voor 11% gewijzigd door Bosmonster op 28-04-2011 11:13 ]