Databases
StackOverflow2013
Postsdbo
POcorrecting display in IE7 with jQuery
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POcorrecting display in IE7 with jQuery
    text
    copied!<p>My code displays correctly in every browser except IE7 and I'm not sure why. I've gone through so many threads about problems in IE7 to no avail. There are six similar li tag elements. They should show up in three to a row. Here is a section of the HTML:</p> <pre><code>&lt;div id="winning-designs" class="product-section"&gt; &lt;h2 class="section-heading"&gt;Winning logo designs&lt;/h2&gt; &lt;ul class="winning-designs-list"&gt; &lt;li class="winning-design"&gt; &lt;!-- thumb --&gt; &lt;a href="#" class="lightbox-trigger" title="View case study" data-lightbox-target="winning-design1-lightbox"&gt; &lt;img src="/static/images/category-product-pages/logo-design/example1-thumb.png" width="268" height="160" /&gt; &lt;p class="larger-link"&gt;View case study&lt;/p&gt; &lt;/a&gt; &lt;!-- lightbox --&gt; &lt;div id="winning-design1-lightbox" class="lightbox winning-design-lightbox"&gt; &lt;div class="lightbox-content"&gt; &lt;div class="winning-design-info"&gt; &lt;h3&gt;Carplanet.com.au&lt;/h3&gt; &lt;p&gt;Carplanet.com.au is an Australian based website that reviews new cars. They didn't have a predefined brand or color scheme in mind, so allowed designers to have complete artistic freedom for this logo.&lt;/p&gt; &lt;ul&gt; &lt;li class="contest-stat"&gt;Paid &lt;span class="symbol"&gt;$&lt;/span&gt;&lt;span class="amount"&gt;709&lt;/span&gt;&lt;/li&gt; &lt;li class="contest-stat"&gt;Received &lt;a href="/logo-design/contests/car-review-company-requires-logo-36577" title="View contest"&gt;202 designs&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div class="winning-design-feature"&gt; &lt;div class="enlarged-image-wrapper"&gt; &lt;a href="/logo-design/contests/car-review-company-requires-logo-36577"&gt; &lt;img data-src="/static/images/category-product-pages/logo-design/example1-large.png" /&gt; &lt;/a&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/li&gt; </code></pre> <p>and this is my jQuery:</p> <pre><code>m360_empty($("#intro-examples")); m360_empty($(".join-msg")); $(".lightbox-trigger img").width(90); $(".lightbox-trigger img").height(54); var wd_html = "&lt;div id='winning-designs' class='product-section'&gt;" + $('#winning- designs').html() + "&lt;/div&gt;"; m360_empty('#winning-designs'); $("#intro-examples").html(wd_html); var ie7 = (document.all &amp;&amp; !window.opera &amp;&amp; window.XMLHttpRequest) ? true : false; if (ie7) { wd_html = "&lt;div id='winning-designs' class='product-section'&gt;" + $('#winning- designs').html() + "&lt;/div&gt;"; wd_html_ie = "&lt;table border='0' width='440'&gt;&lt;tr border='0'&gt;&lt;td border='0'&gt;" + wd_html + "&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;"; $("#intro-examples").html(wd_html_ie); } $("#winning-designs").width(440); $("#intro-msg").width(450); $("#lightbox").css("align", "center"); (function($) { $('.lightbox-trigger').click(function() { target = $(this).attr('data-lightbox-target'); $('#' + target).lightbox_me({ centered: true }); return false; }); })(jQuery); </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload