Fix Size of Login Box in Drupal Theme

Question

I've asked this question previously here, and thought it was fixed, however, it is only fixed in firefox. In Safari the login box is now very wide, jutting out over the page contents. Here is what it looks like in Safari, and here is what it looks like in Firefox.

I originally went about fixing it by creating a drupal module which changed the input "size" from 15 or to 43. I put my widerlogin.module code up on paste bin here, where a kind person helped me to where I am now. 43 was chosen by adjusting the number with firebug until it looked good, however, in safari there is no firebug, so I don't know what's going on to make it so wide. (it's also messed up on the iphone, presumably because it is safari)

Thanks in advance for your help! Oh, and the site that all this is happening on is innovatefortomorrow.org if you want to look at it for some reason.

Answer 1

A few CSS rules can fix the problem:

/*
 Make the login boxes stretch to the full container
*/
#edit-name {
 width: 100%;
}
#edit-pass {
 width: 100%;
}

/* 
 Add a little padding so the boxes don't stretch too far.
*/
#block-user-0 {
 padding-right: 5px;
}