Tenho uma página onde montei duas colunas, usando float:left e float right, o que acontece é que de vez em quando o Firefox não renderiza corretamente, e se dou um F5 a página fica alinhada.
No IE e Oppera não ocorre isso, sempre mostram as páginas alinhadas. No link ( http://www.arashiro....alinhamento.jpg )dá pra ver o que acontece, o texto da coluna direita vai pra baixo ao invés de ficar alinhado em cima.
Já busquei usar vertical-align:top nas colunas ou mesmo na div principal da página, diminuí as colunas para ver se não era algum padding ou margin q havia deixado a mais na largura, tentei tb usar float:left nas duas,
coloquei e tirei o display:table do fundo e das colunas...
a única maneira q achei pra renderizar sempre certo foi usando position. Alguém tem alguma idéia do que pode estar acontecendo?
valeu!
Quem quiser dar uma navegada: http://www.arashiro....rogramacao.html
body{
margin:0px;
padding:0px;
background-color:#00123A; background-image:url(layout/background.jpg); background-position:top; background-repeat:repeat-x;
font-family:Verdana, sans-serif;
font-size:11px;
color:#00123A;
}
#all{
width:740px;
margin:0px auto; margin-top:40px;
border-style:solid; border-width:5px; border-color:#FFFFFF;
background-color:#FFF;
display:table;
}
#topo{
width:100%;
background-image: url(cursos/imagens/degrade_topo.gif);
background-position:top;
background-repeat:repeat-x;
background-color:#003371;
display:table;
clear:both;
height:88px;
}
#logotipo{
width:355px;
height:87px;
float:left;
padding:15px 0px 0px 10px;
}
#logotipo2{
width:330px;
float:right;
text-align:right;
}
#smarcos{
height:52px;
padding: 10px 15px 7px 0px;
margin:0px;
}
#abas{
height:34px;
padding: 5px 10px 0px 0px;
margin:0px;
}
#box_areas{
width:100%; height:250px;
background-color:#EBEBEB; background-image:url(layout/background_box.jpg); background-position:top; background-repeat:repeat-x;
display:table;
padding-bottom:15px;
}
#box_cursos{
width:330px;
float:right;
padding-left:10px;
margin-bottom:30px;
}
#box_forum{
width:330px;
float:left;
padding-left:10px;
margin-bottom:30px;
}
#conteudo{
padding:30px 10px 10px 10px;
margin:0px;
background-image:url(layout/degrade_conteudo.jpg); background-position:top; background-repeat:repeat-x;
display:table;
width:720px;
}
#rodape_logotipos{
width:100%;
height:50px;
background-color:#E3E3E3;
border-top: 1px solid #D7D7D7;
cleat:both;
}
#rodape{
width:750px;
margin:0px auto;
padding-top:5px;
text-align:center;
font-size:10px; color:#393658;
}
#menu{
height:36px;
background-image:url(imagens/degrade_menu.gif);
background-position:top;
background-repeat:repeat-x;
background-color:#FFF;
clear:both;
}
#menu ul{
padding:14px 0px 0px 0px;
float:right;
width:600px;
text-transform: uppercase;
}
#menu li{
list-style:none;
display:inline;
text-transform: uppercase;
color:#00123A;
}
#menu li a{
text-decoration:none;
color:#00123A;
}
#menu li a:hover{
text-decoration:underline;
color:#000;
text-transform: uppercase;
}
#submenu{
height:15px;
font-size:10px;
font-family:Tahoma,sans-serif;
text-transform:uppercase;
text-align:right;
padding-right:10px;
background-color:#EBEBEB;
border-top:2px solid #D7D5E4;
color:#00123A;
}
#submenu ul{
list-style:none;
}
#submenu li{
display:inline;
}
#submenu li a{
color:#00123A;
text-decoration:none;
}
#submenu li a:hover{
color:#000;
text-decoration:underline;
}
#titulos{width:100%;}
#conteudo_conselho2{
padding:30px 10px 30px 10px;
margin:0px;
background-image:url(../layout/degrade_conteudo2.jpg); background-position:top; background-repeat:repeat-x;
}
#coluna_esquerda{
padding-bottom:30px;
width:345px;
float:left;
}
#coluna_direita{
padding-bottom:30px;
margin-left:20px;
width:345px;
float:right;
}
Edição feita por: PC Arashiro, 06/07/2006, 02:29.
