Ir para conteúdo
Fórum Script Brasil
  • 0

Bug De Posicionamento De Divs No Ie

Guest Visitante

Perguntado por Guest Visitante,

 Share

Pergunta

Guest Visitante

Guest Visitante

Postado
Postado

Página de exemplo: www.felipesander.com/teste/index.htm

Arquivo CSS: www.felipesander.com/teste/estilo.css

No Firefox funciona beleza, mas no IEca ele repete a coluna da direita abaixo da coluna principal, não sei mais como resolver isso.

Alguém poderia me explicar porque isso acontece?

Link para o comentário
Compartilhar em outros sites

10 respostass a esta questão

Posts Recomendados

  • 0
kuroi

kuroi

Postado
Postado

não sei o que houve no fórum, mas não estava conseguindo inserir o conteúdo da pergunta, mas está aí em cima, quem puder me explicar como resolver este bug eu agradeço.

O amon-ra beraldo já teve esse mesmo problema mas não achei o tópico em que ele falava sobre isso (e falava a solucao), troca uma ideia com ele.

Página de exemplo: www.felipesander.com/teste/index.htm

Arquivo CSS: www.felipesander.com/teste/estilo.css

No Firefox funciona beleza, mas no IEca ele repete a coluna da direita abaixo da coluna principal, não sei mais como resolver isso.

Alguém poderia me explicar porque isso acontece?

está estranho mesmo, porque você poe uma barra no final do br (<br />)? nunca vi isso, isso é normal??

Link para o comentário
Compartilhar em outros sites
  • 0
::..Hunter..::

::..Hunter..::

Postado
Postado

está estranho mesmo, porque você poe uma barra no final do br (<br />)? nunca vi isso, isso é normal??

a barra no final é pra validar no xhtml. Dê uma lida sobre elementos vazios AQUI.

Agora quanto ao meu código, aí vai:

index.htm

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<title>Teste!</title>

<!-- meta information for search engines -->
<meta http-equiv="Content-Type"  content="application/xhtml+xml; charset=iso-8859-1" />
<meta name="keywords" content="teste, teste" />
<meta name="description" content="teste!" />
<meta name="robots" content="ALL" />
<meta name="author" content="Felipe Vieira Sander" />
<meta name="language" content="pt-br" />

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>

<body>
<div id="tudo">

<!-- INICIO: TOPO-LOGO -->
<div id="topo">Topo</div>
<!-- FINAL: TOPO-LOGO -->

<!-- INICIO: TOPO-MENU -->
<div id="topnav">
<ul>
<li><a href="#" class="mainlevel">Home</a></li>
<li><a href="#" class="mainlevel">Notícias</a></li>
<li><a href="#" class="mainlevel">Downloads</a></li>
<li><a href="#" class="mainlevel">A Cidade</a></li>
<li><a href="#" class="mainlevel">Forum</a></li>
<li><a href="#" class="mainlevel">Wiki</a></li>
</ul>
</div>
<!-- FINAL: TOPO-MENU -->

<!-- INICIO: COLUNA ESQUERDA -->
<div id="esquerdo">
<div class="content">
<h3>Esquerda</h3>
    <ul>
    <li><a href="#">Link</a></li>
    </ul>
</div>
</div>
<!-- FINAL: COLUNA ESQUERDA -->

<!-- INICIO: COLUNA PRINCIPAL -->
<div id="principal">
<div class="content">
     nononononononononono<br />
     nononononononononono<br />
     nononononononononono<br />
     nononononononononono<br />
     nononononononononono<br />
     nononononononononono<br />
     nononononononononono<br />
</div>
</div>

<!-- FINAL: COLUNA PRINCIPAL -->

<!-- INICIO: COLUNA DIREITA -->
<div id="direito">
     <div class="content" style="border: 1px solid red">
          Coluna da Direita1<br />
          Coluna da Direita2<br />
          Coluna da Direita3<br />
          Coluna da Direita4<br />
          Coluna da Direita5<br />
     </div>
     <br /> <!-- hack para IEca, mas não funcionou -->
</div>
<!-- FINAL: COLUNA DIREITA -->

