I am trying to float a <button> to the right. the <button> is outside of <form> but is on the same line. For some reason this is not working in FF. I made my form background red and found out that the <button> is still in the <form> in FF even though its not! Every other browser works fine, the <button> is not in the <form>.
Screenshot:(left is chrome...the one with http:// and the right is Firefox
HTML:
<form>
<input type="url" placeholder="http://" />
<input type="submit" value="Crypt" />
</form>
<button type="button"> ? </button>
CSS: (Took out the unnecessary code)
section.crypter {
padding: 25px;
}
section.crypter form {
display: block;
float: left;
background: red;
}
/* Input */
section.crypter input[type="url"] {
border:1px solid #666;
color: #939393;
font: italic bold 1.7em Verdana, Arial, Serif;
outline: 0;
padding: 10px 10px;
width: 240px;
}
section.crypter input[type="submit"] {
border:1px solid #666;
color: #000;
font: 2em Verdana, Arial, Serif;
margin:0 0 0 -10px;
padding: 8px 20px;
}
section.crypter input[type="submit"]::-moz-focus-inner {
border: 0;/* Firefox hack */
}
section.crypter button {
display: block;
float: right;
padding: 10px 25px;
}