Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa tarde pessoal.
Infelizmente, um dos meus clientes ainda usa o IE6 e o site que eu fiz não está funcionando corretamente nele. Na época que eu fiz eu nem me preocupei em testar nesse navegador (certo, erro meu).
Agora estou com problemas para concertar a centralização de uma div no ie6, será que alguém pode me ajudar?
No caso, a div que deve estar centralizada é a div que contém o conteúdo de texto e as fotos a div#conteudo
A renderização do site no ie6 eu visualizei através do netrenderer.
O endereço da página é http://www.propagare.net/maconaria/historico.html
E o html:
<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Loja Danylo José Fernandes</title>
<link rel="stylesheet" href="index_teste.css" />
</head>
<body>
<div id="header"><div id="logo"><img border="0px" src="imagens/logo_final_ver.jpg" alt="Danylo José Fernandes" /></div><div id="restrito">
<p>Área Restrita</p>
<ul>
<li><a class="restrito" href="membros1.html">Aprendizes</a></li>
<li><a class="restrito" href="membros2.html">Companheiros</a></li>
<li><a class="restrito" href="membros3.html">Mestres</a></li>
</ul>
</div>
<div id="menu">
<ul>
<li><a class="ativo" href="#">Home</a></li>
<li><a class="menu" href="historico.html">Histórico</a></li>
<li><a class="menu" href="migalhas.html">Migalhas</a></li>
<li><a class="menu" href="links.html">Links</a></li>
<li><a class="menu" href="projetos.html">Projetos</a></li>
<li><a class="menu" href="curriculuns.html">Curriculuns</a></li>
<li><a class="menu" href="contato.html">Contato</a></li>
</ul>
</div>
</div>
<div id="sub_header"><div id="img"><img border="0px" src="imagens/testeira.jpg" alt="Danylo José Fernandes" /></div>
</div>
<div id="conteudo">
<div id="texto">
<p class="titulo">About Us</p>
<p class="texto">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ultricies scelerisque lacinia. Praesent convallis cursus massa, dictum luctus dolor scelerisque quis. Nulla non eros neque, pharetra vehicula lacus. Integer at sapien neque, et condimentum turpis. Etiam at nunc gravida arcu venenatis vulputate. Nulla condimentum eros quis eros pulvinar tristique. Mauris a leo sit amet augue dapibus venenatis. Donec ut turpis egestas turpis varius sollicitudin nec eget erat. Quisque egestas vehicula orci at ultrices. Donec sodales, dui consequat porta dictum, velit lectus scelerisque urna, eget tempor purus nisl et massa. Cras vestibulum dui tellus, quis blandit velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis molestie, ante nec faucibus ultrices, tortor erat adipiscing felis, et fringilla enim turpis id nunc.</p>
<p class="sub_titulo">Sed porttitor lacinia lobortis.</p>
<p class="texto">Vestibulum interdum rutrum libero id tincidunt. Sed condimentum auctor leo at pulvinar. Sed egestas facilisis augue. Nulla faucibus elit id sem pellentesque blandit. Nunc eget orci odio. Nullam iaculis, sem vitae tincidunt lobortis, nibh urna rutrum dui, id ultrices nibh massa vitae metus. Praesent neque tortor, pulvinar sit amet elementum a, consectetur quis orci. Sed pharetra, orci eu laoreet facilisis, eros est porttitor arcu, volutpat interdum enim risus et erat. Nam lobortis placerat hendrerit. Curabitur ullamcorper mauris ut mi fermentum laoreet. Vestibulum tincidunt lacus diam. Donec quis augue leo. Sed molestie, erat non adipiscing lobortis, purus turpis elementum nisi, quis rutrum mauris libero quis magna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p></div>
<div id="legenda"><img border="0px" align="right" src="imagens/entrada.jpg" alt="Danylo José Fernandes" /></div>
</div>
<div id="rodape"></div>
</body>
</html>E o css:
@charset "utf-8";
/ CSS Document /
*{
margin:0px;
padding:0px;
}body{
background-color:#FFF;
}
#header{
position:relative;
width:100%;
height:192px;
float:left;
background-color:#5d0000;
background-image:url(imagens/barra_2.jpg);
background-repeat:repeat-x;
background-position:bottom;
}
#restrito{
position:absolute;
width:214px;
height:140px;
left:50%;
top:0px;
margin-left:141px;
}#restrito p{
padding-top:25px;
text-align:right;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#fff;
}#restrito ul{
list-style-type:none;
text-align:right;
line-height:150%;
padding-top:5px;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}a.restrito{
text-decoration:none;
color:#ed1c24;
}a:hover.restrito{
text-decoration:none;
color:#ffffff;
}p.area{
font:Arial, Helvetica, sans-serif;
font-size:14px;
color:#000;
}
#menu{
position:absolute;
width:714px;
height:37px;
top:100%;
left:50%;
margin-left:-357px;
margin-top:-45px;
border-left:1px solid #ffffff;
}#menu ul{
list-style-type:none;
}#menu li{
float:left;
}a.menu{
text-decoration:none;
display:block;
width:101px;
height:37px;
background-color:#94070a;
border-right:1px solid #ffffff;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
text-align:center;
line-height:250%;
}a.ativo{
text-decoration:none;
display:block;
width:101px;
height:37px;
background-color:#3f0000;
border-right:1px solid #ffffff;
color:#FFF;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
text-align:center;
line-height:250%;
}a:hover.menu{
display:block;
background-color:#3f0000;
}
#sub_header{
position:relative;
width:100%;
height:176px;
float:left;
clear:both;
background-color:#0a0404;
}
#geral{
position:absolute;
width:716px;
height:auto;
left:50%;
margin-left:-358px;
background-color:#6FF;
}
#logo{
position:absolute;
width:714px;
left:50%;
margin-left:-357px;
}
#img{
position:absolute;
width:714px;
left:50%;
margin-left:-357px;
}
#conteudo{
position:relative;
float:left;
clear:both;
left:50%;
margin-left:-357px;
width:714px;
height:auto;
padding-bottom:40px;
}
#texto{
position:relative;
width:344px;
height:auto;
float:left;
padding-top:15px;
padding-right:20px;
}
#legenda{
position:relative;
width:350px;
height:auto;
float:left;
padding-top:40px;
text-align:center;
}
.form{
position:relative;
width:284px;
height:auto;
float:left;
padding-top:40px;
text-align:center;
}
.post{
position:relative;
width:400px;
height:auto;
float:left;
padding-top:15px;
padding-right:20px;
}p.titulo{
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
line-height:250%;
}p.sub_titulo{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
padding-bottom:5px;
}p.texto{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}
#regular{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:normal;
}a.vitae{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
text-decoration:none;
color:#000;
}div.curriculum{
position:relative;
float:left;
clear:right;
height:128px;
width:310px;
padding-left:30px;
padding-top:35px;
background-image:url(imagens/postit.jpg);
background-repeat:no-repeat;
margin-bottom:10px;
}
#rodape{
position:relative;
float:left;
width:100%;
height:40px;
background-color:#5d0000;
}Agradeço quem puder ajudar.
Abs.
Boa tarde,
Troque o seu CSS #conteudo por esse abaixo e seja feliz !
#conteudo{
position:relative;
margin: 0 auto;
width:714px;
height:auto;
padding-bottom:40px;
border:1px solid #FF0000;
}
tenta trocar o
margin-left: -357px;
por
margin: 0 auto;
no #conteudo