Problema ao crias "abas" no IE
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>Discussão (1)
Carregando comentários...