Estou usando um carousel no layout, o problema é q ele funciona perfeitamente no firefox, safári, e IE6 e 8, mas no IE7 as imagens encavalam (overlap), pesquisei na net e descobri que deve ser um problema no CSS (float), mas ainda não sei o q devo acrescentar para q seja lido pelo IE7. Segue abaixo código e área destacada na imagem com overlap. Agradeço se alguém puder me dar uma luz!
PÁGINA HTML INDEX
<html>
<head>
#featured .arthemia-carousel {
height: 200px;
}
#cat-17 { border-top:8px solid #DD127B; }
#cat-17:hover, #cat-17 a:hover {background:#DD127B; color:#333; }
#sidebar h3.catt-17 {background:#DD127B; }
<script type="text/javascript">var $j = jQuery.noConflict();$j(function() { $j(".arthemia-carousel").jCarouselLite({ btnNext: ".next", btnPrev: ".prev", vertical: true, visible: 1, auto: false, speed: 8000 });});</script> </HEAD>
<BODY>
<div id="featured" class="clearfloat">
<div class="label"><a href="http://www.testadoporelas.com.br/category/fique-linda/">Fique Linda! »</a></div>
<div class="arthemia-carousel">
<ul>
<li>
<div class="clearfloat" style="clear:both">
<a href="http://www.testadoporelas.com.br/teste-2/" rel="bookmark" title="Permanent Link to teste">
<img src="http://www.testadoporelas.com.br/wp-content/themes/arthemia-premium/scripts/timthumb.php?src=&w=100&h=65&zc=1&q=100"
alt="teste" class="left" width="100px" height="65px" /></a>
<div class="info"><a href="http://www.testadoporelas.com.br/teste-2/" rel="bookmark" class="title">teste</a>
<div class="meta">seg, 20/07/09 – 14:43 | <a href="http://www.testadoporelas.com.br/teste-2/#respond" title="Comentário para teste">No Comment</a></div>
</div>
</div>
<div class="clearfloat" style="clear:both">
<a href="http://www.testadoporelas.com.br/rating-teste/" rel="bookmark" title="Permanent Link to rating teste">
<img src="http://www.testadoporelas.com.br/wp-content/themes/arthemia-premium/scripts/timthumb.php?src=http://www.testadoporelas.com.br/wp-content/uploads/2009/07/setabuscape.jpg&w=100&h=65&zc=1&q=100"
alt="rating teste" class="left" width="100px" height="65px" /></a>
<div class="info"><a href="http://www.testadoporelas.com.br/rating-teste/" rel="bookmark" class="title">rating teste</a>
<div class="meta">qui, 16/07/09 – 18:31 | <a href="http://www.testadoporelas.com.br/rating-teste/#comments" title="Comentário para rating teste">One Comment</a></div>
</div>
</div>
<div class="clearfloat" style="clear:both">
<a href="http://www.testadoporelas.com.br/583/" rel="bookmark" title="Permanent Link to ASasASA">
<img src="http://www.testadoporelas.com.br/wp-content/themes/arthemia-premium/scripts/timthumb.php?src=&w=100&h=65&zc=1&q=100"
alt="ASasASA" class="left" width="100px" height="65px" /></a>
<div class="info"><a href="http://www.testadoporelas.com.br/583/" rel="bookmark" class="title">ASasASA</a>
<div class="meta">seg, 13/07/09 – 12:10 | <a href="http://www.testadoporelas.com.br/583/#respond" title="Comentário para ASasASA">No Comment</a></div>
</div>
</div>
</li></ul>CODIGO DA CSS APENAS
#featured { width:310px; float:right; padding:0px 10px 0px 10px; font-size:1.05em; }#featured .clearfloat { margin-top:0px; margin-bottom:7px; }
#featured .info { margin-top:5px; padding-top:0px; float:right; width:193px; font-size:0.9em; }
#featured .meta { margin-top:5px; font-size:0.85em; }#featured .title { font-weight:bold; }#featured .divider { margin-left:95px; }
#headline a img, #featured a img { margin-top:5px; }
#featured a { color:#000000; }
#featured a:hover { color:#808080; }
#featured a img { border:2px solid #fff; margin-right:10px; }
/* Float Properties*/
.clearfloat:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfloat { display: inline-block; }
/* Hides from IE-mac \*/* html
.clearfloat { height:1%; }*+html
.clearfloat { height:1%; }
.clearfloat { display:block; }