<!-- INICIO: RODAPE -->
<div id="rodape">
  Rodapé
</div>
<!-- FINAL: RODAPE -->

</div>
</body>
</html>
estilo.css 
/* Estilos da estrutura */
*, html, body {
    margin:0;
    padding:0;
    }
body {
    margin:0;
    padding:0;
    border:none;
    font: 11px/1.5 Tahoma, Arial, Helvetica, sans-serif;
    background:silver;
    color:#353535;
    text-align:center;
    }
#tudo {
    width:779px;     
    margin:0 auto;
    padding:0;
    text-align:left;
    background: white;
    color: #353535;
    }
#topo {
    position:relative;
    background: url(topo.jpg) no-repeat 0 0; 
    height:113px;
    }
#rodape {
    clear:both;
    height:auto;
    text-align:center;
    border-top:1px solid #999;
    font-size:9px;
    background:white;
    color:#353535;
    padding: 5px;
    }
img {
    border: 0;
    }

/* Estilos para template de 3 colunas */
#principal {
    float:left;
    width:469px;
    background: #ffcc00;
    text-align:left;
    }
#esquerdo {
    float:left;
    width:160px;
    }
#direito {
    width:150px;
    float:right;
    background: #f5f5f5;
    }

/* Estilos para as notícias */
#principal a:link, a:visited {
    text-decoration: none; color: #039;
    }
#principal a:hover {
    text-decoration: underline; color: #024aa6;    
    }

/* Estilos content */
.content {
    padding:5px;
    border: 1px solid black;
    }

/* Estilos outros */
#esquerdo ul, ol {
    margin:0;
    padding:0;
    list-style:none;
    }
#esquerdo li {
    border-bottom: 1px solid silver;
    padding-bottom: 2px;
    }
#esquerdo h1, h2, h3 {
    margin:0.8em 0 0.4em 0;
    color:#039;
    font-size:1.4em;
    border-bottom: 1px solid #039;
    }
#esquerdo h2 {
    font-size:1.2em;
    }
#esquerdo h3 {
    font-size:1.0em;
    }
#esquerdo a:link, a:visited {
    text-decoration: none; color: #000;
    }
#esquerdo a:hover {
    text-decoration: underline; color: #039;
    }    
.dest {
    color:#039;
    }

#topnav {
    border-top: 1px solid #1A5CB1;
    padding: 3px 0;
    background: url(navbar-bg.gif) repeat-x top #024AA6;
    text-align: left;
}    
#topnav a {
    border-right: 1px solid #1A5CB1;
    padding: 6px 12px 5px 12px;
    color: white;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
}

#topnav a:hover, #topnav a:active {
    color: #ffff00;
    text-decoration: none;
}

#topnav li {
    padding: 0;
    display: inline;
    background: none;
}

#topnav ul, #footer ul {
    margin: 0;
    padding: 0;
}

ul#mainlevel li, ul#mainlevel-nav li {
    padding: 0;
    margin: 0;
    background: none;
}

#pathway {
    margin: 0;
    padding: 3px 5px;
    background: url(subnav_bg.gif) #024AA6;
    color: #222222;
    font-size: 11px;
}

#pathway a {
    color: #666666;
    text-decoration: none;
}

#pathway a:hover, #pathway a:active {
    color: #222222;
    text-decoration: underline;
}

#pathway img {
    visibility: hidden; /* DO NOT SHOW PATHWAY DEFAULT ARROW */
}

Link para o comentário
Compartilhar em outros sites
  • 0
kuroi

kuroi

Postado
Postado

a barra no final é pra validar no xhtml. Dê uma lida sobre elementos vazios AQUI.

a está, é que eu aprendi a nunca usar br.

quanto ao seu problema, tenta tirar essa linha:

<div id="direito">
     <div class="content" style="border: 1px solid red">
          Coluna da Direita1<br />
          Coluna da Direita2<br />
          Coluna da Direita3<br />
          Coluna da Direita4<br />
          Coluna da Direita5<br />
     </div>
 Tira esse br daqui e tenta -->     <br /> <!-- hack para IEca, mas não funcionou -->
