Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Pessoal,
Li um monte de artigos, dicas e etc... realmente tentei não postar esse tipo de dúvida. Mas como não consigo resolver esse bug, e esse é o meu primeiro projeto em tableless, então vamos lá.
O meu problema é com o posicionamento do container central (num layout 3 colunas), no IE. Se eu deixo as margens com 0px auto, ele fica por baixo da div da coluna da esquerda, bom então tentei setar um valor fixo, nesse caso 160px, fica centralizado, mas não fica colado no topo, e sim abaixo de tudo. No Firefox fica (aparentemente) perfeito das duas formas.
eis o html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><link href="css/css.css" rel="stylesheet" type="text/css" /></head><body><div id="site"> <div id="topo"> <div>logo</div> <div>menu</div> </div> <div id="conteudo"> <div id="esquerda"> <div>op1</div> <div>op2</div> <div>op3</div> <div>op4</div> <div>op5</div> <div>op6</div> <div>op7</div> <div>op8</div> </div> <div id="centro"> <div id="destaque"> <div>dest_1</div> <div>dest_2_3</div> <div>dest_2</div> <div>dest_3</div> </div> <div> <div>not_c_1</div> <div>not_c_2</div> </div> <div> <div>dest_4</div> <div>dest_5</div> <div>dest_6</div> <div>dest_7</div> <div>dest_8</div> <div>dest_9</div> </div> </div> <div id="direita"> <div>op1a</div> <div>op2a</div> <div>op3a</div> <div>op4a</div> <div>op5a</div> <div>op6a</div> </div> </div> <div id="rodape">rodape </div></div></body></html>
e o css
@charset "utf-8";/ CSS Document / { border: 1px solid #f00; } / borda para identificação */ @import url("reset.css");#site { margin: 0 auto; width: 790px; top: 0px; }#topo { margin: 0 auto; width: 740px; top: 0px; background-color:#CCCCCC;}#rodape { margin: 0 auto; width: 740px; background-color:#CCCCCC; bottom: auto;}#conteudo { margin: 0 auto; width: 740px; top: 0px; position:relative; }#esquerda { width: 140px; top: 0px; background-color:#FFFFCC; float:left;}#centro { width: 420px; margin: 0px auto; top: 0px; background-color: #99FFCC;}#direita { width: 140px; top: 0px; float: right; background-color:#FFFFCC; position: absolute; right:0px;}#destaque { top: 0px; background-color:#CC9900;}
Carregando comentários...
