Submit knop en Password knop verschillen van hoogte?
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
#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;
}
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!
zet even
margin:0;padding:0;
op alle formuliervelden/knoppen
Toevoeging op 24/04/2014 23:24:58:
Oplossing gevonden! Het komt doordat de browsers standaard style sheet een specifieke hoogte geeft aan de knop (ik denk dat dit gebeurt zolang er geen px height wordt opgegeven). Je kan deze standaard stylesheet overriden door het volgende te gebruiken in de css van de knop:
box-sizing: content-box;
-moz-box-sizing: content-box;
Dus gefixed! Toch bedankt!
margin:0;
padding:0;
Toevoeging op 24/04/2014 23:55:01:
als je dat onder knop { zet dan is ie goed bij mij in google chrome.
Je hebt trouwens twee keer id="knop" in je html maar een id moet altijd uniek zijn.