By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,269 Members | 1,506 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,269 IT Pros & Developers. It's quick & easy.

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

P: n/a
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
Jun 27 '08 #1
Share this Question
Share on Google+
1 Reply


P: n/a
SAM
CO*********@lycos.com 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>
<spanPanel 1 </span>
Text 1
</label>
<label for="rad_2">
<input type=radio id="rad_2" name="rad" onclick="sh(this);"><br>
<spanPanel 2 </span>
Text 2
</label>
<label for="rad_3">
<input type=radio id="rad_3" name="rad" onclick="sh(this);"><br>
<spanPanel 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[i].className='';
while(what.tagName != 'LABEL') what = what.parentNode;
what.className = 'ok';
}

--
sm
Jun 27 '08 #2

This discussion thread is closed

Replies have been disabled for this discussion.