Hiding Radiobutton and IE6

elwappo · February 21st, 2009, 06:36 PM

Hi all,
I'm using CSS to hide a radiobutton off screen and then using css/ajax to show if it's selected. The following code works fine in IE7, Mozilla browsers and Chrome, but in IE6 the radio button doesn't shift off the the screen (I need it to work in IE6 as some PC's in work still use this version of the browser).

input[type="radio"] { position: absolute; left: -3000px; }

Any help would be gratefully appreciated.....
Regards
E

Old Pedant · February 21st, 2009, 06:39 PM

So why not just use

Code:

... { display: none; }

instead of trying to move the button off page??????

I don't understand the purpose of the "off stage" when display: none is so much "neater".

elwappo · February 21st, 2009, 07:20 PM

Quote:

Originally Posted by Old Pedant

So why not just use

Code:

... { display: none; }

instead of trying to move the button off page??????

I don't understand the purpose of the "off stage" when display: none is so much "neater".

That doesn't work if you want to fire a postback. "display:none;" will not make the radiobutton selectable which I need it to do....

Old Pedant · February 21st, 2009, 11:04 PM

Oh, okay. So make it
... { visibility: hidden; }

It's still selectable, then.

Problem is that it uses up screen real estate, but perhaps you could also style it to be very tiny?

elwappo · February 22nd, 2009, 08:31 AM

Quote:

Originally Posted by Old Pedant

Oh, okay. So make it
... { visibility: hidden; }

It's still selectable, then.

Problem is that it uses up screen real estate, but perhaps you could also style it to be very tiny?

Unfortunately that doesn't work either sorry. The visibility:hidden; property doesn't fire a postback when you click the radiobutton label. That's why I've been using position: absolute; left: -3000px; This is obviously an IE6 issue with the latest version of the CSS. There must be a hack for this surely though...?

Old Pedant · February 23rd, 2009, 03:35 AM

AHHHH!!!!

The light dawneth!

You never said you were using a LABEL to activate it!

Okay...I give up. Lots of tricks as yet untried (e.g., give it a color and background color same as the overall background?? no...the dot in the middle would still appear, no doubt...ugh), but...

You could always "punt" and create your own pseudo-radio button just using a HIDDEN form field and reacting to ONCLICK events on <SPAN>s or <DIV>s, I suppose. Not terribly complex but granted a real pain in the patootie.

elwappo · February 23rd, 2009, 04:42 AM

Quote:

Originally Posted by Old Pedant

AHHHH!!!!

The light dawneth!

You never said you were using a LABEL to activate it!

Okay...I give up. Lots of tricks as yet untried (e.g., give it a color and background color same as the overall background?? no...the dot in the middle would still appear, no doubt...ugh), but...

You could always "punt" and create your own pseudo-radio button just using a HIDDEN form field and reacting to ONCLICK events on <SPAN>s or <DIV>s, I suppose. Not terribly complex but granted a real pain in the patootie.

Ah sorry over the confusion. Yes, it's been bugging me for a while now - I thought it would be a simple fix with a css hack. If I do come across a solution, I'll be sure to post it. Thanks for your help though,
Regards
E

elwappo · February 25th, 2009, 08:46 AM

Quote:

Originally Posted by Old Pedant

AHHHH!!!!

The light dawneth!

You never said you were using a LABEL to activate it!

Okay...I give up. Lots of tricks as yet untried (e.g., give it a color and background color same as the overall background?? no...the dot in the middle would still appear, no doubt...ugh), but...

You could always "punt" and create your own pseudo-radio button just using a HIDDEN form field and reacting to ONCLICK events on <SPAN>s or <DIV>s, I suppose. Not terribly complex but granted a real pain in the patootie.

Found a solution to my IE6 problem. Quite obvious when I thought about it. I just added an older CSS definition as well as the newer CSS3 input[type='radio']:

My radiobuttons are wrapped in a div, so just applied an ID to it (e.g. <div id="mydiv_id">) and then did the follow in the CSS:

#mydiv_id input {
position: absolute; left:-1000px;
}

Obviously works fine as I've no other input controls inside that div.