Pop ups not working in IE8

[harveylester]

Hi guys,

For some reason, in IE8, on product pages (Example) of my ecommerce site, the 'Size Chart' and 'Email to a Friend' popups don't work, and the product image lightbox won't work either. I have turned pop-up blocker off but they still don't work. These popups work in every other browser I have tested in, including IE7. It seems to only be IE8 that is having this problem.

Upon looking at the page source, one thing I have noticed that both the 'Size Chart' and 'Email to a Friend' buttons have in common, is that the popups seem (I'm far from an expert) to be 'triggered' by a span element (class="more") within the HTML. For example:

<div class="row ">

<label >Size: </label>

<strong class="fl"><select name="size" id="size" onchange="checkstock(this.value)"><option value="">Select Size</option><option value="S">S</option><option value="M">M</option><option value="L">L</option><option value="XL">XL</option><option value="XXL">XXL</option></select></strong> 
		  
[B]<span style="text-decoration: underline;" class="size_chart more" title="size_chart1">+ Size Chart</span>[/B]

<div style="display: none;" class="size_chart1 hide" > <div class="close"></div>

<img src="http://www.projectdisobey.com/disobeyclothing/wp-content/themes/eCommerce3/images/size_chart.jpg" alt="" />
					  
</div>

<!-- size chart -->

</div>

<ul class="fav_link">

<li class="print"><a href="#" onclick="window.print();return false;">Print</a> </li>

<li class="rss"><a href="http://feeds.feedburner.com/DisobeyClothing">RSS</a> </li>
		   
<li class="emailtofriend">[B]<span style="text-decoration: underline;" class="more" title="tellafrnd_div">Email to a   Friend</span>[/B] </li>

<li class="blank"><span id="tellafrnd_success_msg_span"></span></li>

<li class="blank"><div style="display: none;" id="tellfrnddiv" class="tellafrnd_div hide"> <iframe src="http://www.projectdisobey.com/disobeyclothing/?page=tellafriend_form&amp;pid=402" style="border: medium none ; width: 547px; height: 558px;" frameborder="0" ></iframe> </div> </li>

<li class="share"> 

<div class="a2a_kit addtoany_list"><a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.projectdisobey.com/disobeyclothing/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share"/></a></div>

<script type="text/javascript"><!--
var a2a_config = a2a_config || {};
a2a_config.linkname="Know Your Enemy";
a2a_config.linkurl="http://www.projectdisobey.com/disobeyclothing/?p=402";
a2a_config.color_main = "f3f3e7";a2a_config.color_border = "C0C88A";a2a_config.color_link_text = "332402";a2a_config.color_link_text_hover = "332402";a2a_config.color_bg = "7f6f2";

a2a_config.num_services = 14;
//--></script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script>

</li>

</ul>

I have no idea what could be stopping the lightbox from working.

Anybody have any suggestions as to what the problem might be (and how I can rectify it)? If you need more info, let me know...

Thanks!

[lps]

this is mainly because the script problem. IE8 is more sensitive in scripting.

[Taywin]

Hmm... Actually it is how you place the "div" in your HTML. When I look at it, the hidden "div" of each list item is in another "li" tag. I believe you are supposed to put the "div" in the same "li" similarly to the "share/save" one.

[adamchen]

that's the worst part in IE8. Do you love using IE8?

[Troy III]

Great news...
I'll be soon switching back to IE8.
Thanks!

[harveylester]

Hmm... Actually it is how you place the "div" in your HTML. When I look at it, the hidden "div" of each list item is in another "li" tag. I believe you are supposed to put the "div" in the same "li" similarly to the "share/save" one.

Is this any better Taywin?

<ul class="fav_link">

<li class="print"> <a href="#" onclick="window.print();return false;">Print</a> </li>

<li class="rss"> <a href="http://feeds.feedburner.com/DisobeyClothing">RSS</a> </li>
		   
<li class="emailtofriend"> 

<span style="text-decoration: underline;" class="more" title="tellafrnd_div">Email to a Friend</span>

<span id="tellafrnd_success_msg_span"></span>

<div style="display: none;" id="tellfrnddiv" class="tellafrnd_div hide">
  
<iframe src="http://www.projectdisobey.com/disobeyclothing/?page=tellafriend_form&amp;pid=402" style="border: medium none ; width: 547px; height: 558px;" frameborder="0" ></iframe>

</div>

</li>

<li class="share"> <div class="a2a_kit addtoany_list"> <a class="a2a_dd addtoany_share_save" href="http://www.addtoany.com/share_save"><img src="http://www.projectdisobey.com/disobeyclothing/wp-content/plugins/add-to-any/share_save_171_16.png" width="171" height="16" alt="Share"/> </a> </div>

<script type="text/javascript"><!--
var a2a_config = a2a_config || {};
a2a_config.linkname="Know Your Enemy";
a2a_config.linkurl="http://www.projectdisobey.com/disobeyclothing/?p=402";
a2a_config.color_main = "f3f3e7";a2a_config.color_border = "C0C88A";a2a_config.color_link_text = "332402";a2a_config.color_link_text_hover = "332402";a2a_config.color_bg = "7f6f2";

a2a_config.num_services = 14;
//--></script><script type="text/javascript" src="http://static.addtoany.com/menu/page.js"></script>

</li>

</ul>

When I put the above coding through the validator at http://validator.w3.org/check, I get the following validation error:

"Line 99, Column 26: document type does not allow element "li" here; missing one of "ul", "ol", "menu", "dir" start-tag

<li class="emailtofriend"><span style="text-decoration: underline;" class="more…

The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.

One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>")."

By the way, this still didn't solve the popup problem in IE8. Any suggestions?

Thanks

[Dandello]

You might try un-commenting the javascript. While most browsers will run scripts even when commented out, it's possible MSIE8 is actually doing it right and ignoring what's in comments.
Also. you have divs and an iframe inside an li - which is where the validation error is coming from.