No events with "background-color:transparent" style

[bulwark_jrm]

I'm trying to duplicate functionality found in a Windows application
at one of my clients. Essentially, another programmer was able to
arrange a lot of search options into a single dialog box by positioning
the descriptive label behind the textbox instead of beside it. When
the user enters text, the label disappears and the user types in their
information into the textbox.

I've figured out how to arrange a label behind the textbox (yes, the
label format has to be altered to differentiate), but events are not
being captured. I can't type into the textbox, and it doesn't even
recognize click events. I've narrowed this problem down to the
"background-color:transparent" since changing 'transparent' to
'white' captures the events.

Here's my code.
---------------------------
<label style="position:absolute;left=100;top:100;z-index:1;">Test
label</label>
<input type="text"
style="position:absolute;left:100;top:100;z-index:2;background-color:transparent;"
/>
--------------------------

If anybody could enlighten me as to what the problem might be, it would
be greatly appreciated.

Regards,
John

 

[Nikita the Spider]

I'm trying to duplicate functionality found in a Windows application
at one of my clients. Essentially, another programmer was able to
arrange a lot of search options into a single dialog box by positioning
the descriptive label behind the textbox instead of beside it. When
the user enters text, the label disappears and the user types in their
information into the textbox.

I've figured out how to arrange a label behind the textbox (yes, the
label format has to be altered to differentiate), but events are not
being captured. I can't type into the textbox, and it doesn't even
recognize click events. I've narrowed this problem down to the
"background-color:transparent" since changing 'transparent' to
'white' captures the events.

Here's my code.
---------------------------
<label style="position:absolute;left=100;top:100;z-index:1;">Test
label</label>
<input type="text"
style="position:absolute;left:100;top:100;z-index:2;background-color:transpare
nt;"
/>

Hi John,
I don't mean to be snide or grouchy, but it'd help if you (a) post a URL
to an example that demonstrates the problem and (b) tell us what browser
you're using. I don't have time to code up a form around your snippet of
HTML above, sorry.

 

[Neredbojias]

To further the education of mankind, (e-mail address removed) vouchsafed:

I'm trying to duplicate functionality found in a Windows application
at one of my clients. Essentially, another programmer was able to
arrange a lot of search options into a single dialog box by
positioning the descriptive label behind the textbox instead of beside
it. When the user enters text, the label disappears and the user
types in their information into the textbox.

I've figured out how to arrange a label behind the textbox (yes, the
label format has to be altered to differentiate), but events are not
being captured. I can't type into the textbox, and it doesn't even
recognize click events. I've narrowed this problem down to the
"background-color:transparent" since changing 'transparent' to
'white' captures the events.

Here's my code.
---------------------------
<label style="position:absolute;left=100;top:100;z-index:1;">Test
label</label>
<input type="text"
style="position:absolute;left:100;top:100;z-index:2;background-color:tr
ansparent;" />
--------------------------

It's possible that 'transparent' is becoming invalid per the j/s.

 

[David Dorward]

(Follow-ups set)

<label style="position:absolute;left=100;top:100;z-index:1;">Test

You have three syntax errors in that line alone.
http://jigsaw.w3.org/css-validator/
http://diveintomark.org/archives/2003/05/05/why_we_wont_help_you

Essentially, another programmer was able to arrange a lot of search
options into a single dialog box by positioning the descriptive label
behind the textbox instead of beside it.

The usual (and horribly hackish) way to achieve that is to use the value of
the field to act as the label and fiddle with it using JavaScript when the
user enters or deletes things from the field.