Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Eva Morrissey

Problemas com float de camadas

Por , em Desenvolvimento frontend

Recommended Posts

Eva Morrissey    0

Eva Morrissey
Postado

Então, estou fazendo um theme para o Word Press.

No FF está tudo indo bem, porém, no IE, apesar do float estar declarado, fica uma camada sob a outra.

 

Onde errei? Já tentei um monte de coisas, mas não estou conseguindo ajeitar tudo no IE.

 

O site pode ser visto em

http://www.novasvisoes.com.br/teste

 

Segue o código

 

/* CSS Document */

#geral{ /* aninha todo o conteúdo do site */
width: 778px; /* largura da camada geral */
margin-top: 0px; /* espaço entre o topo da camada e o que vem logo acima */
}

#topo{
text-align: center;
background:  url(images/banner.jpg) no-repeat;
height: 360px;
}

#miolo{
width: 776px;
clear: both;
text-align: center;
}

#conteudo{ /* aninha tudo o que é publicado */
width: 540px; /* largura máxima do conteúdo */
float: left; /* joga a camada para a esquerda */
margin-top: 0px;
margin-right: 0px;
border: 1px solid #CCCCCC;
}

#direita{ /* aninha o menu do site */
width: 210px; /* largura máxima dos menus */
float: right; /* joga o menu para a direita */
margin-top: 0px; /* espaço entre o topo da camada e o que vem logo acima */
margin-left: 0px;
text-align: left;
}

#rodape{ /* aninha as informações de rodapé do site */
clear: both; /* manda manter ambos os lados da camada sem nada */
}

body{ /* determina as configurações da tag body */
margin-top: 0px; /* organiza o espaço entre o início do documento e o browser */
color: #FFFFFF; /* cor do texto geral */
background-color: #000000; /* cor do fundo do documento */
font-family: Arial, Helvetica, sans-serif; /* fonte geral do documento */
font-size: 13px; /* tamanho geral da fonte */
}

.titulos{ /* determina como ficarão os títulos dos menus */
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #000000;
font-weight: bold;
margin-top: 0px;
background-color: #A7945A;
margin-bottom: 2px;
clear: both;
}

/* início do menu 1*/
#menu{
float: right;
padding: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 2px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
word-spacing: 0em;
}

#menu ul{
list-style: none;
margin: 0px 0px;
padding: 0px;
}

#menu li{
border: 0px;
margin: 0px;
}

#menu li a{
display: block;
padding: 0px;
border: 0px;
color: #FFFFFF;
text-decoration: none;
font-size: 12px;
width: 100%;
text-align: left;
}

#menu li a:hover{
border: 0px;
color: #A7945A;
}
/* fim do menu 1 */

/* início do menu 2*/
#menu2{
float: right;
padding: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 2px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
word-spacing: 0em;
}

#menu2 ul{
list-style: none;
margin: 0px 0px;
padding: 0px;
}

#menu2 li{
border: 0px;
margin: 0px;
}

#menu2 li a{
display: block;
padding: 0px;
border: 0px;
color: #FFFFFF;
text-decoration: none;
font-size: 12px;
width: 100%;
text-align: left;
}

#menu2 li a:hover{
border: 0px;
color: #A7945A;
}
/* fim do menu 2 */

/* início do menu 3*/
#menu3{
float: right;
padding: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 2px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
word-spacing: 0em;
}

#menu3 ul{
list-style: none;
margin: 0px 0px;
padding: 0px;
}

#menu3 li{
border: 0px;
margin: 0px;
}

#menu3 li a{
display: block;
padding: 0px;
border: 0px;
color: #FFFFFF;
text-decoration: none;
font-size: 12px;
width: 100%;
text-align: left;
}

#menu3 li a:hover{
border: 0px;
color: #A7945A;
}
/* fim do menu 3 */

/* início do menu 4*/
#menu4{
float: right;
padding: 0px;
margin-left: 0px;
margin-top: 0px;
margin-bottom: 2px;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
list-style-type: none;
word-spacing: 0em;
}

#menu4 ul{
list-style: none;
margin: 0px 0px;
padding: 0px;
}

#menu4 li{
border: 0px;
margin: 0px;
}

#menu4 li a{
display: block;
padding: 0px;
border: 0px;
color: #FFFFFF;
text-decoration: none;
font-size: 12px;
width: 100%;
text-align: left;
}

#menu4 li a:hover{
border: 0px;
color: #A7945A;
}
/* fim do menu 4 */

/* início de campo de busca e seu botão */
#busca {
text-align: center;
}
.campodebusca {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
	background-color: #000000;
	border: 1px dotted #A7945A;
	text-align: left;
	margin-top: 0px;
	margin-right: 2px;
}
.botaodebusca{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	background-color: #A7945A;
	border: 1px dotted #000000;
	text-align: center;
	margin-top: 0px;
	margin-right: 0px;
	font-weight: bold;
}
/* fim do campo de busca e seu botão */

/* define a centralização da camada calendário, colaboradores e da leia mais */

#colaboradores {
text-align: center;
margin-top: 10px;
}

#leiamais {
text-align: center;
margin-top: 10px;
}
#calendario {
text-align: center;
margin-top: 10px;
}

/* fim da definição dessas sub-camadas */

/* camadas e classes que estão dentro do conteúdo */

#date{
width: 540px;
color: #A7945A;
text-align: left;
}

h1{
	width: 540px;
	color: #A7945A;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
}

#post { 
	width: 540px;
}

.titlepost {
	width: 540px;
	color: #A7945A;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}
.titlepost a {
	width: 540px;
	color: #A7945A;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	}
.titlepost a:hover{
	width: 540px;
	color: #A7945A;
	text-align: center;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
}

#meta {
text-align: left;
width: 540px;
}

#storycontent {
width: 540px;
text-align: justify;
}

#feedback {
text-align: left;
width: 540px;
}

#centralizarcontent {
text-align: left;
width: 540px;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Paulo de Tarso F. M.    24

Paulo de Tarso F. M.
Postado

Estranho... Quando acesso o link, ele realmente aparece "quebrado"... Porém, após salvar a página na minha máquina (e olha que nem foi pelo comando Salvar como..., porque senão ele modificaria todo o código), ele não mostra essa quebra no layout...

 

Testei no IE6...

 

Veja a imagem:

 

Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

tem coisas que é melhor fazer do zero, recomendo uma leitura nesse tutorial:

http://forum.imasters.com.br/index.php?showtopic=223799

 

eu tive um problema parecido e refiz meu layout 5 vezes até achar a maneira certa ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

RoXbY    3

RoXbY
Postado

normalmente quando funciona no FF e no IE não, é por que está extrapolando o width. Veja se definindo um tamanho menor para a div que entra do lado resolve..

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eva Morrissey    0

Eva Morrissey
Postado

Bem, é a sétima vez que refaço o layout. Cheguei até a escrever a estrutura em papel mesmo, e analisar longamente, mas sinceramente tem alguma coisa que está passando batido, pois eu simplesmente fui incapaz de resolver.

 

Já alterei inúmeras vezes, também, no width das duas camadas, para ver se elas se encaixavam, mas nada ainda.

 

Alguém tem alguma outra sugestão?

 

Alguém sabe o pq que quando se salva a página e tudo o mais, preservando os códigos, ela abre no IE aparentemente normal?

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito