[Resolvido] Posicionamento de galeria de fotos e problemas com IE

Bom, estava procurando uma galeria de fotos para ter um recurso como álbum de figurinha para meu site.

Peguei um script interessante porém estou com alguns problemas, o primeiro e principal é que minhas <LI> ficam com uma margem esquerda que eu não setei,

nao utilizando corretamente o espaço para o conteudo.

O segundo é que o background do conteúdo não repete até o final da galeria no Firefox, já no IE fica certo...

e o terceiro diz respeito a div#conteudo .hoverbox a:hover .preview no IE a foto ampliada fica por baixo do <li> a sua direita.

Resumindo o CSS de toda a página, vou colocar so o do conteudo que, num layout de 3 colunas(navigation, content, extras) com float, está dentro da div CONTENT

div#conteudo {color:#FFFFFF; background-color:#2F2F2F; padding: 8px 15px;}
div#conteudo p{line-height:1.4; font-family: Verdana, Helvetica, sans-serif; font-size: 13px; }
div#conteudo p.legenda{font-size: 10px; text-align:right;}
div#conteudo a{padding:5px; text-decoration:underline; color:#FFFFFF;}
div#conteudo a:hover{padding:5px; text-decoration:underline; color:#1E90FF;}

div#conteudo .hoverbox { background: #212121; color: #333; width: inherit; cursor: default;list-style: none;}
div#conteudo .hoverbox p{ color: #ffffff; margin:0px; padding: 0px; font-size: 9px; font-weight: normal;}
div#conteudo .hoverbox a { cursor: default;}
div#conteudo .hoverbox a .preview { display: none;}

div#conteudo .hoverbox a:hover .preview {display: block; position: absolute; z-index: 1;
	/* aqui voce define onde vai aparecer a foto ampliada em relacao a miniatura */
	/* retire a declaracao position:relative de hoverbox li (logo abaixo na proxima regra CSS) e a posicao sera fixa.
 Experimente fazer isso e mudar os valores abaixo */
	top: -33px;
	left: -45px;
 }

div#conteudo .hoverbox li {

	position: relative;
	background: #000000;
	border-color: #ddd #bbb #aaa #ccc;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	display: inline;
	float: left;
	margin: 3px;
	padding: 5px;
 width:140px;
	}

div#conteudo .hoverbox img {

	background: #fff;
	border-color: #aaa #ccc #ddd #bbb;
	border-style: solid;
	border-width: 1px;
	color: inherit;
	padding: 2px;
	vertical-align: top;
	/* aqui voce define as dimensões da miniatura */
	width: 100px;
	height: 75px;
	}

div#conteudo .hoverbox .preview {

	border-color: #000;
	/* aqui as dimensoes reais da foto ampliada */
	width: 200px;
	height: 150px;
	}

/ Hacks para o Internet Explorer/
----------------------------------------------------------------------
* html .hoverbox a { position: relative;}
* html .hoverbox a:hover { font-size: 99.99%; z-index: 1;}
* html .hoverbox a:hover .preview { top: -38px; left: -50px;}
* html .hoverbox li { position: static;}

A utilização com HTML ficou assim

<div id="content">
 <div id="conteudo">
 <ul class="hoverbox">
 <li>
 <a href="#"><img src="../imagens/Rugby_Positions.jpg" alt="a" /><img src="../imagens/Rugby_Positions.jpg" alt="a" class="preview" /></a>
 <p>Nome: Djonatan</p>
 <p>Altura: 1,89m</p>
 <p>Posição: Abertura</p>
 <p>Outras: 1º e 2º centro</p>
 <p>Cidade: Max de Almeida</p>
 <p>Ingresso: 17/05/2008</p>
 </li>
 <li>
 <a href="#"><img src="../imagens/Rugby_Positions.jpg" alt="a" /><img src="../imagens/Rugby_Positions.jpg" alt="o" class="preview" /></a>
 <p>Nome: Djonatan</p>
 <p>Altura: 1,89m</p>
 <p>Posição: Abertura</p>
 <p>Outras: 1º e 2º centro</p>
 <p>Cidade: Max de Almeida</p>
 <p>Ingresso: 17/05/2008</p>
 </li>
 </ul>
 </div>
</div>

Se acharem mais facil posso postar fotos ou colocar um link para testar a area