cross browser نبودن در تگ ul li

[funpatogh]

سلام
این یکی از سایت هایی هست که برای یکی از دوستانم نوشتم
یک پلاگین jquery توش گزاشتم که راندم محصولات رو نمایش بدهم
توی فایر فاکس هیچ مشکلی نداره اما توی IE خیلی این پلاگین رو به هم میریزه
جاش رو بکل تغییر میدهد
میتونید ببینید
www.azinsara.com (http://www.azinsara.com)
این کد بخش عکس هاست


<ul id="mycarousel" class="jcarousel-skin-ie7">
<li><a href="{Link}" ><img src="{Image}" width="75" height="75"></a></li>
<li><a href="{Link}" ><img src="{Image}" width="75" height="75"></a></li>
<li><a href="{Link}" ><img src="{Image}" width="75" height="75"></a></li>
<li><a href="{Link}" ><img src="{Image}" width="75" height="75"></a></li>
</ul>
این css این بخش



.jcarousel-skin-ie7 .jcarousel-container { -moz-border-radius: 10px; background: #D4D0C8; border: 1px solid #808080; } .jcarousel-skin-ie7 .jcarousel-direction-rtl { direction: rtl; } .jcarousel-skin-ie7 .jcarousel-container-horizontal { width: 245px; padding: 20px 40px; } .jcarousel-skin-ie7 .jcarousel-container-vertical { width: 75px; height: 245px; padding: 40px 20px; } .jcarousel-skin-ie7 .jcarousel-clip-horizontal { width: 245px; height: 77px; } .jcarousel-skin-ie7 .jcarousel-clip-vertical { width: 77px; height: 245px; } .jcarousel-skin-ie7 .jcarousel-item { width: 75px; height: 75px; border: 1px solid #fff; } .jcarousel-skin-ie7 .jcarousel-item:hover { border-color: #808080; } .jcarousel-skin-ie7 .jcarousel-item-horizontal { margin-left: 0; margin-right: 7px; } .jcarousel-skin-ie7 .jcarousel-direction-rtl .jcarousel-item-horizontal { margin-left: 7px; margin-right: 0; } .jcarousel-skin-ie7 .jcarousel-item-vertical { margin-bottom: 7px; } .jcarousel-skin-ie7 .jcarousel-item-placeholder { } /** * Horizontal Buttons */ .jcarousel-skin-ie7 .jcarousel-next-horizontal { position: absolute; top: 43px; right: 5px; width: 32px; height: 32px; cursor: pointer; background: transparent url(next-horizontal.gif) no-repeat 0 0; } .jcarousel-skin-ie7 .jcarousel-direction-rtl .jcarousel-next-horizontal { left: 5px; right: auto; background-image: url(prev-horizontal.gif); } .jcarousel-skin-ie7 .jcarousel-next-horizontal:hover { background-position: -32px 0; } .jcarousel-skin-ie7 .jcarousel-next-horizontal:active { background-position: -64px 0; } .jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal, .jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal:hover, .jcarousel-skin-ie7 .jcarousel-next-disabled-horizontal:active { cursor: default; background-position: -96px 0; } .jcarousel-skin-ie7 .jcarousel-prev-horizontal { position: absolute; top: 43px; left: 5px; width: 32px; height: 32px; cursor: pointer; background: transparent url(prev-horizontal.gif) no-repeat 0 0; } .jcarousel-skin-ie7 .jcarousel-direction-rtl .jcarousel-prev-horizontal { left: auto; right: 5px; background-image: url(next-horizontal.gif); } .jcarousel-skin-ie7 .jcarousel-prev-horizontal:hover { background-position: -32px 0; } .jcarousel-skin-ie7 .jcarousel-prev-horizontal:active { background-position: -64px 0; } .jcarousel-skin-ie7 .jcarousel-prev-disabled-horizontal, .jcarousel-skin-ie7 .jcarousel-prev-disabled-horizontal:hover, .jcarousel-skin-ie7 .jcarousel-prev-disabled-horizontal:active { cursor: default; background-position: -96px 0; } /** * Vertical Buttons */ .jcarousel-skin-ie7 .jcarousel-next-vertical { position: absolute; bottom: 5px; left: 43px; width: 32px; height: 32px; cursor: pointer; background: transparent url(next-vertical.gif) no-repeat 0 0; } .jcarousel-skin-ie7 .jcarousel-next-vertical:hover { background-position: 0 -32px; } .jcarousel-skin-ie7 .jcarousel-next-vertical:active { background-position: 0 -64px; } .jcarousel-skin-ie7 .jcarousel-next-disabled-vertical, .jcarousel-skin-ie7 .jcarousel-next-disabled-vertical:hover, .jcarousel-skin-ie7 .jcarousel-next-disabled-vertical:active { cursor: default; background-position: 0 -96px; } .jcarousel-skin-ie7 .jcarousel-prev-vertical { position: absolute; top: 5px; left: 43px; width: 32px; height: 32px; cursor: pointer; background: transparent url(prev-vertical.gif) no-repeat 0 0; } .jcarousel-skin-ie7 .jcarousel-prev-vertical:hover { background-position: 0 -32px; } .jcarousel-skin-ie7 .jcarousel-prev-vertical:active { background-position: 0 -64px; } .jcarousel-skin-ie7 .jcarousel-prev-disabled-vertical, .jcarousel-skin-ie7 .jcarousel-prev-disabled-vertical:hover, .jcarousel-skin-ie7 .jcarousel-prev-disabled-vertical:active { cursor: default; background-position: 0 -96px; }
کی میتونه علتش رو بفهمه؟

[Mr FTHEL]

باید برای IE جدا تعریف کنی

[funpatogh]

منظورتون اینه که نوع مرورگر کاربر رو تشخیص بدهم و بعد css که مخصوص ie نوشتم رو برای این قسمت لود کنم؟
آخه مگه css فرق میکنه برای ie؟

[Keramatifar]

بجاش از Easy Slider استفاده کن که هم Cross Browser است هم خیلی Optimize تره.

http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

[Mr FTHEL]

آره عزیز برخی از کد ها هست توی مروگرهای مختلف پیکسلشو به هم میریزه چون مثل هم تعریف نشده