For some reason my login textbox is not clickable in the main area, only on the bottom-border. I looked at other topics on this issue and people have been advised to check for transparent overlapping elements, I checked and I don't see any - also tried messing with a higher z-index but that also did not work. Would love some input!
.input_large {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
border: 1px solid #929292;
padding:5px;
width:259px;
background-color:#f6f6f6;
}
this is the CSS. The problem is also viewable here: click
Thanks in Advance!
The span#status
is overlapping the input
. If you reduce the height of the span
it allows the input
to be clicked.
#status {
border-radius: 11px;
height: 50px; /*Height reduced*/
left: 0;
margin-top: -100px;
padding-top: 15px;
position: absolute;
text-align: center;
text-transform: uppercase;
top: 50%;
width: 100%;
z-index: 0;
}
You could also not position this element absolutely, which will allow the input
to be clicked. I'm not sure the reasoning behind this element being position:absolute
.