Question

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

alt text http://img375.imageshack.us/img375/3824/ffchrome.png

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;
  }

Answer 1

Hey guys, I figured it out thanks to Kroc Camen. In Firefox, I cannot float something to the right unless it is first in order within the wrapping element. (A engine quirk since the 90’s) haha Thanks for the help though!