Form fields hidden under images

[dangergeek]

Hi

Re-designing a site at the moment. I have added a form to the header.
Problem is I can see the form in IE but in Firefox the form is hidden under the header image.

http://www.cmldistribution.co.uk/header.php

I thought z-index would do the job but it dont make a bit of difference. Can anyone help?


Thanks in advance.

[Lchad]

The div named search has a top margin of -58px.

Code: Select all

#search {
width:280px; float:right; margin: 10px auto 0px auto;
}

It's causing the search field to be above the design so we can't see it.
Can you just use something like 10px?

Code: Select all

<div id="header"><a href="http://www.cmldistribution.co.uk"><img src="image/cml_logo.jpg" /></a><img src="image/cml_header.jpg" />
<div id="search"><form action="quicksearch.php" method="post" target="_self"><input name="q_search" size="30" type="text" /><input name="Search" type="submit" value="Search" />
</form></div>
</div>

Code: Select all

#search {
width:280px; float:right; margin: 10px auto 0px auto;
}

[dangergeek]

Thanks for the quick response Lchad,

Not sure I explained myself too well. The -58 is meant to be correct as I actually want the form to appear within the header image. (If you can view it in IE, it is exactly where i want it to be)

In Firefox it appears to under the image itself. You can actually click in the header and type even though you cant see the form field or the submit button???

It's got me stumped!

[Lchad]

Try making the #search into a class...
<div class="search"></div>

.search

see if that helps.

[dangergeek]

hmmm

still no joy

[dangergeek]

Messing around a bit seems to have solved the problem.

I tried a position:absolute but amazingly it reversed the problem so i could see the form in FF but not IE. Position:realative seems to have fixed it though.

Code: Select all

.search {
width:280px; margin: -54px 26px 0px 20px; position:relative; float:right;
}