Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Katya_crisd

Problema ao crias "abas" no IE

Por , em Javascript

Recommended Posts

Katya_crisd    0

Katya_crisd
Postado

Pessoal, fiz um script pra criar uma espécie de abas, ele funciona 100% no firefox, mas no IE aparentemente quando crio uma nova aba parece que ele não aplica o CSS nela, ai fica tudo desconfigurado...

 

Fiz um botão pra pegar o código que o IE gera quando gero uma nova aba e aparentemente está tudo normal, tanto que quando copio o código gerado para um outro arquivo que tem o CSS ele aparece legal...

 

segue o código

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Abas</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
	function adicionar() {
		teste = document.createElement('td');
		teste.setAttribute('class',"menu");
		teste.setAttribute('width','75');
		
		var cellText = document.createTextNode("Conteudo");
		teste.appendChild(cellText);
		ctd = document.getElementById('conteudo');
		total = parseInt(ctd.getAttribute('colSpan'));
		total += 1;
		ctd.setAttribute('colSpan',total.toString());
				
		document.getElementById('menu').appendChild(teste);
	}
</script>
<style>
.menu {
background-color:#FFFFFF;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-top:1px solid #000000;
color:#000033;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
font-weight:normal;
padding:5px;
}
.menu-sel {
background-color:#CCCCCC;
border-right:1px solid #000000;
border-top:1px solid #000000;
color:#000033;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:10px;
font-weight:bold;
padding:5px;
}
.tb-conteudo {
border-right: 1px solid #000000;
border-bottom: 1px solid #000000;
}
</style>
</head>

<body>
<table width="726" height="133" border="0" cellpadding="0" cellspacing="0" style="border-left: 1px solid rgb(0, 0, 0);">
  <tr align="center" id="menu" > 
	<td width="75" height="24" class="menu-sel">Um</td>
		  <td width="75" class="menu">Dois</td>
		  <td width="75" class="menu">Três</td>
  </tr>
  <tr align="center"> 
	<td colspan="3" id="conteudo" class="tb-conteudo"> </td>
  </tr>
</table>
<p> 
  <input name="btnAba" type="button" id="btnAba" onClick="adicionar();" value="Criar nova aba">
</p>
<p>
  <input name="btnCodigo" type="button" id="btnCodigo" onClick="document.getElementById('codigoGerado').value = document.body.innerHTML;" value="Pegar código da página">
</p>
<p>Código gerado</p>
<p>
  <textarea name="codigoGerado" cols="60" rows="10" id="codigoGerado"></textarea>
</p>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

berkowitz    2

berkowitz
Postado

Olá Katya! tudo bem???

 

Bom... serei sincero: Não sei explicar tecnicamente o motivo, mas consegui resolver teu problema! AUHAUHuhaUH

Penso que o IE só consegue atribuir um estilo para um elemento já criado e já com algum valor setado também.

No teu caso você atribuía o class antes mesmo de inserir um conteúdo dentro do elemento criado, e imaginei que o motivo poderia ser esse.

 

Então fiz a seguinte mudança e funcionou:

1 - Exclua a linha teste.setAttribute('class',"menu");

2 - Inclua a linha teste.className = "menu"; logo após a linha teste.appendChild(cellText);

 

Qualquer coisa da um toque! :D

 

Beijos!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito