Alinhamento DIV em IE

[vitinho.vitor 0]

Boa noite a todos !!

Estou com um pequeno probleminha no IE com alinhamento de uma só página, com o cabeçalho e o resto do texto.

Se puderem dar uma olhada, já quebrei a cabeça com isso!

a página é a própria index do site: http://www.distribuidorahipermarcas.com.br/novosite

O restante das páginas estão alinhadas corretamente.

 

Desde já agradeço,

Vitor

[@CiD Burn 0]

Olá,

 

você poderia postar o código pra gente poder dar uma olhada...

Caso você já tenha utilizado o "margin: 0 auto;" para centralizar o bloco de conteúdo*, sugiro você a dar uma olhada neste plugin http://plugins.jquery.com/project/elementcenter pode ser que ajude.

 

*lembrando que você deve ter uma largura declarada para que o conteúdo seja centralizado.

[vitinho.vitor 0]

Boa tarde,

Segue o código do cabeçalho:

<div id="cabecalho" align="center">
 <div id="login" align="center">
 <form method="post" action="http://www.distribuidorahipermarcas.com.br/painel/valida.php">
 <p class="log"><br />
   <i><font size="2">Portal do Representante:</font><br><br />
   <label><input class="correto" style="border:0px; height:25px;" type="text" name="usuario" size="20" value="Usuário" onfocus="this.value=''" /></label><br>
   <label><input class="correto" style="border:0px; height:25px; margin-top:2px;" type="password" name="senha" size="20" value="aaaaaaaaaa" onfocus="this.value=''" /></label><br>
   <input type="submit" value="" style="background-image:url('images/acessa.PNG'); color: white; border: 1px; width: 66px; height:21px;" />
   <br />
   <br />
</form>   
   </i>
   </p>
 </div>
 <div style="width:785px; text-align:right; margin:0 auto;" align="center">
 <button style="background-image:url('images/btn.png'); color: white; border: 1px; width: 66px; height:21px;"> </button>
 </div>
<script>
   $("button").click(function () {
     $("p.log").slideToggle("swing");
   });
</script>
 <img src="images/teste_logo2.png" width="780" border="0" style="margin:0 auto;" usemap="#Map">
 <map name="Map" id="Map">
   <area shape="poly" coords="146,182,208,173,212,197,150,206" href="index" alt="Home" />
   <area shape="poly" coords="226,170,350,162,349,184,231,193" href="empresa" alt="Empresa" />
   <area shape="poly" coords="406,160" href="#" />
   <area shape="poly" coords="509,156,374,156,374,182,506,180" href="representadas" alt="Representadas" />
   <area shape="poly" coords="531,153,672,169,663,191,528,178" href="representantes" alt="Representantes" />
   <area shape="poly" coords="696,172,770,192,759,217,691,198" href="contato" alt="Contato" />
 </map>
</div>

O CSS:

 #cabecalho {
   padding:0px;
   text-align:center;
   width:870px;
   border:0px solid black;
 }

 

Lembrando que é somente na index que o cabeçalho está desalinhado, no restante das páginas está tudo certo.

Acho que é algum elemento na index que está desalinhando.

 

Obrigado,

Vitor

[@CiD Burn 0]

Olhando seu código CSS, acredito que você vai solucionar seu problema pra alinhar ao centro incluindo no #cabecalho o "margin: 0 auto " e caso a div que você dentro (login) for menor que a largura da div cabeçalho você pode incluir novamente o margin 0 auto. Fiz um teste aqui e funcionou perfeitamente.

Outra coisa, sugiro a você que todos os elementos que você necessite "estilizar", procure centrar todas as essas propriedades em sua folha de estilos css utilizando um id(para conteudo especifico) ou classe(propriedades que podem ser reutilizadas).

Fazendo isso, seu código poderá ficar mais leve e organizando.

[vitinho.vitor 0]

Olá, eu tentei utilizar o margin:0 auto; no #cabecalho mas descobri que o problema na verdade esta na tabela que eu tenho abaixo do cabeçalho, ela esta ocupando um tamanho maior que a DIV por isso está empurrando. Então na verdade do cabeçalho está alinhado, o que está errado é o conteúdo.

Alguém sabe o que posso fazer para esta tabela ficar ajustada.

 

Obrigado, Vitor

[Evandro Oliveira 331]

comece por aqui: http://www.plasmadesign.com.br/stupidtables/everything.html

