Cannot select form elements

EXECUTiVE

Hi, I'm having a problem selecting form elements (link) and I'm pretty sure it is CSS related. Any way I can force the form elements (when you click Login / Register on the top green bar) to be selectable?

Thanks!

Roger_Ramjet

So, can you 'select' them if you take out the css that hides them?

bpat1434

No, I think it's because you have layers over layers. Your showRegister div is overlapping your showLogin div. That's why you can't select the form.

[ EDIT ]
Actually, I know I'm right 🙂 Using firefox and Firebug you can change the CSS on the fly. If you shave the width of showRegister down to about 140px and then add "right: 163px;" to the showRegister declaration, you can then selec the login form 😉

div.showRegister {
color:#FFFFFF;
display:block;
font-weight:bold;
height:24px;
margin:auto;
position:absolute;
text-align:right;
top:44px;
width:140px;
right:163px;
}

Typically when using absolute positioning, it's best to declare a top and left (or right) coordinate. I'd also change showLogin to this:

div.showLogin {
color:#FFFFFF;
font-weight:bold;
height:20px;
margin:auto;
padding-left:24px;
position:absolute;
text-align:left;
top:44px;
width:400px;
left:140px;
}

EXECUTiVE

Thanks!

They select perfectly now... I wasn't using left and right because the design is not fixed-width... try expanding the window now and the elements stray too far left and right.

EXECUTiVE

I think I am just going to eliminate showRegister.

Thanks for the help!

bpat1434

But then how will they ever register?

One thing you could do is just add the link after the form but before you close out showLogin.

JPnyc

Dynamic width sites + absolute positioning = disaster. A good rule to remember.

bpat1434

That's not true.... it just makes it harder....

Ichiro

bpat1434 wrote:
That's not true.... it just makes it harder....

If it was easy, everyone would be doing it! 😉