Question

I’ve already had some excellent help on this site, so Stack Overflow is of course my first port of call whenever I have an issue!

I downloaded a responsive website template and have made LOADS of changes. I’m pretty much complete; however, I have one issue remaining.

I have created a login form at the top of my site, and with the help of another SO user, I created clickable relative images. The issue is when the screen that the site is displayed on becomes smaller than a 479px the relative images don’t seem to be where they should.

I have uploaded the website HERE and would appreciate any help in resolving the issue.

Answer 1

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.