Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;
}/ 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;
}/ 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;
}/ 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;
}/ 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;
}/ 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;
} width: 540px;
color: #A7945A;
text-align: center;
font-size: 14px;
font-weight: bold;
text-decoration: none;
} 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;
}Absolutamente estranho, e o pior é que não encontro solução para isso!
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 ;)
também já me aconteceu isso...
tipo, não precisa refazer tudo...
vai colocando no CSS parte por parte...
até você achar onde ta o erro!
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..
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?
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:
/applications/core/interface/imageproxy/imageproxy.php?img=http://br.geocities.com/fan_capital_inicial/showtopic269712.jpg&key=e92b0e3773fa21a5f2f4764befc3ee1b217b032fd5787837a5dc1f69b9f16056" alt="Imagem Postada" />