Need Help With SS:if Statement

[mppanj12]

Hey Folks,
I need a statement that will use one photo for IE and another for FF, I am trying this on my homepage but is not working. Any ideas are much appreciated.

<ss:if test="IE 7">
     <table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4" style="border:0px solid #660000;padding:2px;">
<ss:link source="$templateset.templates['Coffeesale']">
<ss:image source="$storeVersion.images['coffeesale6.jpg']" width="645" alt="Coffee Sale" border="0"/></ss:link>
</td>
</tr>
 
<ss:else/>
 
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="4" style="border:0px solid #660000;padding:2px;">
<ss:link source="$templateset.templates['Coffeesale']">
<ss:image source="$storeVersion.images['coffeesale6.jpg']" width="100%" alt="Coffee Sale" border="0"/></ss:link>
</td>
</tr>
</ss:if>

Thanks
Matt

[TylerD]

This should do it.

<ss:if test="$browser.isMsIe()">
This is IE
<ss:else/>
This is NOT IE... Is Firefox, Opera, Chrome...
</ss:if>

If you are looking for somehting specific to IE 7 or higher then use this.

<ss:if test="$browser.isMsIe7OrGreater()">
This is IE 7, IE 8
<ss:else/>
This is IE6 , Firefox, Opera, Chrome...
</ss:if>

[mppanj12]

Thanks Tyler,
Works Awesome.

[dwa12479]

Hey Matt,

I think I have an easier way for you to accomplish your goal without the need for an <ss:if> statement or redundant code. It looks like the only thing that you're trying to add for IE is the border and width provisions for your images. IE is the only browser that can read conditional statements, so you can feed different CSS to IE. Here's how I would do it:

1) Create a new notepad file, and save it as ie.css. Add the code below and upload it to your store images folder.

img.ieOnly  { 
     width:642px;
     border:none;
}

2) Add the conditional statement that feeds the external stylesheet as the very last line in your header template above the </head> tag:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="$storeVersion.images['ie.css']" />
<![endif]-->

3) Remove the test statements, the width and border provisions, and replace them with the class ieOnly, so your code will look like this:

<div id="slideshow">
<div class="active">
<a href="http://">
<ss:image source="$storeVersion.images['coffeesale6.jpg']" class="ieOnly" alt="30% Coffee Sale" /></a>
</div>
<div>
<a href="http://">
<ss:image source="$storeVersion.images['saeco.jpg']" class="ieOnly" alt="Saeco Venus + Pumpkin Spice" /></a>
</div>
<div>
<a href="http://">
<ss:image source="$storeVersion.images['wholesalecoffee.jpg']" class="ieOnly" alt="Wholesale Coffee" /></a>
</div>
<div>
<a href="">
<ss:image source="$storeVersion.images['logocontest.jpg']" class="ieOnly" alt="Join Our Logo Contest" /></a>
</div>
</div>

Now Firefox will read the code and display the image at the height and width that it was uploaded at. It will not find the ieOnly class anywhere, so it will simply ignore it. IE on the other hand, will read the CSS from the external sheet because it's enclosed in the conditional statement.

[mppanj12]

Dear Dave,
I implemented your code and I think it works, I have this problem that whatever IE shows thats what shows in FF. Or if I open FF first than thats what I see in IE, is there anyway to make these two different browsers not share info.

Thanks
Matt

[dwa12479]

Are you using the preview function?