I have a form that is driving me nuts trying to get correct cross-browser, its seems fine across a few Firefox versions, and IE8, it is just with Safari where it is screwing up, and personally i just think my xhtml and css is probably a bit crummy!!

 

I have attached a screen for firefox and one for safari, and the code i am using, any help would be greatly appreciated, as I am really stuck now!

 

 

 

HTML -

 

<div id="loginArea">

           	<a href="" title="Have you forgotten your password?" class="forgotPass">Forgotten password?</a>

               	  <form id="loginForm" action="/" method="post">
                       <fieldset>
                       	<p>
                               <label for="logname">Login</label><br />
                               <input type="text" name="logname" value="" id="logname" />
                           </p>
                          <p>
                           <label for="password">Password</label><br />
                               <input type="text" name="password" value="" id="password" />
                           </p>
                       </fieldset>
                       <p class="login">
           <input type="submit" id="btn" value="" title="Login to the site" />
					</p>
                     </form>

           </div><!--end of loginArea div-->

 

CSS -

 

#loginArea {

position: absolute;
margin: 70px 20px 0 660px;
width: 310px;
height: 66px;
background-image: url(../images/login_area_background.png);
background-repeat: no-repeat;

}

#loginForm fieldset {

padding: 0;
margin-top: 2px;
margin-left: 10px;
border: none;
width: 260px;
height: 30px;

}

#loginForm, #loginForm input, #loginForm label {

font-size: 1em;
color: #fff;

}

#loginForm #logname {

float: left;
margin: 20px 0 0 0;
padding: 0;

}

#loginForm #password {

float: left;
margin: 0;
padding: 0 0 0 47px;

}

#loginForm p { 

margin: 0;
padding-left: 10px;

}

#loginForm p br {

display: none;

}


#loginForm fieldset p input {

padding: 0;
width: 100px;
height: 30px;
margin: 0;
background: none;

}

#loginForm fieldset p input {

border: none;

}

.login #btn {

float: right;
clear: both;
width: 20px;
height: 20px;
margin: -11px 15px 0 0;
background: url(../images/login_button_states.png) no-repeat;
border: none;
cursor: pointer;

}

.login #btn:hover {

background: url(../images/login_button_states.png) 0 -20px no-repeat;

}

 

Many thanks

I haven't got your images so I had to use mine, which probably aren't the same size, but I managed to get the submit button in the same place as Firefox using these styles. The position: relative will be used by Firefox and IE but doesn't seem to affect them. The webkit code will only be used by Safari and Google Chrome:-

 

#loginForm p { position: relative;   /*added to existing style*/                 
margin: 0;
padding-left: 10px;

}
#loginForm #btn, x:-webkit-any-link { left: 240px; top: 0px; position: 
absolute;  }  /*new style*/
/*#loginForm #btn, x:-webkit-any-link, x:default { left: 240px; top: 0px; 
position: absolute;  }*/

 

The second webkit style is one I've seen used but I've disabled it as it doesn't seem to be needed. The position: absolute will take the top and left positions from the top left of the p tag container which has position: relative.