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?
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?
Code:
<div id="header">
<img class="banner" src="[I]image path[/I]" alt="[I]text[/I]" />
<div class="productsearch">
<form name="product_seach" action="[I]target[/I]" method="post">
<input type="hidden" value="1" name="[I]name[/I]" id="[I]id[/I]" />
<input type="hidden" value="1" name="[I]name[/I]" id="[I]id[/I]" />
<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>
Code:
#header {
background-repeat: no-repeat;
background-position: 0% 0%;
margin-top: -30px;
position: relative;
}
Code:
.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;
}
Comment