Absolutely Positioned Elements Unclickable?

[John_Caius]

I've got an input box coded in the HTML like this:

<INPUT CLASS="Search" NAME="SearchText" TYPE="text" SIZE="10" />

and in the CSS like this:

input.Search {
}

but I can't click in the box or type in it. I must be doing something really daft here...

[Nick_W]

Lemme guess, this search box is in a absolutely positioned div (or somthing similar) right?

Nick

[John_Caius]

and...

This sounds like bad news. :(

It's in this:

div.Right {
position: absolute;
top: 0px;
right: 0px;
width: 130px;
padding-top: 162px;
background-color: #FFF;
text-align: center;
}

[Nick_W]

I can't remember the exact fix or cause but I'm sure Suzy or DrDoc will ;)

I think making the form position relative will do it...

Nick

[SuzyUK]

John_Caius

Yes, Nick is correct
1. make the form position: relative;
2. then if that doesn't do it on it's own.. assign the form a higher z-index that the "right" div

Suzy

[kzapkzap]

I've got a similar problem except this time my Form isn't absolute positioned. It's relative positioned, and there are absolute positioned divs that come after the form div. The thing is I can't give the main form container a higher z-index because there is abackground which will overlap the other absolute divs.
Isn't there a way to make a div thats relative, go on top of all other divs on the page?

or is there any workaround to this bug in IE, I assume its a bug since mozilla displays it fine.

[SuzyUK]

Hi kzapkzap, Welcome to WW

Isn't there a way to make a div thats relative, go on top of all other divs on the page?

Yep that's what giving it a higher z-index does..;)

btw.. if you haven't explicitly stated that the div/form is position: relative; it will have the default position: static; assigned and you will be unable to assign a z-index..

Suzy

[kzapkzap]

Hmm still not working. I tried putting style="position: relative; z-index: 2;" in my form, my input text tag, even the divs around it. nothing. Anyway here's my div formats and the css, maybe it will help. I'm stumped. Maybe the world can switch to Mozilla?

<div id="maincenter">
<div style="float:left;"><img src="spacer.gif" height="700" width="1" border="0" alt="" /></div>
<div id="main2">
<br />
<div class="main">
<div class="top">text</div>
<div class="maincontent"><form><input type="text" name="blah" /></form>
</div>
</div>
</div>
<div id="footer">footer text</div>
<div id="maincenter2">
<div id="main3">
<br />
<div id="navleft">
<div class="navbox">
<div class="top">text</div>
<div class="content">text</div>
</div>
</div>
<div id="navright">
<div class="navbox">
<div class="top">text</div>
<div class="content">text</div>
</div>
</div>
</div>
</div>
CSS:
#maincenter
{
position: absolute;
top: 200px;
width: 770px;
left: 50%;
margin-left: -385px;
background-color: #f7f7f7;
border-left: 1px solid #044862;
border-right: 1px solid #044862;
}
#maincenter2
{
position: absolute;
top: 200px;
width: 770px;
left: 50%;
margin-left: -385px;
}
.main
{
width: 420px;
min-width: 420px;
margin-bottom: 15px;
font-size: 12px;
background-color: #e0e0e0;
border: 1px solid #006386;
position: relative;
z-index: 1;
left: 50%;
margin-left: -215px;
}
#main2
{
width: 420px;
height: 100%;
margin: 0px auto;
position: relative;
}
#main3
{
width: 770px;
height: 100%;
position: relative;
}
#footer
{
background-color: #E1E1E1;
border-top: 1px solid #c0c0c0;
background-image: url(WSD_35.gif);
text-align:center;
position: relative;
padding:5px;
font-size:10px;
font-weight:bold;
color: #FFFFFF;
height: 16px;
clear: both;
}
#navleft
{
width: 150px;
min-width:150px;
left: 0;
position: relative;
float: left;
margin: 0 1% 0 1%;
}
#navright
{
width: 150px;
min-width:150px;
margin: 0 1% 0 1%;
right: 0;
float: right;
position: relative;
}
.navbox
{
background-color: #e0e0e0;
width: 100%;
margin-bottom: 15px;
border: 1px solid #006386;
}
.content
{
padding:4px;
text-align:left;
}
.top
{
background-image: url(WSD_18.gif);
height: 16px;
color: #FFFFFF;
font-weight: bold;
font-size: 10px;
text-align: center;
text-transform: uppercase;
}

Sorry about the formatting, tried to get the indentations to work, it wouldn't.

[kzapkzap]

ok nm fixed it, not sure how, I found that absolute divs within absolute divs do align. :)