depois leia isto aqui: http://forum.imasters.com.br/topic/212439-como-criar-um-topico-para-o-seu-problema/page__view__getlastpost

[vitinho.vitor 0]

Boa tarde,

Minha ideia inicial não era utilizar tabelas para estes quadrados (segue código) porém não consegui espaçá-los igualmente como gostaria.

Alguém tem uma ideia?

Segue código atual:

 <table cellspacing="10" align="center" border="0" cellpadding="0">
   <tr>
     <td>
       <div class="bubbleInfo">
<div>
<img src="images/banner_tally.png" name="download" width="130" class="trigger" id="download">
</div>
<table id="dpop" class="popup">
<tbody><tr>
<td id="topleft" class="corner"></td>
<td class="top"></td>
<td id="topright" class="corner"></td>
</tr>

<tr>
<td class="left"></td>
<td><table class="popup-contents">
<tr><td><font size="2"><b>Tally Baby</b></font></td></tr>
<tr><td>Tally Baby Fraldas Descartáveis Infantis</td></tr>
<tr><td><a href="representadas#Tally Baby">Mais Detalhes</a></td></tr>
</table>
</td>
<td class="right"></td>    
</tr>
<tr>
<td class="corner" id="bottomleft"></td>
<td class="bottom"><img width="30" height="29" alt="popup tail" src="images/bubble-tail2.png"/></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody></table>
</div>
     </td>
     <td>
       <div class="bubbleInfo">
<div>
<img src="images/banner_emoly.png" width="130" id="download" class="trigger">
</div>
<table id="dpop" class="popup">
<tbody><tr>
<td id="topleft" class="corner"></td>
<td class="top"></td>
<td id="topright" class="corner"></td>
</tr>

<tr>
<td class="left"></td>
<td><table class="popup-contents">
<tr><td><font size="2"><b>Emoly</b></font></td></tr>
<tr><td>Emoly Cosméticos</td></tr>
<tr><td><a href="representadas#Emoly">Mais Detalhes</a></td></tr>
</table>
</td>
<td class="right"></td>    
</tr>
<tr>
<td class="corner" id="bottomleft"></td>
<td class="bottom"><img width="30" height="29" alt="popup tail" src="images/bubble-tail2.png"/></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody></table>
</div>
     </td>
     <td>
               <div class="bubbleInfo">
<div>
<img src="images/banner_soninho.png" width="130" id="download" class="trigger">
</div>
<table id="dpop" class="popup">
<tbody><tr>
<td id="topleft" class="corner"></td>
<td class="top"></td>
<td id="topright" class="corner"></td>
</tr>

<tr>
<td class="left"></td>
<td><table class="popup-contents">
<tr><td><font size="2"><b>Turma do Soninho</b></font></td></tr>
<tr><td>Carinho e Conforto que o seu bebê Merece!</td></tr>
<tr><td><a href="representadas#Soninho">Mais Detalhes</a></td></tr>
</table>
</td>
<td class="right"></td>    
</tr>
<tr>
<td class="corner" id="bottomleft"></td>
<td class="bottom"><img width="30" height="29" alt="popup tail" src="images/bubble-tail2.png"/></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody></table>
</div>
     </td>
           <td>
               <div class="bubbleInfo">
<div>
<img src="images/banner_copeli.png" width="130" id="download" class="trigger">
</div>
<table id="dpop" class="popup">
<tbody><tr>
<td id="topleft" class="corner"></td>
<td class="top"></td>
<td id="topright" class="corner"></td>
</tr>

<tr>
<td class="left"></td>
<td><table class="popup-contents">
<tr><td><font size="2"><b>Copeli</b></font></td></tr>
<tr><td>Arte em Cosméticos</td></tr>
<tr><td><a href="representadas#Copeli">Mais Detalhes</a></td></tr>
</table>
</td>
<td class="right"></td>    
</tr>
<tr>
<td class="corner" id="bottomleft"></td>
<td class="bottom"><img width="30" height="29" alt="popup tail" src="images/bubble-tail2.png"/></td>
<td id="bottomright" class="corner"></td>
</tr>
</tbody></table>
</div>
     </td>
   </tr>
 </table>

 

Gostaria de um visual assim: http://www.distribuidorahipermarcas.com.br/novosite

utilizando apenas DIVs para estes banners.

 

Muito Obrigado,

Vitor

 

 

P.S.:

Estas DIVs popup eu as peguei pronta então acredito que uma parte das tabelas deve continuar.