</div>[/code]
a esta é foda, meu ainda so 100% contra esse corretor do forum, p*** que pariu
Link para o comentário
Compartilhar em outros sites
  • 0
Guest Visitante

Guest Visitante

Postado
Postado

Hunter,

resolvi seu problema

é o seguinte:

Você colocando 5px de padding (espaçamento) no .content, e 150px no #direito, passa o limite de 'width' (largura) da div que engloba, #tudo.

o que você tem que fazer é isto:

#direito {

width:140px;

float:right;

background: #f5f5f5;

}

140px no lugar de 150px. Por quê?

padding left + padding right: 10px, 10px + 150px = 160px xD

passa o limite. Comigo deu certo.

testa aí.

Link para o comentário
Compartilhar em outros sites
  • 0
::..Hunter..::

::..Hunter..::

Postado
Postado

Hunter,

resolvi seu problema

é o seguinte:

Você colocando 5px de padding (espaçamento) no .content, e 150px no #direito, passa o limite de 'width' (largura) da div que engloba, #tudo.

o que você tem que fazer é isto:

#direito {

width:140px;

float:right;

background: #f5f5f5;

}

140px no lugar de 150px. Por quê?

padding left + padding right: 10px, 10px + 150px = 160px xD

passa o limite. Comigo deu certo.

testa aí.

mas o padding é o espaçamento que vai DENTRO da div, e margin é o espaçamento que vai por FORA da div, ou seja, o padding não deveria influenciar na largura da div, apenas ficaria menos espaço dentro, correto?

E mesmo que eu tire a div content de dentro da direita a maldita continua duplicando.

quanto a aquele suporto hack que botei no final da div direita foi uma sugestão de outra pessoa, mas não deu certo também.

está difícil.

Link para o comentário
Compartilhar em outros sites
  • 0
kuroi

kuroi

Postado
Postado

tenta assim:

        <div style="padding: 5px 5px 5px 0;" id="direito">
             <div class="content" style="border: 1px solid red;">
                  Coluna da Direita1<br />
                  Coluna da Direita2<br />
                  Coluna da Direita3<br />
                  Coluna da Direita4<br />
                  Coluna da Direita5<br />
             </div>
        </div>[/code]
por algum motivo, da esse pau se você poe o padding-left. acho que acontece o que o cara ai em cima falou, ele passa do tamanho, mas o padding-left não é necessario já que ele esta com float right. vê que aqui deu certo.
Link para o comentário
Compartilhar em outros sites
  • 0
::..Hunter..::

::..Hunter..::

Postado
Postado

arrumei, mas não sei porque o padding está agindo na largura das divs, tipo a coluna da esquerda que quero com 160px tive que botar 150px e padding 5px, o que faz ele ficar do tamanho final com 160px, vai entender porque. :angry:

estilo.css

/* Estilos da estrutura */
*, html, body {
    margin:0;
    padding:0;
    }
body {
    margin:0;
    padding:0;
    border:none;
    font: 11px/1.5 verdana, Arial, Helvetica, sans-serif;
    background:silver;
    color:#353535;
    text-align:center;
    }
#tudo {
    width:779px;     
    margin:0 auto;
    padding:0;
    text-align:left;
    background: white;
    color: #353535;
    }
#topo {
    position:relative;
    background: url(topo.jpg) no-repeat 0 0; 
    height:113px;
    }
#rodape {
    clear:both;
    height:auto;
    text-align:center;
    border-top:1px solid #999;
    font-size:9px;
    background:white;
    color:#353535;
    padding: 5px;
    }

/* Estilos para template de 3 colunas */
#principal {
    float:left;
    margin-left: 5px;    
    width:458px;
    text-align:left;
    padding: 5px 0;
    }
#esquerdo {
    float:left;
    width:150px;
    background: #f36;
    padding: 5px;
    }
#direito {
    width:140px;
    float:right;
    background: #ff0;
    padding: 5px;
    }

#topnav {
    border-top: 1px solid #1A5CB1;
    padding: 3px 0;
    background: url(navbar-bg.gif) repeat-x top #024AA6;
    text-align: left;
}    
#topnav a {
    border-right: 1px solid #1A5CB1;
    padding: 6px 12px 5px 12px;
    color: white;
    font-size: 11px;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
}

