IE and Animated Collapsible DIV

**leatherlips** · 07-08-2007, 01:22 AM

1) Script Title: Animated Collapsible DIV

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

3) Describe problem: I think I am following the instructions to the letter, but I keep having a problem with IE7. In Safari and Firefox it works as it should. However in IE7 the collapsible DIV remains open. When I try to close it, it almost closes but then immediately opens again. Ideas to what I may be doing incorrectly? Thanks for any assistance!

This looks like a great script so I really would like to get it to work properly.

**jscheuer1** · 07-08-2007, 02:58 AM

It in IE 7 this script may require at least a transitional DOCTYPE:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
 . . .

There may be a conflict(s) with other script(s) on your page. These are only guesses. To get a better idea, we would need a link to your problem page.

One other thing to consider at this point -

Does the demo page (the one on Dynamic Drive) of this script work in IE 7 for you? If not, it may be something to do with your IE 7 or your OS.

**leatherlips** · 07-08-2007, 05:07 PM

The script on the Dynamic Website works just fine in my IE7. I'll repost the script to my page and post its URL here. If you can help me find the issue I'd be very grateful!

**leatherlips** · 07-08-2007, 05:29 PM

Here is a link to my test page in question:

http://www.mangionemagic.com/fansubmitted_copy.htm

Click on the first small banner. For me it works in Safari and Firefox, but not in IE7. Any glaring mistakes I have made?

**jscheuer1** · 07-08-2007, 06:24 PM

You cannot have this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

in the midst of the head of the document. It belongs at the top, in place of your current opening <html> tag. So, things would then look like this:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<title>Fan Submitted</title>
<meta name="description" content="This site features the music of jazz flugelhorn legend Chuck Mangione.  Included is Chuck Mangione's biography, discography and a forum dedicated to this great musician.">
<meta name="keywords" content="chuck mangione, mangione, chuck mangione biography, chuck mangione discography, chuck mangione forum, flugelhorn, mangione magic, jazz">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<link rel="stylesheet" type="text/css" href="style.css">

<script type="text/javascript" src="animatedcollapse.js">

/***********************************************
* Animated Collapsible DIV- © 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>
</head>

<body>
<div align="cen . . .

There probably are other technical errors in the sequence of tags in the head, but that should fix it for IE 7 and not harm others. You could use a transitional HTML 4.01 DOCTYPE and a plain opening <html> tag (as shown in my previous post) instead. Also, any valid DOCTYPE/opening <html> tag combo that is as strict as the one I just mentioned or stricter, may be used.

This is what should (unless there are critical contraindications) generally be used:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

**leatherlips** · 07-08-2007, 07:21 PM

Thanks. That did the trick. However, now the script is causing a few page layout issues... I'll have to figure out what I'm doing...

Thank you for your help.

**jscheuer1** · 07-09-2007, 04:10 AM

I've noticed that using a DOCTYPE seems to throw off your layout a little in some spots. I don't see any problem from the script itself. Using a DOCTYPE can change the way your stylesheet is interpreted by the browser. If you need help tweaking your stylesheet to work with a given DOCTYPE, open a new thread in the css forum. One thing I can tell you is that with a DOCTYPE of the sort required for this script, you must specify units in a stylesheet. For example, with no DOCTYPE you can do something like:

Code:

width:30;

But, with a DOCTYPE of the type required here, you would need to specify (in this case it would be pixels) units:

Code:

width:30px;

Thread: IE and Animated Collapsible DIV

Thread Tools

Search Thread

IE and Animated Collapsible DIV

Bookmarks

Bookmarks

Posting Permissions