PDA

View Full Version : Animated Collapsible DIV ie6 problem



tommyguntom
05-13-2008, 01:04 PM
1) Script Title: Animated Collapsible DIV

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm

3) Describe problem:

http://www.interactive.ac.nz/2008/thomas/lswebb/
when i view in IE6 it shows any underlined link in its colapsed postion and doesnt move them. also when you put the mouse on the link it hides the underlined link.

also i have the enquire links as well, with pictures, which work but on the parts with the pacific institute it has the dots stuck there. and hovering on the picture hides the dots.

I dont know whats going on prolly just made a error or something but i cant seem to find it. although it works fine in ff

ddadmin
05-13-2008, 10:26 PM
Actually, I can't even test the links in FF, as the links in question are blank actually:


<a id="artwo" href="javascript:collapse2.slideit(2)" onclick="javascript:collapse3.slideup(1)" >


</a>

Please put up a working example of the script.

tommyguntom
05-14-2008, 07:44 AM
sorry, I changed that while trying get it to show the css background image instead of the link and be clickable....

it has a link there no , its in the events tab

tommyguntom
05-14-2008, 07:56 AM
<a id="artwo" href="javascript:collapse2.slideit(2)" onclick="javascript:collapse3.slideup(1)" >...
</a>

<a id="arone" href="javascript:collapse3.slideit(1)" onclick="javascript:collapse2.slideup(1)" > ... </a>


<div id="services">
<div id="dog">
<!--Your DIV content as follows. Note to add CSS padding or margins, do it inside a DIV within the Collapsible DIV -->
<p>
<a class="enq" href="#" onclick="">
<img src="images/linkimg/enquire.gif" alt="enquire"/>
</a>
</p>
<img src="images/lsimg/Breakthrough%202-day.jpg" alt="Jumping" style="float:right;" />
<p>
<a class="enq" href="#" onclick="">
<img src="images/linkimg/enquire.gif" alt="enquire" />
</a>
or visit
<!--here--->
<a class="enq" href="http://www.pacificinstitute.co.nz" onclick="">
pacific institute
</a>
</p>
</div>
<script type="text/javascript">
//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse3=new animatedcollapse("dog", 800, true)
</script>
</div>




<div id="cat">

ggggggggg
</div>

<script type="text/javascript">

//Syntax: var uniquevar=new animatedcollapse("DIV_id", animatetime_milisec, enablepersist(true/fase), [initialstate] )
var collapse2=new animatedcollapse("cat", 800, true)

</script>


</div>

jscheuer1
05-14-2008, 08:14 AM
Well, it's picking up this style:


a:hover, a:active {
color: #005367;
text-decoration: none;
}

from stylesheet1.css and probably something else that gives it position and/or a high z-index. Styles cascade a little differently in IE 6. Usually, in most browsers just giving something a class wipes the slate clean of several (not all) other styles that might have otherwise affected an element. But in IE 6 everything that possibly could cascades unless specifically contradicted in the definitions for that class.

tommyguntom
05-14-2008, 08:14 AM
so i striped everything down
and it works properly.. hmmmm

tommyguntom
05-14-2008, 08:29 AM
yay found what was wrong.
realised it was something in the CSS so i divided and conquered to find what was the culprit and is was this piece of #$@! line of code
* html a {
position: relative;
}

tommyguntom
05-14-2008, 08:38 AM
ok not quite, it was working on a test version with only the events tab. but stil does the same thing on the real one even with no css at all it still does it

tommyguntom
05-14-2008, 09:27 AM
oooooooook so its


* html a {
position: relative;
}
aaswell asss this piece of FRIKEN !@#$@#


<!--[if lte IE 6]>
<script type="text/javascript" src="java/supersleight-min.js"></script>
<![endif]-->

if theres anything else im gona go nuts. and havnt even looked at that script to see how its making it not work.

tommyguntom
05-14-2008, 09:58 AM
k hopefully solved.

in supersleight.js i removed


if(applyPositioning&&(obj.tagName=='A'||obj.tagName=='INPUT')&&obj.style.position===''){
obj.style.position='relative';

}

have no idea what that does but everything seems to be working fine