-1

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.

Improve this question
1
  • Please put the information needed to reproduce your problem into the question itself. By putting it in an external link, the problem could become moot if that site ever changes, rendering your question unusable for future visitors. Commented Jan 10, 2013 at 15:09

3 Answers 3

Reset to default
0

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Thank you. This appears to be working best! I use Google Chrome as my default broswer and everything looks perfect. I then opened the site in IE, Opera, FireFox, Safari - all of them show scroll bars where the ? image is. Any idea?
I develop in Firefox and didn't see scrollbars, but maybe try overflow: hidden instead, or look for where you're overflowing and fix it.
0

I will try to explain why this is happening rather than just giving you the done code.

So, when you use position:relative; you position the element relatively to its parent. On the .forgotten_2 image, you used right: 226px; and that way positioned it 226px from the right edge of its parent (the ).
Now, that positioning isn't good when the form breaks into two lines.

What you should use instead:

  • Putting the icons as background-image in the input fields (if it doesn't have to link somewhere)
  • Changing HTML to wrap divs around inputs and its icon, then relatively positioning to that

As I see you need the links to point to "forgot ... ", so you should probably go with the second solution. This is how your HTML should look like:

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

Now you would add some CSS for input-box.

Have in mind that the block_login (parent of form) has float:right; that might interfere with your styling ;)

Improve this answer

Comments

0

Right of the bat, should not be referring to multiple elements the same ID. Both of your fields have a ID of #login. You should most likely change that to a class of .login.

For me, the ? image in the first field lands in a different position than in the second field.

Since you are not changing the size of the fields as the viewport changes, I would suggest you move to a div (with position:relative set) to contain each of the fields. Make the input width and height 100% and then position the image absolutely using top and right to land it on the end of the input.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.