Skip to main content
added 413 characters in body
Source Link
isherwood
  • 61.4k
  • 16
  • 122
  • 173

Your images are positioned relative to the form or the wrapper div. They should be positioned relative to the inputs, or to divs wrapping the inputs, like:

<form name="" action="" method="">  <div style="position: relative; overflow: auto; display: inline-block;">  <img title="Forgotten Your Username?" onClick="open_win()" src="http://www.razorrobotics.com/images/question-mark.gif" class="forgotten_1">   <input type="text" value="E-Mail Address" onBlur="if(this.value=='') this.value='E-Mail Address';" onFocus="if(this.value=='E-Mail Address') this.value='';" id="login">  </div> <div style="position: relative; overflow: auto; display: inline-block;">  <img title="Forgotten Your Password?" onClick="open_win()" src="http://www.razorrobotics.com/images/question-mark.gif" class="forgotten_2">   <input type="password" value="Password" onBlur="if(this.value=='') this.value='Password';" onFocus="if(this.value=='Password') this.value='';" id="login">  </div>  <input type="submit" style="margin-left:-35px;" class="general_button" value="Log In" name="submit"> </form> 
  

IF you do that, then put this on your Log In button...

display: inline-block; margin-left: 0; vertical-align: top; 

things are looking pretty good.

Another note... be sure to not open new windows for your question mark button links. You generally don't want to break normal browser functionality and flow like that. Also, consider using jQuery's Placeholder plugin for simplicity instead of your inline JS.

Your images are positioned relative to the form or the wrapper div. They should be positioned relative to the inputs, or to divs wrapping the inputs, like:

<form name="" action="" method="">  <div style="position: relative; overflow: auto; display: inline-block;"> <img title="Forgotten Your Username?" onClick="open_win()" src="http://www.razorrobotics.com/images/question-mark.gif" class="forgotten_1">   <input type="text" value="E-Mail Address" onBlur="if(this.value=='') this.value='E-Mail Address';" onFocus="if(this.value=='E-Mail Address') this.value='';" id="login">  </div> <div style="position: relative; overflow: auto; display: inline-block;"> <img title="Forgotten Your Password?" onClick="open_win()" src="http://www.razorrobotics.com/images/question-mark.gif" class="forgotten_2">   <input type="password" value="Password" onBlur="if(this.value=='') this.value='Password';" onFocus="if(this.value=='Password') this.value='';" id="login">  </div>  <input type="submit" style="margin-left:-35px;" class="general_button" value="Log In" name="submit"> </form> 
 

IF you do that, then put this on your Log In button...

display: inline-block; margin-left: 0; vertical-align: top; 

things are looking pretty good.

Your images are positioned relative to the form or the wrapper div. They should be positioned relative to the inputs, or to divs wrapping the inputs, like:

<form name="" action="" method=""> <div style="position: relative; overflow: auto; display: inline-block;">  <img title="Forgotten Your Username?" onClick="open_win()" src="http://www.razorrobotics.com/images/question-mark.gif" class="forgotten_1"> <input type="text" value="E-Mail Address" onBlur="if(this.value=='') this.value='E-Mail Address';" onFocus="if(this.value=='E-Mail Address') this.value='';" id="login"> <div style="position: relative; overflow: auto; display: inline-block;">  <img title="Forgotten Your Password?" onClick="open_win()" src="http://www.razorrobotics.com/images/question-mark.gif" class="forgotten_2"> <input type="password" value="Password" onBlur="if(this.value=='') this.value='Password';" onFocus="if(this.value=='Password') this.value='';" id="login"> </div> <input type="submit" style="margin-left:-35px;" class="general_button" value="Log In" name="submit"> 
 

IF you do that, then put this on your Log In button...

display: inline-block; margin-left: 0; vertical-align: top; 

things are looking pretty good.

Another note... be sure to not open new windows for your question mark button links. You generally don't want to break normal browser functionality and flow like that. Also, consider using jQuery's Placeholder plugin for simplicity instead of your inline JS.

Source Link
isherwood
  • 61.4k
  • 16
  • 122
  • 173

Your images are positioned relative to the form or the wrapper div. They should be positioned relative to the inputs, or to divs wrapping the inputs, like:

<form name="" action="" method=""> <div style="position: relative; overflow: auto; display: inline-block;"> <img title="Forgotten Your Username?" onClick="open_win()" src="http://www.razorrobotics.com/images/question-mark.gif" class="forgotten_1"> <input type="text" value="E-Mail Address" onBlur="if(this.value=='') this.value='E-Mail Address';" onFocus="if(this.value=='E-Mail Address') this.value='';" id="login"> </div> <div style="position: relative; overflow: auto; display: inline-block;"> <img title="Forgotten Your Password?" onClick="open_win()" src="http://www.razorrobotics.com/images/question-mark.gif" class="forgotten_2"> <input type="password" value="Password" onBlur="if(this.value=='') this.value='Password';" onFocus="if(this.value=='Password') this.value='';" id="login"> </div> <input type="submit" style="margin-left:-35px;" class="general_button" value="Log In" name="submit"> </form> 

IF you do that, then put this on your Log In button...

display: inline-block; margin-left: 0; vertical-align: top; 

things are looking pretty good.