By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,968 Members | 1,681 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,968 IT Pros & Developers. It's quick & easy.

Position on input affecting focus

KeredDrahcir
100+
P: 426
Can anyone help me. I have a wierd problem. I have a Search box which I need to sit on the banner. I have set the header's position to relative and then used absolute positioning to place the container box the search text input box and submit button.

When I have them positioned in place you have the click at the very top of the text box or the search button to get focus or to submit it. If I move the box up 20 pixels then the focus can goes to about where you had to click before. I means that although you can focus on it you still can't click on the whole box and I need it to be in a certian positiong and so 20 pixels doesn't work.

I'm guessing I can use JavaScript to use an onclick focus but I'd rather avoid that if I can. Could anybody have a look my code and see they have say where I'm going wrong please?

Expand|Select|Wrap|Line Numbers
  1. <div id="header">
  2.   <img class="banner" src="image path" alt="text" />
  3.   <div class="productsearch">
  4.     <form name="product_seach" action="target" method="post">
  5.       <input type="hidden" value="1" name="name" id="id" />
  6.       <input type="hidden" value="1" name="name" id="id" />
  7.       <input type="text" id="product_search_key" name="product_search_key" value=""/>
  8.       <input type="submit" name="submit_search" id="submit_search" value="Search Now"/>
  9.     </form>
  10.   </div>
  11.   <ul id="mail">
  12.     <li id="email"><a href="/contact-us.html"></a></li>
  13.   </ul>
  14. </div>
Expand|Select|Wrap|Line Numbers
  1. #header {
  2.     background-repeat: no-repeat;
  3.     background-position: 0% 0%;
  4.     margin-top: -30px;
  5.     position: relative;
  6. }
Expand|Select|Wrap|Line Numbers
  1. .productsearch{
  2.     padding: 0 10px !important;
  3.     margin: 0 !important;
  4.     border: 0 solid #ea068c;
  5.     background-color: transparent;
  6.     font: bold 10pt Arial;
  7.     line-height: 35px !important;
  8.     color: #ffffff;
  9.     width: 300px;
  10.     position: absolute;
  11.     left: 676px;
  12.     top: 39px;
  13. }    
  14. .productsearch input[type=text]{
  15.     margin: 0;
  16.     width: 240px;
  17.     border: 0 solid #d7dee4;
  18.     background-color: #d7dee4;
  19.     height: 35px;
  20. }
  21. .productsearch input[type=submit]{
  22.     width: 35px;
  23.     height: 36px;
  24.     margin: 0;
  25.     background-color: transparent;
  26.     border: 1px solid #ea068c;
  27.     text-indent: -100em;
  28.     overflow: hidden;
  29. }
  30.  
Nov 2 '12 #1
Share this Question
Share on Google+
2 Replies


KeredDrahcir
100+
P: 426
Can anyone help me because I can't seem to get JavaScript to work on it either.
Nov 2 '12 #2

KeredDrahcir
100+
P: 426
Forget it. I had the mail list set up wrongly.
Nov 2 '12 #3

Post your reply

Sign in to post your reply or Sign up for a free account.