#topnav a:hover, #topnav a:active {
    color: #ffff00;
    text-decoration: none;
}

#topnav li {
    padding: 0;
    display: inline;
    background: none;
}

#topnav ul, #footer ul {
    margin: 0;
    padding: 0;
}

ul#mainlevel li, ul#mainlevel-nav li {
    padding: 0;
    margin: 0;
    background: none;
}
index.htm 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">
<head>
<title>Teste!</title>

<!-- meta information for search engines -->
<meta http-equiv="Content-Type"  content="application/xhtml+xml; charset=iso-8859-1" />
<meta name="keywords" content="teste, teste" />
<meta name="description" content="teste!" />
<meta name="robots" content="ALL" />
<meta name="author" content="Felipe Vieira Sander" />
<meta name="language" content="pt-br" />

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="estilo.css" />
</head>

<body>
<div id="tudo">

<!-- INICIO: TOPO-LOGO -->
<div id="topo">Topo</div>
<!-- FINAL: TOPO-LOGO -->

<!-- INICIO: TOPO-MENU -->
<div id="topnav">
<ul>
<li><a href="#" class="mainlevel">Home</a></li>
<li><a href="#" class="mainlevel">Not&Iacute;cias</a></li>
<li><a href="#" class="mainlevel">Downloads</a></li>
<li><a href="#" class="mainlevel">A Cidade</a></li>
<li><a href="#" class="mainlevel">Forum</a></li>
<li><a href="#" class="mainlevel">Wiki</a></li>
</ul>
</div>
<!-- FINAL: TOPO-MENU -->

<!-- INICIO: COLUNA ESQUERDA -->
<div id="esquerdo">
Coluna da Esquerda1<br />
Coluna da Esquerda2<br />
Coluna da Esquerda3<br />
Coluna da Esquerda4<br />
Coluna da Esquerda5<br />
</div>
<!-- FINAL: COLUNA ESQUERDA -->

<!-- INICIO: COLUNA PRINCIPAL -->
<div id="principal">
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi eleifend, purus quis laoreet faucibus, ante augue malesuada mi, id rhoncus augue lorem eget elit. Ut sollicitudin sodales purus. Phasellus libero felis, blandit nec, commodo ut, imperdiet ut, nibh. Suspendisse potenti. Donec ullamcorper cursus dolor. Duis vitae ipsum. Maecenas dapibus hendrerit diam. Morbi varius, massa id pretium accumsan, nunc lorem congue libero, ut euismod metus libero id nulla. Duis posuere odio sed velit vulputate venenatis. Suspendisse et dui ac metus auctor fringilla. Curabitur interdum augue a pede.
  Curabitur hendrerit erat ut augue. </p>
     <p>Cras gravida. Mauris consequat aliquam leo. Aenean non tortor id metus aliquet consectetuer. Quisque sodales lectus ac orci. Donec eleifend fringilla mi. Vivamus vel massa. Aenean interdum pellentesque sem. Nulla pellentesque felis et tortor. Duis cursus, dui non dictum tincidunt, wisi ipsum mollis wisi, nec ornare velit ipsum eget enim. In sed felis. Phasellus condimentum sodales nulla. Etiam orci leo, rutrum malesuada, congue vel, fringilla vitae, lorem. Pellentesque ligula. </p>
</div>
<!-- FINAL: COLUNA PRINCIPAL -->

<!-- INICIO: COLUNA DIREITA -->
<div id="direito">
    Coluna da Direita1<br />
    Coluna da Direita2<br />
    Coluna da Direita3<br />
    Coluna da Direita4<br />
    Coluna da Direita5<br />

</div>
<!-- FINAL: COLUNA DIREITA -->

<!-- INICIO: RODAPE -->
<div id="rodape">
  Rodapé
</div>
<!-- FINAL: RODAPE -->
</div>
</body>
</html>

Link para o comentário
Compartilhar em outros sites
Visitante
Este tópico está impedido de receber novos posts.
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,2k
    • Posts
      651,9k
×
×
  • Criar Novo...