Results 1 to 7 of 7

Thread: IE and Animated Collapsible DIV

  1. #1
    Join Date
    Jul 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question IE and Animated Collapsible DIV

    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.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!

  4. #4
    Join Date
    Jul 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Jul 2007
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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;
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •