Search code examples
htmlobjectembedconditional-comments

Conditional Comments Causing Chrome & FF to Swallow a Seperate Div Container into another Div


For the life of me, I can't seem to figure this one out. I'm using Conditional Comments and while it seems to work great in IE. Firefox and Chrome, for some reason, move a div container into a previous one. However, I can only see this in firebug, even view source shows it correctly.

Original Code (it's for school, from a book, ;):

<html>
<head>
<title>The Robert Frost Web Page</title>
   <link href="poetry.css" rel="stylesheet" type="text/css" />

</head>

<body>
   <div id="pageContent">
    <div id="links">
        <!--[if IE]><!-->
            <object classid="clsd:clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" codebase="http://java.sun.com/update/1.6.0/jinstall-6-windows-i586.cab" type="application/x-java-applet" width="700" height="30">
            <param name="code" value="PopMenu.class" />
        <!--<![endif]-->               
        <!--[if !IE]><!-->
            <object classid="java:PopMenu.class" type="application/x-java-applet" width="700" height="30">
        <!--<![endif]-->            
            <param name="labelpos" value="right" />
            <param name="src0" value="button0.gif" />
            <param name="src1" value="button1.gif" />
            <param name="src2" value="button2.gif" />
            <param name="src3" value="button3.gif" />
            <param name="text0" value="Robert Frost on Wikipedia" />
            <param name="text1" value="Robert Frost at Poets.org" />
            <param name="text2" value="Robert Frost Out Loud" />
            <param name="text3" value="Robert Frost: America's Poet" />
            <param name="href0" value="http://en.wikipedia.org/wiki/Robert_Frost" />
            <param name="href1" value="http://www.poets.org/poet.php/prmPID/192" />
            <param name="href2" value="http://robertfrostoutloud.com" />
            <param name="href3" value="http://www.ketzle.com/frost" />
            <a href="http://en.wikipedia.org/wiki/Robert_Frost">Robert Frost on Wikipedia</a>
            <a href="http://www.poets.org/poet.php/prmPID/192">Robert Frost at Poets.org</a>
            <a href="http://robertfrostoutloud.com">Robert Frost Out Loud</a>
            <a href="http://www.ketzle.com/frost">Robert Frost: America's Poet</a>
            </object></div>

   <h1 id="head"><img src="rflogo.gif" alt="The Robert Frost Web Page" /></h1>

   <p class="firstp">Robert Frost was born in San Francisco on March 26, 1874. 
      While still a young boy, Frost's father died and the family moved to  
      Massachusetts. Frost attended Dartmouth College for less than a semester, 
      after which he moved back to Massachusetts to teach and work as a reporter 
      for a local newspaper. Frost returned to college in 1897 to attend Harvard, 
      but he did not graduate. Frost was essentially a self-educated man.</p>

    <p>After Harvard, Frost married and sold the farm he had inherited. With
       the proceeds of the sale, he moved his family to England, where he wrote for
       ten years without success. His first works were published by a
       London publisher in 1913.</p>

   <p>Frost's works, once printed, met immediate acclaim. His collection of
      poems <i>A Further Place</i> won the Pulitzer Prize in 1937. Though he is
      sometimes cast as a pastoral poet, Frost was also a fierce intellectual with 
      a decidedly dark view of himself and the world. Frost would use rural 
      settings as a metaphor for his philosophical views. Robert Frost is one of 
      the best-known and most loved of American poets. He died in Boston on 
      January 29, 1963.</p>

   <p>Two of Frost's poems are included below. Click the sound icon located next
      to each poem to hear readings of each work.</p>


   <div class="poem">
      <h2>Fire and Ice</h2>
        <!--[if IE]><!-->
            <object data="fireice.mp3" type="audio/mpeg" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="18" height="16">
        <!--<![endif]-->
        <!--[if !IE]><!-->
            <object data="fireice.mp3" type="audio/mpeg" width="18" height="16">
        <!--<![endif]-->
                <param name="src" value="fireice.mp3" />
                <param name="autoplay" value="false" />
                <param name="controller" value="true" />
                <embed src="fireice.mp3" type="audio/mpeg" width="18" height="16" autoplay="false" controller="true">
                <p>Click to <a href="fireice.mp3">download</a> the sound clip.</p>
                </embed>
            </object>
      <p>
         Some say the world will end in fire,<br />
         Some say in ice.<br />
         From what I've tasted of desire<br />
         I hold with those who favor fire.<br />
         But if it had to perish twice,<br />
         I think I know enough of hate<br />
         To say that for destruction ice<br />
         Is also great<br />
         And would suffice.
      </p>
   </div>

   <div class="poem">
   <h2>Devotion</h2>
        <!--[if IE]><!-->
            <object data="devotion.mp3" type="audio/mpeg" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" codebase="http://www.apple.com/qtactivex/qtplugin.cab" width="18" height="16">
        <!--<![endif]-->
        <!--[if !IE]><!-->
            <object data="devotion.mp3" type="audio/mpeg" width="18" height="16">
        <!--<![endif]-->
                <param name="src" value="devotion.mp3" />
                <param name="autoplay" value="false" />
                <param name="controller" value="true" />
                <embed src="devotion.mp3" type="audio/mpeg" width="18" height="16" autoplay="false" controller="true">
                <p>Click to <a href="devotion.mp3">download</a> the sound clip.</p>
                </embed>
            </object>
   <p>
         The heart can think of no devotion<br />
         Greater than being shore to the ocean&#151;<br />
         Holding the curve of one position,<br />
         Counting an endless repetition.
      </p>
   </div>

   <div id="footer">
      Button applet provided by: 
     <a href="http://www.free-applets.com">http://www.free-applets.com</a>
   </div>

   </div>

</body>
</html>

Here's the code pulls out of firebug:

<html><head>
<title>The Robert Frost Web Page</title>
   <link type="text/css" rel="stylesheet" href="poetry.css">
</head>

<body style="">
   <div id="pageContent">
    <div id="links">
        <!--[if IE]><!-->
            <object width="700" height="30" type="application/x-java-applet" codebase="http://java.sun.com/update/1.6.0/jinstall-6-windows-i586.cab" classid="clsd:clsid:8AD9C840-044E-11D1-B3E9-00805F499D93">
            <param value="PopMenu.class" name="code">
        <!--<![endif]-->               
        <!--[if !IE]><!-->
            <object width="700" height="30" type="application/x-java-applet" classid="java:PopMenu.class">
        <!--<![endif]-->            
            <param value="right" name="labelpos">
            <param value="button0.gif" name="src0">
            <param value="button1.gif" name="src1">
            <param value="button2.gif" name="src2">
            <param value="button3.gif" name="src3">
            <param value="Robert Frost on Wikipedia" name="text0">
            <param value="Robert Frost at Poets.org" name="text1">
            <param value="Robert Frost Out Loud" name="text2">
            <param value="Robert Frost: America's Poet" name="text3">
            <param value="http://en.wikipedia.org/wiki/Robert_Frost" name="href0">
            <param value="http://www.poets.org/poet.php/prmPID/192" name="href1">
            <param value="http://robertfrostoutloud.com" name="href2">
            <param value="http://www.ketzle.com/frost" name="href3">
            <a href="http://en.wikipedia.org/wiki/Robert_Frost">Robert Frost on Wikipedia</a>
            <a href="http://www.poets.org/poet.php/prmPID/192">Robert Frost at Poets.org</a>
            <a href="http://robertfrostoutloud.com">Robert Frost Out Loud</a>
            <a href="http://www.ketzle.com/frost">Robert Frost: America's Poet</a>
            </object>

   <h1 id="head"><img alt="The Robert Frost Web Page" src="rflogo.gif"></h1>

   <p class="firstp">Robert Frost was born in San Francisco on March 26, 1874. 
      While still a young boy, Frost's father died and the family moved to  
      Massachusetts. Frost attended Dartmouth College for less than a semester, 
      after which he moved back to Massachusetts to teach and work as a reporter 
      for a local newspaper. Frost returned to college in 1897 to attend Harvard, 
      but he did not graduate. Frost was essentially a self-educated man.</p>

    <p>After Harvard, Frost married and sold the farm he had inherited. With
       the proceeds of the sale, he moved his family to England, where he wrote for
       ten years without success. His first works were published by a
       London publisher in 1913.</p>

   <p>Frost's works, once printed, met immediate acclaim. His collection of
      poems <i>A Further Place</i> won the Pulitzer Prize in 1937. Though he is
      sometimes cast as a pastoral poet, Frost was also a fierce intellectual with 
      a decidedly dark view of himself and the world. Frost would use rural 
      settings as a metaphor for his philosophical views. Robert Frost is one of 
      the best-known and most loved of American poets. He died in Boston on 
      January 29, 1963.</p>

   <p>Two of Frost's poems are included below. Click the sound icon located next
      to each poem to hear readings of each work.</p>
    <div class="poem">
      <h2>Fire and Ice</h2>
        <!--[if IE]><!-->
            <object width="18" height="16" codebase="http://www.apple.com/qtactivex/qtplugin.cab" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" type="audio/mpeg" data="fireice.mp3">
        <!--<![endif]-->
        <!--[if !IE]><!-->
            <object width="18" height="16" type="audio/mpeg" data="fireice.mp3">
        <!--<![endif]-->
                <param value="fireice.mp3" name="src">
                <param value="false" name="autoplay">
                <param value="true" name="controller">
                <embed width="18" height="16" controller="true" autoplay="false" type="audio/mpeg" src="fireice.mp3">
                <p>Click to <a href="fireice.mp3">download</a> the sound clip.</p>

            </object>
      <p>
         Some say the world will end in fire,<br>
         Some say in ice.<br>
         From what I've tasted of desire<br>
         I hold with those who favor fire.<br>
         But if it had to perish twice,<br>
         I think I know enough of hate<br>
         To say that for destruction ice<br>
         Is also great<br>
         And would suffice.
      </p>
   <div class="poem">
   <h2>Devotion</h2>
        <!--[if IE]><!-->
            <object width="18" height="16" codebase="http://www.apple.com/qtactivex/qtplugin.cab" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B" type="audio/mpeg" data="devotion.mp3">
        <!--<![endif]-->
        <!--[if !IE]><!-->
            <object width="18" height="16" type="audio/mpeg" data="devotion.mp3">
        <!--<![endif]-->
                <param value="devotion.mp3" name="src">
                <param value="false" name="autoplay">
                <param value="true" name="controller">
                <embed width="18" height="16" controller="true" autoplay="false" type="audio/mpeg" src="devotion.mp3">
                <p>Click to <a href="devotion.mp3">download</a> the sound clip.</p>

            </object>
   <p>
         The heart can think of no devotion<br>
         Greater than being shore to the ocean&mdash;<br>
         Holding the curve of one position,<br>
         Counting an endless repetition.
      </p>


   <div id="footer">
      Button applet provided by: 
     <a href="http://www.free-applets.com">http://www.free-applets.com</a>
   </div>
</object>
</div>
</object>
</div>
</object>
</div>
</div>
<div id="tc_container" style="display: none" data="ih">
</div>
</body>
</html>

As you can see here:

</p>
<div class="poem">
<h2>Devotion</h2>

and here:

</p>
<div id="footer">

My closing div tags are gone.

Any ideas?

Thanks! PHRoG


The solution is to use to start the Conditional Comment and use to end it. Like so:

<!--[if IE]>
<object classid="clsd:clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" codebase="http://java.sun.com/update/1.6.0/jinstall-6-windows-i586.cab" type="application/x-java-applet" width="700" height="30">
<param name="code" value="PopMenu.class" />
<!--<![endif]-->               
<!--[if !IE]><!-->
<object classid="java:PopMenu.class" type="application/x-java-applet" width="700" height="30">
<!--<![endif]-->

It also displays properly when Active X is turned off.


Solution

  • The solution is to use to start the Conditional Comment and use to end it. Like so:

    <!--[if IE]>
    <object classid="clsd:clsid:8AD9C840-044E-11D1-B3E9-00805F499D93" codebase="http://java.sun.com/update/1.6.0/jinstall-6-windows-i586.cab" type="application/x-java-applet" width="700" height="30">
    <param name="code" value="PopMenu.class" />
    <!--<![endif]-->               
    <!--[if !IE]><!-->
    <object classid="java:PopMenu.class" type="application/x-java-applet" width="700" height="30">
    <!--<![endif]-->
    

    It also displays properly when Active X is turned off.