Colunas dinâmicas não rodam no IE

Kanzen · Janeiro 5, 2011

Estou usando o seguinte código para fazer minhas colunas ficarem do mesmo tamanho independente de conteúdo

function dimensionarColunas(colunas) {
  maior = 0;

  for (i = 0; i < colunas.length; i++) {
     alturaReal = document.getElementById(colunas[i]).offsetHeight;

     if (alturaReal > maior) {
        maior = alturaReal;
     }
  }

  for (i = 0; i < colunas.length; i++) {
     document.getElementById(colunas[i]).style.height = maior + "px";
  }
}

e no HTML

<body onload="dimensionarColunas(['col1', 'col2'])">

Esta tudo funcionando perfeitamente no Firefox, Chrome, Safari e Opera

mas não no IE (estou com o 8), alguém tem alguma solução ou hack para isso?

William Bruno · Janeiro 5, 2011

resolva apenas com css cara

http://forum.imasters.com.br/index.php?/topic/309442-solucao-para-faux-columns-sem-usar-imagens/

Faux Columns

Kanzen · Janeiro 5, 2011

nao entendi direito como aplicar ao meu caso pq nao sao 3 colunas simples

na minha pagina eu tenho 3 colunas e dentro delas existem 3 divs sendo q só 1 das sub colunas de cada div tem conteudo dinamico

<div id='geral'>
<div id='col1'>
<div id='subcol1'></div>
<div id='subcol1'>CONTEUDO DINAMICO</div>
<div id='subcol1'></div>
</div>
<div id='col2'>
<div id='subcol2'></div>
<div id='subcol2'>CONTEUDO DINAMICO</div>
<div id='subcol2'></div>
</div>
<div id='col3'>
<div id='subcol3'></div>
<div id='subcol3'>CONTEUDO DINAMICO</div>
<div id='subcol3'></div>
</div>
</div>

Hj eu uso uma pequena modificação do código JS que eu postei para ficar tirando ou adicionando uns pixels referentes as outras sub-colunas q tem altura fixa

William Bruno · Janeiro 5, 2011

-> use aspas duplas para delimitar os valores dos atributos HTML

-> não repita IDs num documento, este deve ser um identificador único.

Você quer que cada coluna individualmente, tenha a altura nivelada pelas sub?

ou que as colunas 'pai', se nivelem entre si ?

poste uma imagem do layout, se você não conseguir fazer.

Kanzen · Janeiro 6, 2011

os identificadores já são diferentes =)

