Help with 'simple' validation styling

[lprintz]

Hello all!

I know this SHOULD be a simple thing but I am beating my head against a wall!

Please go to this form, enter a bogus zip for the location (ex 8 digits) and submit – http://www.americasjobexchange.com/entry-level/job_exchange

You can see that the validation label pushes everything around. I simply want to style this as a bubble floating above the respective field! I messed around with z-indexes but nothing seems to be working.

Can anyone help? If I can simply position it properly and float it on top of the text box I should be able to take it from there and style it.

FYI, I will not be able to change the validation function but I assume what I’m trying to do can be accomplished with CSS

Thanks SO much!

[Shikkediel]

Do you mean this message?

Keyword required if no location entered

Any top positioning I see you’ve added won’t have effect because it’s gets overridden by the !important with the styling of .exchangeSearch label.error inside main.css.

[lprintz]

Thanks Shikkediel!

I’ve never used this before and can definitely play with it. Does this method have decent browser support?

Also, this is still bumping the submit button down. I’d really like this label to float above everything and NOT affect any positioning on the elements beneath.

[Shikkediel]

I think you must be referring to using translate instead of top positioning. I edited that out because I wasn’t sure it was all that relevant. But it does indeed have good browser support, IE9+ and old Android in any case.

I’m not seeing the bumping of the submit button, any particular screen size or browser you’re using?

[Author]

Posts