IE7 works worse than IE6 on web pages - Can javascript save thesituation?

[COHENMARVIN]

I have a asp.net page that does something simple - when the user
clicks on a radiobutton, a panel becomes visible beneath the radio
button. There is some text below the radio button, and that is
displaced downward when the panel appears. This is what I intended.
However, this only works in IE6. I find that in IE7, the panel
appears, but it appears right on top of the text that should be
displaced to a lower position on the page.
So the panel is a transparent overlay over the text, instead of
appearing by itself, with the text lower down on the page.
I should have:
radiobutton
PANEL
Text
But instead I get:
radiobutton
PANEL over text
Is there something done differently about IE7 that would explain
this? And if so, is there a javascript solution?
Thanks,
Marv

 

[SAM]

(e-mail address removed) a écrit :

I have a asp.net page that does something simple - when the user
clicks on a radiobutton, a panel becomes visible beneath the radio
button. There is some text below the radio button, and that is
displaced downward when the panel appears. This is what I intended.
However, this only works in IE6. I find that in IE7, the panel
appears, but it appears right on top of the text that should be
displaced to a lower position on the page.
So the panel is a transparent overlay over the text, instead of
appearing by itself, with the text lower down on the page.
I should have:
radiobutton
PANEL
Text
But instead I get:
radiobutton
PANEL over text
Is there something done differently about IE7 that would explain
this? And if so, is there a javascript solution?

Isn't it a CSS question ?

are your elements floating ? absolute/relative positionned ?

elements change with display ou visibility ?

How does react Firefox ?

Without at least a bit of *HTML* code (seen by browser not this in asp)
and the relative CSS and JS code to show/hide elements ...
not easy to help.

HTML :
======

<fieldset><legend>panels</legend>
<label for="rad_1">
<input type=radio id="rad_1" name="rad" onclick="sh(this);"><br>
<span> Panel 1 </span>
Text 1
</label>
<label for="rad_2">
<input type=radio id="rad_2" name="rad" onclick="sh(this);"><br>
<span> Panel 2 </span>
Text 2
</label>
<label for="rad_3">
<input type=radio id="rad_3" name="rad" onclick="sh(this);"><br>
<span> Panel 3 </span>
Text 3
</label>
</fieldset>

CSS :
=====
label { float: left; width: 4em; text-align: center; }
label span { display: none; white-space: pre; color: blue}
label.ok span { display: block; }

JS :
====
function sh(what) {
var coll = what.parentNode;
while(coll.tagName != 'FIELDSET') coll = coll.parentNode;
coll = coll.getElementsByTagName('LABEL');
for(var i=0, L=coll.length; i<L; i++) coll.className='';
while(what.tagName != 'LABEL') what = what.parentNode;
what.className = 'ok';
}