o codigo da pagina é o seguinte

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<title>Titulo</title>
<script type="application/javascript">
function dimensionarColunas(colunas) {
  maior = 0;
  for (i = 0; i < colunas.length; i++) {
     alturaReal = document.getElementById(colunas[i]).offsetHeight;
     if (alturaReal > maior) {
	  maior = alturaReal;
     }
  }

  for (i = 0; i < colunas.length; i++) {
   switch(i){
	   case 1:maior = maior-345; break;
	   case 2:maior = maior+85; break;
	   }
 document.getElementById(colunas[i]).style.height = maior + "px";
  }
}
</script>
<style>
a{
color:#FFF;
text-decoration:none;}
body{
background:#333;
color:#F60;
font-family: helv, Verdana, Arial, sans-serif;
font-weight:bold;
font-size:14px;}
#geral{
margin-left:auto;
margin-right:auto;
width:900px;}
#topo{
width:900px;
height:91px;}
#logo{
width:163px;
height:91px;
float:left;
border:0;}
#banner{
width:737px;
height:91px;
background:url(img/banner_topo.png);
float:left;}
#esq{
width:226px;
float:left;}
#perfil{
width:226px;
float:left;}
#perfil1{
width:206px;
float:left;
height:52px;
background:url(img/box_perfil_topo.png);
padding-top:25px;
padding-left:20px;
}
#perfil2{
width:181px;
float:left;
height:250px;
background:url(img/box_perfil_centro.png);
color:#FFF;
padding-left:45px;
}
#perfil3{
width:226px;
float:left;
height:41px;
background:url(img/box_perfil_baixo.png);}
#menu{
width:226px;
height:100%;
float:left;}
#menu1{
width:206px;
float:left;
height:62px;
background:url(img/box_menu_topo.png);
padding-top:10px;
padding-left:20px;}
#menu2{
width:181px;
min-height:305px;
float:left;
background:url(img/box_menu_centro.png);
font-size:11px;
padding-left:45px;
color:#FFF;}
#menu2 a{
color:#FFF;
text-decoration:none;}
#menu3{
width:226px;
float:left;
height:52px;
background:url(img/box_menu_baixo.png);}
#meio{
width:100px;
height:91px;
float:left;}
#meio2{
width:463px;
height:91px;
float:left;}
#titulo{
width:463px;
background:url(img/titulo_topo.png);
height:62px;}
#novidades{
width:463px;
float:left;}
#novidades1{
width:453px;
height:43px;
padding-top:10px;
padding-left:10px;
background:url(img/box_conteudo_topo.png);
float:left;}
#novidades2 a{ color:#F60;}
#novidades2 a:hover{ color:#FAAF25;}
#novidades2{
width:443px;
background:url(img/box_conteudo_centro.png);
padding-left:20px;
min-height:740px;
float:left;}
#novidades3{
width:463px;
height:32px;
background:url(img/box_conteudo_baixo.png);
float:left;}
#dir{
width:211px;
height:91px;
background:;
float:left;}
#calendario{
width:211px;
float:left;}
#calendario1{
width:196px;
height:63px;
background:url(img/box_calendario_topo.png);
padding-top:30px;
padding-left:15px;
float:left;}
#calendario2{
width:201px;
height:150px;
background:url(img/box_calendario_centro.png);
padding-left:10px;
float:left;}
#calendario3{
width:211px;
height:36px;
background:url(img/box_calendario_baixo.png);
float:left;}
#publicidade{
width:211px;
float:left;}
#publicidade1{
width:196px;
height:67px;
background:url(img/box_publicidade_topo.png);
padding-top:10px;
padding-left:15px;
float:left;}
#publicidade2{
width:191px;
background:url(img/box_publicidade_centro.png) repeat-y;
padding-left:20px;
float:left;}
#publicidade3{
width:211px;
height:52px;
background:url(img/box_publicidade_baixo.png);
float:left;}
.cor_laranja{
color:#F60;
font-size:12px;
font-weight:none;
margin-left:-15px;}
.logout{
color:#F60;
font-size:16px;
cursor:pointer;
text-align:center;
}
.logout:hover{
color:#FFF;
}
.pessoa1{
width:181px;
height:25px;
font-size:12px;}
.pessoa1-1{
width:91px;
float:left;}
.pessoa1-2{
float:right;
margin-right:10px;
width:80px;}
#pessoa2{
width:181px;
font-size:10px;
padding-top:10px;}
#pessoa2 img{
border:1px solid #F60;}
#pessoa2-1{
width:80px;
float:left;}
#pessoa2-2{
width:91px;
float:left;
margin-top:20px;
margin-left:10px;
height:97px;}
#pessoa3{
width:181px;
margin-top:130px;}
.centralizado{
margin-left: 80px;}
</style>
</head>
<?php
include('progress.php');
include('class_user.php');
$user = new user($_SESSION['id']);
?>
<body onload="dimensionarColunas(['novidades2', 'menu2', 'publicidade2'])">
<div id="geral">
<div id="topo">
<div id="logo"><a href="index.php"><img src="img/logo.png" width='163px' height='91px' border='0'/></a></div>
<div id="banner"></div>
</div>
<div id="esq">
<div id="perfil">
<div id="perfil1">PERFIL</div>
<div id="perfil2">
<div class="pessoa1"><div class="pessoa1-1"><?php echo $user->nome(); ?></div><div class="pessoa1-2"><a class="logout" href="index.php?pag=logout">LOGOUT</a></div></div>
<div id="pessoa2">
<div id="pessoa2-1"><img src="img/<?php echo $user->foto(); ?>" height="115" width="80"/></div>
<div id="pessoa2-2">
<a href="index.php?pag=entrada">Entrada ( <?php echo $user->entrada();?> )</a><br />
<a href="index.php?pag=enviar">Enviar recado</a></div></div>
<div id="pessoa3"><p>Administrador</p></div>
</div>
<div id="perfil3"></div>
</div>
<div id="menu">
<div id="menu1">MENU</div>
<div id="menu2">
<p><span class='cor_laranja'>> PAINEL</span><br />
<a href='index.php?pag=enviar'>Enviar mensagem</a><br/>
<a href='index.php?pag=alt_senha'>Alterar Senha</a>
<br />
<br />
CONTEÚDO DINÂMICO
</p>
</div>
<div id="menu3"></div>
</div>
</div>
<div id="meio2">
<div id="titulo"></div>
<div id="novidades">
<div id="novidades1"></div>
<div id="novidades2">CONTEÚDO DINÂMICO</div>
<div id="novidades3"></div>
</div>
</div>
<div id="dir">
<div id="calendario">
<div id="calendario1">CALENDÁRIO</div>
<div id="calendario2"> <?php include('agenda.php'); ?> </div>
<div id="calendario3"></div>
</div>
<div id="publicidade">
<div id="publicidade1">PUBLICIDADE</div>
<div id="publicidade2">CONTEÚDO DINÂMICO</div>
<div id="publicidade3"></div>
</div>
</div>
</div>
</body>
</html>

e o que eu preciso é q as divs novidades2 , menu2 e publicidade2 fiquem dinâmicas para o layout manter sempre o mesmo tamanho

Entrar

Arquivado

Colunas dinâmicas não rodam no IE

Recommended Posts

Kanzen 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kanzen 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Kanzen 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

printf iniciante básico

JAVA - Orientação para Invalidar Sessão

JAVA - Ajuda em Paginação

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante