[css] hoogte van input velden

[wilcodl]

Ik heb een submit button en een text veld op een regel staan en heb ze allebei via een css stylesheet de hoogte 20px meegegeven. Nu is het rare dat in IE 7 en Firefox 1.5 het veld en de submit button niet even hoog zijn...

Hoe los ik dit op zonder verschillende hoogtes aan de button en het text veld te geven?
Ik heb de margin, de padding, de vertical-align en line-height al een waarde gegeven, maar dit hielp niet.

Ter verduidelijking de html en css code:

HTML:

<form action="" method="post">
<input type="text" name="loginnaam" />
<input type="password" name="wachtwoord" />
<input type="submit" name="login" value="Inloggen" />
</form>

Cascading Stylesheet:

input, textarea {
  border: 1px solid #C5D5E6;
  background-color: #FBFCFE;
  font: 13px Verdana, Arial, Helvetica, sans-serif;
  }

#top input {
  width: 80px;
  height: 17px;
  margin: 0px;
  padding: 1px;
  vertical-align: middle;
  }

En nog een foto:

[ Voor 44% gewijzigd door wilcodl op 09-08-2006 20:36 . Reden: foto en code toegevoegd ]

[Zoefff]

IE heeft volgens mij de neiging om input-velden botweg uit te rekken als het font te groot is. Test het voor de grap eens met font-size 1px oid?

[ Voor 6% gewijzigd door Zoefff op 09-08-2006 20:24 ]

[BtM909]

Soms zeggen plaatjes meer dan 1000 woorden

Anyway, ik begrijp dat de submit button niet even hoog is als je input-veld en dat gebeurt in zowel FF als IE. Nu vraag je hoe je ze even hoog maakt, zonder de button te vergroten. Is het dan niet heel simpel gedacht om je text veld korter te maken

[wilcodl]

Dat maakt geen verschil in de grootte van de button of text veld, alleen in (duhh) de lettergrootte.

[wilcodl]

BtM909 schreef op woensdag 09 augustus 2006 @ 20:22:
Soms zeggen plaatjes meer dan 1000 woorden

Anyway, ik begrijp dat de submit button niet even hoog is als je input-veld en dat gebeurt in zowel FF als IE. Nu vraag je hoe je ze even hoog maakt, zonder de button te vergroten. Is het dan niet heel simpel gedacht om je text veld korter te maken

Ik heb het verkeerd gezegt:
Ik wil dat de button en het text veld gewoon dezelfde hoogte waarde houden.

[Zoefff]

Het lijkt wat met de border te maken te hebben. Overdrijf maar eens flink, de border van een textfield word opgeteld bij de hoogtte, terwijl de border van een button van de hoogtte word afgetrokken...

[Verwijderd]

Hmm vreemd, als ik dit code bij mij neerzet doet ie het wel prima. Zowel in IE als in FF is alles precies even hoog.

Weet je zeker dat je velden in een object staan met het id 'top'? Je hebt namelijk in je stijl aangegeven dat je voor input-objecten alleen in het object 'top' de hoogte e.d. aan wil passen. Als je input-velden daar niet in staan krijgen ze dus ook geen stijl mee.

Mocht dat niet het probleem zijn, wordt het voor mij lastig je verder te helpen aangezien het bij mij wel goed wordt weergegeven.