Problem displaying nested divs with Firefox

**Jay0Jay1** · 11-07-2008, 06:01 AM

I was trying to use Animated Collapsible DIV v2.01 with the divs nested within each other to make a sliding menu.

<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.

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:

Code:

<!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.

Thread: Problem displaying nested divs with Firefox

Thread Tools

Search Thread

Problem displaying nested divs with Firefox

million thanks

Bookmarks

Bookmarks

Posting Permissions