I have a random button (input) in the top left corner of my page, can you tell me how to fix this?!
Here is a picture: http://d.pr/h8An
Here is my code:
<img class="iphone" src="img/iphone.png" />
<img class="sp_title" src="img/sp_title.png" />
<img class="sp_detail" src="img/sp_detail.png" />
<img class="sp_emailText" src="img/emailtext.png" />
<img class="sp_emailField" src="img/sp_emailField.png" />
<form action="" method="POST">
<input type="text" class="emailField" placeholder="" name="email" />
<button type="submit">
<div class="submit" />
</button>
</form>
</body>
.iphone {
top: 50px;
left: 100px;
position: absolute;
}
.sp_title {
top:150px;
right: 350px;
position: absolute;
}
.sp_detail {
top: 250px;
right: 275px;
position: absolute;
}
.sp_emailText {
top:350px;
right:295px;
position: absolute;
}
.sp_emailField {
top:400px;
right:275px;
position:absolute;
background-image: url("../img/sp_emailField.png");
}
.emailField {
top:413px;
right:290px;
width: 355px;
height: 30px;
position: absolute;
border: none;
font-size: 17;
text-align: center;
color: #AE5532;
}
.submit {
bottom: 100px;
right: 400px;
width: 135px;
height: 47px;
position: absolute;
background-image: url("../img/submitBtn.png");
}
.submit:hover {
background-image: url("../img/submitBtnhover.png");
}
.return {
top: 465px;
right: 365px;
position: absolute;
color: white;
font-family: "Helvetica";
}
That button is in your code.
So it really isn’t random at all.
If you don’t want it there, remove it from your code.
EDIT: If you’re talking about the positioning of that element, it’s because you’re changing the position of the
<div>instead of the<button>. If your browser’s debugging tools support it, inspect the<div>and you’ll see it’s positioned correctly. Remember, when you specify an absolute position for an element, you’re removing that element from the document flow, just like with floats. Parent elements will not resize or move to accommodate it for you.