PDA

View Full Version : Problem displaying nested divs with Firefox



Jay0Jay1
11-07-2008, 06:01 AM
I was trying to use Animated Collapsible DIV v2.01 (http://www.dynamicdrive.com/dynamicindex17/animatedcollapse.htm) with the divs nested within each other to make a sliding menu.

<div ...>

<div ...>


<div ...>
</div>
</div>
</div>
some text


IE works as expected, when a div is expanded it moves all lower divs down including "some text". Firefox though, in the example above displays the most inner div over the top of "some text". See here (http://www.jholcomb.net/test/test.html).

Is there anything that I can do to make Firefox function like IE?

jscheuer1
11-07-2008, 06:46 AM
Your page is invalid, you cannot have two opening <html> tags. If the page is made valid, IE behaves like FF. If however you remove the height specifications and make the page valid, things work out in both (and other) browsers:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ani-Collapse Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
img {
border: none;
}
</style>
<script type="text/javascript" src="jquery-1.2.2.pack.js"></script>
<script type="text/javascript" src="animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV v2.0- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>


<script type="text/javascript">

animatedcollapse.addDiv('jason')
animatedcollapse.addDiv('kelly')
animatedcollapse.addDiv('michael')

animatedcollapse.init()

</script>
</head>
<body>
<div>

<p><b>Example 1 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('jason')"><img src="http://i25.tinypic.com/wa0img.jpg" alt=""></a>

<div id="jason" style="width: 300px; background: #FFFFCC; display:none">
<b>Content inside DIV!</b><br>
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br>
<p><b>Example 2 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('kelly')"><img src="http://i25.tinypic.com/wa0img.jpg" alt=""></a>

<div id="kelly" style="width: 300px; background: #D2FBFF; display:none">
<b>Content inside DIV!</b><br>
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br>

<p><b>Example 3 (individual):</b></p>

<a href="javascript:animatedcollapse.toggle('michael')"><img src="http://i25.tinypic.com/wa0img.jpg" alt=""></a>

<div id="michael" style="width: 300px; background: #E7FFCC; display:none">
<b>Content inside DIV!</b><br>
<b>Note: Fade effect enabled. Height programmically defined. DIV hidden using inline CSS.</b><br>
</div>
</div>
<p><b>Bottom Text</b></p>
</div>

</div>
</body>

</html>

Jay0Jay1
11-07-2008, 07:56 AM
Thanks a ton!

The dual html was just a typo when making the example but removing the height for each div made everything work as you said.

A million thanks.