Мой код отображается правильно во всех браузерах, кроме IE7, и я не уверен, почему. Я прошел через множество тем о проблемах в IE7, но безрезультатно. Есть шесть похожих элементов тега li. Они должны появиться в три к ряду. Вот раздел HTML:
<div id="winning-designs" class="product-section">
<h2 class="section-heading">Winning logo designs</h2>
<ul class="winning-designs-list">
<li class="winning-design">
<!-- thumb -->
<a href="#" class="lightbox-trigger" title="View case study" data-lightbox-target="winning-design1-lightbox">
<img src="/static/images/category-product-pages/logo-design/example1-thumb.png" width="268" height="160" />
<p class="larger-link">View case study</p>
</a>
<!-- lightbox -->
<div id="winning-design1-lightbox" class="lightbox winning-design-lightbox">
<div class="lightbox-content">
<div class="winning-design-info">
<h3>Carplanet.com.au</h3>
<p>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.</p>
<ul>
<li class="contest-stat">Paid <span class="symbol">$</span><span class="amount">709</span></li>
<li class="contest-stat">Received <a href="/logo-design/contests/car-review-company-requires-logo-36577" title="View contest">202 designs</a></li>
</ul>
</div>
<div class="winning-design-feature">
<div class="enlarged-image-wrapper">
<a href="/logo-design/contests/car-review-company-requires-logo-36577">
<img data-src="/static/images/category-product-pages/logo-design/example1-large.png" />
</a>
</div>
</div>
</div>
</div>
</li>
и это мой JQuery:
m360_empty($("#intro-examples"));
m360_empty($(".join-msg"));
$(".lightbox-trigger img").width(90);
$(".lightbox-trigger img").height(54);
var wd_html = "<div id='winning-designs' class='product-section'>" + $('#winning- designs').html() + "</div>";
m360_empty('#winning-designs');
$("#intro-examples").html(wd_html);
var ie7 = (document.all && !window.opera && window.XMLHttpRequest) ? true : false;
if (ie7) {
wd_html = "<div id='winning-designs' class='product-section'>" + $('#winning- designs').html() + "</div>";
wd_html_ie = "<table border='0' width='440'><tr border='0'><td border='0'>" + wd_html + "</td></tr></table>";
$("#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);