Problema com javascript de "posts recentes do blogger

[Vanessa-YesWeHeartIt]

Pessoal, estou com um probleminha. No meu blog, na barra lateral tem um "widget"de posts recentes com imagem. Ao lado de cada imagem aparece um ponto preto que não consigo excluir de jeito nenhum! Parece um ícone. Já tentei de tudo que eu pude e ão consegui tirá-lo de lá!!

Blog "afetado": http://www.yesweheartit.com

O código é o seguinte:

<div id='recent-posts' style='background-color: #ffffff; width: 316px; border: 1px solid #cfcfcf; margin-bottom: 13px; box-shadow: 10px 3px 4px #9C9C9C; -webkit-box-shadow: 10px 3px 4px #9C9C9C; -moz-box-shadow: 10px 3px 4px #9C9C9C; padding-bottom: 8px;'>
<h2><center><img src='http://dl.dropbox.com/u/7408351/posts%20recentes.jpg'/></center></h2>
&lt;script type='text/javascript'>
imgr = new Array();
imgr[0] = "http://dl.dropbox.com/u/7408351/Untitled-2.jpg";
showRandomImg = true;
imgwidth = 84;
imgheight = 84;
summaryPost = 0;
startpost = 1;
numposts = 6;
home_page = "<data:blog.homepageUrl/>";
</script>
&lt;script type='text/javascript'>
//<![CDATA[
// <!-- Based on a Script by Anhvo  http://www.vietwebguide.com/ -->
// <!--  Modified by BloggerSPhera - www.bloggersphera.com/ -->
// <!-- Recent Posts with Thumbnail for Blogger Blogs -->
// <!--  bloggersphera-version 7 - script showing posts in a unordered list -->
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s =  s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
document.write('<ul id="rec_posts">');
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;        
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}    
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";        
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
var item = '<li class="rec_thumbs"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a> '+removeHtmlTag(postcontent,summaryPost)+'...</span></li>';
if(summaryPost == 0) { item = '<li class="rec_thumbs"><a href="'+posturl+'"><img src="'+img[i]+'" width="'+imgwidth+'" height="'+imgheight+'"/></a><span><a href="'+posturl+'">'+posttitle+'</a></span></li>'; }
document.write(item);
j++;
}
document.write('</ul>');
}
document.write("&lt;script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&start-index="+startpost+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
//]]>
</script>
<div class='clear'/>
</div>

Fiz o estilo assim:

#rec_posts {
width: 300px; 
margin-left: 13px;
}

.rec_thumbs {
float: left; /* faz com que os ítens fiquem na horizontal */
background: #ffffff;
margin-right: 6px;
margin-bottom: 6px;
border: 1px solid #000000;
padding-top: 3px;
padding-right: 3px;
padding-left: 3px;
}

.rec_thumbs span {
width: 85px;
height: 22px;
text-align: center;
display: block;
font-size: 10px;
line-height: 1.0;
}

Alguém pode me dar uma luz por favor????

Obrigada!!

[*FIT*]

Apenas altere essa parte do seu CSS:

#rec_posts {
width: 300px; 
margin-left: 13px;
}

por:

#rec_posts {
width: 300px; 
margin-left: 13px;
list-style:none;
}

[Vanessa-YesWeHeartIt]

Nossa, não acredito! haha

Uma coisa tão simples me consumiu hoooras e não consegui resolver sozinha!! :blink:

SUUUUPER obrigada!!! :lol: