Ugly css input issue

Question

If you go here, let the input fields empty and press Submit, you will notice that Name input is over the "The field is required" popup.

I have tried to apply z-index and other css strange "solutions" but I am simply unable to fix that...

Can you please suggest something?

Scott · Accepted Answer · 2012-02-13 19:39:05Z

1

Try changing....

formError {
position: absolute;
top: 300px;
left: 300px;
display: block;
z-index: 5000;
cursor: pointer;
}

to:

formError {
position: absolute;
top: 300px;
left: 300px;
display: block;
z-index: 9999;
cursor: pointer;
}

in the validationEngine.jquery.css file

EDIT: Also you might want to change

#contentContainer .content{ position:absolute; left:0px; top:0px; width:680px; z-index:999999; margin-bottom:20px;}

To a z-index that's more reasonable.

answered Feb 13, 2012 at 19:39

Scott

21.9k8 gold badges45 silver badges57 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

See edit above. You've got the content set to be above anything else.

Thanks, here was the key indeed!

ACarter · Accepted Answer · 2012-02-13 19:43:26Z

0

.emailformError {
z-index: 999999;
}

Will do it :)

(All I have done is brought the bubble higher in the z-index (brought it above the other layers).)

answered Feb 13, 2012 at 19:43

ACarter

5,7479 gold badges42 silver badges60 bronze badges