I've recently started learning HTML and CSS, and I've encountered a problem that has me stuck.
HTML:
<div class = "window">
<form>
<input class="button" type="submit" value="Login" />
</form>
</div>
CSS:
@font-face {
font-family: caviarDreams;
src: url(./CaviarDreams.ttf);
}
html * {
font-family:caviarDreams;
cursor: url(./cursor.png), auto;
background: url(./background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.button {
border: none;
text-indent:0;
display:inline-block;
line-height:39px;
font-size: 15px;
background:url(./buttonNormal.png) no-repeat;
width:230px;
height:71px;
}
.button:active {
background:url(./buttonActive.png) no-repeat;
}
.button:hover {
background:url(./buttonHover.png) no-repeat;
}
.window {
background: url('./window.png') no-repeat;
background-size: 624px 696px;
width:624px;
height:696px;
}
Below is the code snippet. You can view a demo on this link. Interestingly, there seems to be no issue with it on the fiddle.
html * {
background: url(./background.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
.button {
border: none;
text-indent: 0;
display: inline-block;
line-height: 39px;
font-size: 15px;
background: url(http://i.imgur.com/ZD9nn7F.png) no-repeat;
width: 230px;
height: 71px;
}
.button:active {
background: url(http://i.imgur.com/K5mD1ga.png) no-repeat;
}
.button:hover {
background: url(http://i.imgur.com/Yh2wITG.png) no-repeat;
}
.window {
background: url('http://i.imgur.com/0ZQwEeS.png') no-repeat;
background-size: 624px 696px;
width: 624px;
height: 696px;
}
<div class="window">
<br/>
<br/>
<br/>
<br/>
<form>
<input class="button" type="submit" value="Login" />
</form>
</div>How it currently looks:
How it should look:
When I remove the <form> tags, the unwanted white space disappears. Any suggestions on how to fix this?