Jump to content

Form won't display correctly in firefox.


Recommended Posts

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 ::sfar-1.jpgAnd this is how it looks in firefox: ffox.jpgHtml:

  <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:nofloat.jpg

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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/

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...