CSS e JQuery só não funciona no IE8

[Thiago Paschoalin 0]

Boa noite a todos, peguei um código ajax para galeria de imagens, editei quase que por completo seu visual e na finalização testei em 4 navegadores....

FireFox4, Opera 10.1, Chrome 11 e IE8.

 

Em todos funcionaram 100%, mas no IE8 'esculachou' tudo no css. Encontrei varias duvidas sobre isso, mas nada que tenha resolvido o meu problema.

Alguém sabe o motivo ?

 

Abaixo o CSS que o IE8 está ignorando:

 

.TGP_Linha1_100p{
position:absolute;
height:25px;
margin:5px 0 0 15px;
text-align:left;
float:left;
}
.TGP_EsqLinha2{
/* padding: 'top' 'right' 'base' 'left'; */
display:inline;
height:25px;
margin:30px 0 0 15px;
text-align:left;
float:left;
}
.TGP_CentroLinha2{
position:absolute;
height:25px;
width:100%;
/* padding: 'top' 'right' 'base' 'left'; */
margin:33px 0 0 0;
text-align:center;
float:center;
}
.TGP_DirLinha2{
display:inline;
height:25px;
margin:30px 15px 0 0;
text-align:right;
float:right;
}

 

E agora eu testando tudo... JQuery de duplicação de TR tb n~çao funciona no IE8... SOMENTE no IE8...

 

codigo JQuery:

 

<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$("a#add").click(function(){
	//Add mais uma tr
	$("table#tabelaimages").append('\
	<tr id="NovaImagemTR">\
	<td width="150" height="30" align="center"><a href="#" class="del"> REMOVER </a></td>\
	<td width="450"><input name="imagens[]" type="file" size="60"></td>\
	</tr>');
	setCount(); //Chama função que mostra quantidade de Uploads
	return false;// Return false para não atualizar a página
});

// DELETAR TR
$("table").delegate('a','click',function(){
	$(this).parent('td').parent('tr').remove();
	setCount();
});

// DELETAR TODAS AS TRs
$("a#delall").click(function(){
	//$("tr").not("#desc").remove();
	$("#tabelaimages tr").not("#fica").remove()
	setCount();
	return false;
});

// CONTADOR DE TRs
function setCount(){
	var n = $("#tabelaimages tr").size(); // Pega a quantidade de tr que existe no documento
	$("#count").text(n-1);
	// Mostrar no input id=contatordetr o contador atual
	$("#contatordetr").val(n-1);
}

});
</script>

 

 

Grato desde já por qualquer ajuda...

[_Leandro_ 0]

Não vi muito a fundo o problema, mas as tags TR TD não se comportam bem para aplicar alguns tipos de efeitos JQuery, pode ser isso, precisa ser em tabela, não podes usar uma lista?

 

Att

Leandro Rodeghiero

http://www.maisumpixel.com.br

[William Bruno 1501]

mude a sintaxe desse trecho:

 

                $("table#tabelaimages").append('<tr id="NovaImagemTR">'+
               '<td width="150" height="30" align="center"><a href="#" class="del"> REMOVER </a></td>'+
               '<td width="450"><input name="imagens[]" type="file" size="60"></td>'+
               '</tr>');

[Thiago Paschoalin 0]

Falai Leandro... com a ajuda do William, resolveu o problema do JQuery no IE8.... a propósito... Obrigado William...

 

 

Desculpem.. esqueci de publicar o código para visualizarem nos diferentes navegadores...

 

Vejam o Exemplo: Link Galeria JQuery+CSS

 

 

Agora e sobre o CSS ???

 

CSS:

.TGP_Linha1_100p{
position:absolute;
height:25px;
margin:5px 0 0 15px;
text-align:left;
float:left;
}
.TGP_EsqLinha2{
/* padding: 'top' 'right' 'base' 'left'; */
display:inline;
height:25px;
margin:30px 0 0 15px;
text-align:left;
float:left;
}
.TGP_CentroLinha2{
position:absolute;
height:25px;
width:100%;
/* padding: 'top' 'right' 'base' 'left'; */
margin:33px 0 0 0;
text-align:center;
float:center;
}
.TGP_DirLinha2{
display:inline;
height:25px;
margin:30px 15px 0 0;
text-align:right;
float:right;
}

 

JQuery:

$("#TB_window").append(""+
			"<div>"+
			"<div class='TGP_anterior' style='width:"+Div_Width+"; height:"+imageHeight+";'>"+TB_PrevHTML+"</div>"+
			"<div class='TGP_proximo' style='width:"+Div_Width+"; height:"+imageHeight+";'>"+TB_NextHTML+"</div>"+
			"<img id='TB_Image' src='"+url+"' width='"+imageWidth+"' height='"+imageHeight+"' alt='+caption+'/>"+
			"</div>"+
			"<div class='TGP_Linha1_100p'>"+ caption +"</div>"+
			"<div class='TGP_EsqLinha2'>Galeria: "+ imageGroup +"</div>"+
			"<div class='TGP_CentroLinha2'><a href='#' id='TB_closeWindowButton' class='del' title='Fechar'> Fechar Imagem </a></div>"+
			"<div class='TGP_DirLinha2'>Imagens: "+ TB_imageCount +"</div>"+
		"");	

 

Lembrando a class CSS só não funciona no IE !! hehe.. Abraços.