Form won't display correctly in firefox.

[LukeV]

First time I'm having such a problem with firefox. I've been playing with it for a while and I can't get it to show properly. This is how it looks in safari and ::And this is how it looks in firefox: Html:

  <div id="login">  <form id="loginf" action="#" method="post">    <label>Username:</label> <input type="text" name="username" value=""/> <br />    <label>Password:</label> <input type="password" name="password" value=""/> <br />    <input class="submit" type="submit" value="Login" name="login"/><br />  </form>  </div>

CSS:

  #login {  background: url(images/login.png) no-repeat;  width: 265px;  height: 221px;  position: relative;  bottom: 35px;  float: right;  margin-right: 30px;  }    #loginf { padding: 80px 0px 0px 30px; }    #loginf label {    float: left;  text-align: left;  margin-bottom: 10px;   display: block;   width: 65px;   font-size: 11px;   font-family: verdana, sans-serif;  }    #loginf input {  display: block;    width: 130px;   background-color: #f3f3f3;   border: 1px solid #bdc2c4;  padding-left: 2px;   }

Any ideas? :)Oh and if I don't float the labels left I get this in firefox:

[jeffman]

I'm sure there's a way to do it with all this floating and relative positioning, but I just don't trust it. Have you considered absolute positioning? Just one man's opinion.

[jeffman]

Or maybe you want to put each label and its corresponding input into a unique div. Otherwise you've got these four different block units hanging out independently and stepping on each other.

[LukeV]

Hey Deirdre's Dad I put each label and it's corresponding input in a div and with a few adjustments it is working perfectly. I'm guess putting them in divs was not the most efficient solution but it sure beats floating and positioning.Thanks!EDIT: btw you wouldnt know how to fix that login button would you. The text is displaying a few pixels too low in firefox.

[jeffman]

The text is displaying a few pixels too low in firefox.

Padding, maybe?

[LukeV]

Padding, maybe?

Thanks

[webflex]

Hi,Try this CSS:

#loginf label {float: left;margin-top: 5px;width: 65px;font-size: 11px;font-family: verdana, sans-serif;}#loginf input {width: 130px;background-color: #f3f3f3;border: 1px solid #bdc2c4;padding-left: 2px;margin-top: 5px;float: right;}

Complements \o/