Conditional Comment Problem

T

Tom59593

New Member
Hey guys,

I have a client who has requested (even after the possible consequences were explained) that I use a flash navigation bar in her website. The problem is, this bar doesn't play nice with a lot of out-dated browsers (IE6 and before, old versions of safari, and old versions of opera).

So, I thought I would resort to conditional comments to make things easier. Below you can see the html code that I am trying to use to get the site to display properly:

HTML: 
<div id="navigation">
<!--[if !IE]>-->
     <object type="application/x-shockwave-flash" data="ecochic_navigation.swf" width="500" height="150">
     <param name="wmode" value="transparent" />
<!--<![endif]-->

<!--[if lte IE 6]>
<!--<![endif]-->

<!--[if IE 7]>
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="500" height="150">
     <param name="movie" value="ecochic_navigation.swf" />
     <param name="wmode" value="transparent" />
     </object>
<!--<![endif]-->

<!--[if IE 8]>
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="500" height="150">
     <param name="movie" value="ecochic_navigation.swf" />
     <param name="wmode" value="transparent" />
     </object>
<!--<![endif]-->
</div>

In my css file I have it set so that the background of this div is an image (brown gradient background). So, to my understanding, if the browser is less than or equal to IE6, then there should be nothing in this div and it should show that background image, right?

When I test this in browsershots for IE6, it shows a solid white bar where the div is (as if the div had a white background set).

Am I using these conditional comments correctly? Let me know what you think!

THANK YOU!!

P.S. I already know the issues that I might face by using wmode parameters and such...that's already been discussed and that's what the client wants...go figure...

-Tom-
 
T

Tom59593

New Member
Hey guys, I was wondering if anyone had any good resources where I might be able to find out how to correctly format these conditional comments?

I'm wondering if there is a difference between the conditional comments for IE browsers and Non-IE browsers...I have found different formats across different sites, so I didn't know which was the 'Correct' way to do it...

THANKS!!!

-Tom-
 
PixelPusher

PixelPusher

Super Moderator
Staff member
First off, I do not use conditional comments (just have not found a use for them), but that being said, I believe they only work for IE when inserted into HTML, like you have below.

In reference to your comments below, I think the syntax is slightly incorrect and that could be causing your problem. Also, you mentioned that a white bg appears in the div when the swf object is not present?

HTML Comments
I have adjusted the syntax below.
Also I do believe the "if not IE" (<!--[if !IE]>) statement will work the way you want because I don't think that type of command can be used. I would say the better method is to use a <comment> tag. Comment tags will remove an element in IE (both Mac and PC) but will be overlooked by any other browser, which is essentially the effect you are trying achieve.

HTML: 
<div id="navigation">
<comment>
     <object type="application/x-shockwave-flash" data="ecochic_navigation.swf" width="500" height="150">
     <param name="wmode" value="transparent" />
</comment>

<!--[if lte IE 6]>
&nbsp;
<![endif]-->

<!--[if IE 7]>
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="500" height="150">
     <param name="movie" value="ecochic_navigation.swf" />
     <param name="wmode" value="transparent" />
     </object>
<![endif]-->

<!--[if IE 8]>
     <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="500" height="150">
     <param name="movie" value="ecochic_navigation.swf" />
     <param name="wmode" value="transparent" />
     </object>
<![endif]-->
</div>

CSS
Make sure div "navigation" has {width:500px; height:150px;} because an empty div (when no swf is showing) will not display if the width and height are not set. I added a "&nbsp;" in there just so it has some content. Empty elements are to be avoided if possible. And truthfully a non-braking space is not much better, but it is better than nothing :)
 
You must log in or register to reply here.
Top