Form fields hidden under images

dangergeek · #1 Sep 3rd, 2007, 11:40

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 · #2 Sep 3rd, 2007, 11:52

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 · #3 Sep 3rd, 2007, 12:49

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 · #4 Sep 3rd, 2007, 12:50

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

.search

see if that helps.

dangergeek · #5 Sep 3rd, 2007, 13:02

hmmm

still no joy

dangergeek · #6 Sep 3rd, 2007, 13:23

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;
}

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Hiding / Showing form fields based on previous form input	John Alexander Hopper	PHP Forum	1	Mar 10th, 2008 11:30
HTML form fields	jasonjkd	Web Page Design	2	Oct 15th, 2007 21:58
Form Fields	robukni	PHP Forum	7	Oct 10th, 2007 20:26
Form fields Edit Mask	StanLevin	JavaScript Forum	0	Aug 20th, 2007 21:33
Hidden Fields	tomd1985	Web Page Design	2	Feb 7th, 2006 20:07

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Form fields hidden under images