Ik ben aan het proberen om mijn login knoppen op dezelfde hoogte en breedte te stylen met css. Maar om de een of andere reden is mijn wachtwoord (password) groter in hoogte dan mijn submit knop terwijl ze allebei gestyled zijn op 100%. Wat is hier de reden van en hoe fix ik het?
De HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Oblectare, Weet wat je gaat doen vandaag!</title>
<link rel="stylesheet" href="wtf.css">
</head>
<body>
<div id="wrapper">
<div id="header">
Oblectare
<div id="aanmeldform_submit">
<input type="submit" name = "submit" value="Aanmelden" id="knop" />
</div>
<div id="aanmeldform_wachtwoord">
<input type="password" name = "submit" value="Aanmelden" id="knop" />
</div>
</div>
</div>
</body>
</html>
En de css code:
#wrapper {
margin-right: auto;
margin-left: auto;
width: 1600px;
}
#header {
margin-right: 0;
margin-left: 0;
width: 1600px;
height: 60px;
background-color: #0066FF;
display: table-cell;
vertical-align: middle;
}
/*Code voor de bovenste aanmeld form */
#aanmeldform_submit {
width: 100px;
height: 30px;
padding-right: 40px;
text-align: center;
display: table-cell;
vertical-align: middle;
float: right;
}
#aanmeldform_wachtwoord {
background-color: red;
width: 100px;
height: 30px;
display: table-cell;
vertical-align: middle;
float: right;
}
#knop {
width: 100%;
height: 100%;
}
/*-----------------------*/
body { margin:0;padding:0; }
html {
padding: 0;
}
Bij voorbaat dank!
