Position on input affecting focus

[KeredDrahcir]

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?

<div id="header">
  <img class="banner" src="image path" alt="text" />
  <div class="productsearch">
    <form name="product_seach" action="target" method="post">
      <input type="hidden" value="1" name="name" id="id" />
      <input type="hidden" value="1" name="name" id="id" />
      <input type="text" id="product_search_key" name="product_search_key" value=""/>
      <input type="submit" name="submit_search" id="submit_search" value="Search Now"/>
    </form>
  </div>
  <ul id="mail">
    <li id="email"><a href="/contact-us.html"></a></li>
  </ul>
</div>

#header {
    background-repeat: no-repeat;
    background-position: 0% 0%;
    margin-top: -30px;
    position: relative;
}

.productsearch{
    padding: 0 10px !important;
    margin: 0 !important;
    border: 0 solid #ea068c;
    background-color: transparent;
    font: bold 10pt Arial;
    line-height: 35px !important;
    color: #ffffff;
    width: 300px;
    position: absolute;
    left: 676px;
    top: 39px;
}    
.productsearch input[type=text]{
    margin: 0;
    width: 240px;
    border: 0 solid #d7dee4;
    background-color: #d7dee4;
    height: 35px;
}
.productsearch input[type=submit]{
    width: 35px;
    height: 36px;
    margin: 0;
    background-color: transparent;
    border: 1px solid #ea068c;
    text-indent: -100em;
    overflow: hidden;
}
 

[KeredDrahcir]

Can anyone help me because I can't seem to get JavaScript to work on it either.

[KeredDrahcir]

Forget it. I had the mail list set up wrongly.