Assine:
[dica] Background + Float No Ie
Ie não mostra imagem de background...
Escrito por Evaldo em WebStandards e CSS. Data: 03/03/2008
Licença: Alguns direitos reservados. Dar créditos ao autor e linkar este original
Essa eu tenho que compartilhar de tão simples e estúpida que é.....
No meu layout, fiz um contorno sombreado na página, bem clichê
Percebi que o IE não mostrava a imagem do rodapé, e fui buscar soluções. Descobri que o IE não trabalha bem com float e o clear, quando usados, ele não mostra o background.
Aparentemente tudo certo, funciona no FF e no Opera, já no IE
A solução:
Perceberam a diferença? É tão simples e tão estúpida que aposto que a maioria não viu.... mas basta dar um espaço na declaração, ou se seja, background: espaço url(imagem) espaço no-repeat;
Espero que ajude mais pessoas.
Abraços
No meu layout, fiz um contorno sombreado na página, bem clichê
Percebi que o IE não mostrava a imagem do rodapé, e fui buscar soluções. Descobri que o IE não trabalha bem com float e o clear, quando usados, ele não mostra o background.
CODE
#parceiros {
position:relative;
float:right;
margin:0 10px 0 10px;
}
#rodape {
position:relative;
width:1000px;
height:25px;
background:url(../img/bkgrodape.png) no-repeat;
text-align:center;
font-size:10px;
color:#666666;
clear:both;
}
position:relative;
float:right;
margin:0 10px 0 10px;
}
#rodape {
position:relative;
width:1000px;
height:25px;
background:url(../img/bkgrodape.png) no-repeat;
text-align:center;
font-size:10px;
color:#666666;
clear:both;
}
Aparentemente tudo certo, funciona no FF e no Opera, já no IE
A solução:
CODE
#parceiros {
position:relative;
float:right;
margin:0 10px 0 10px;
}
#rodape {
position:relative;
width:1000px;
height:25px;
background: url(../img/bkgrodape.png) no-repeat;
text-align:center;
font-size:10px;
color:#666666;
clear:both;
}
position:relative;
float:right;
margin:0 10px 0 10px;
}
#rodape {
position:relative;
width:1000px;
height:25px;
background: url(../img/bkgrodape.png) no-repeat;
text-align:center;
font-size:10px;
color:#666666;
clear:both;
}
Perceberam a diferença? É tão simples e tão estúpida que aposto que a maioria não viu.... mas basta dar um espaço na declaração, ou se seja, background: espaço url(imagem) espaço no-repeat;
Espero que ajude mais pessoas.
Abraços
Mais recentes em WebStandards e CSS
- Mini-lib css reset do micox
- Por Micox - Abaixo mostrarei tipo uma mini-lib css com o qual eu...
- Mapear regiao
- Por faro - Substituindo a tag map pelo css....
- Layout diferente.
- Por faro - Boa noite pessoal como vão todos... esse é meu primeiro...
- Rollover via css
- Por NightSpy - Achei este efeito na net, como não achei novamente,...
- Menu drop-down só com css - até 4 níveis
- Por Micox - Código pronto - só copiar, colar e usar...
Ver mais Artigos de WebStandards e CSS.
Ver e retirar outras dúvidas no fórum Webly.
Alguns Direitos Reservados | RSS | O Fórum
Webly Portal e Fóruns - Internet + Humana | Design by ArthurHenrique.com
Comentários:
Micox disse:
Esse ainda é diboas. Pior é quando não achamos a solução heheh
PXzin disse:
Todo elemento pai que tem filhos flutuantes (float) não pode ter sua altura afetada automaticamente pela altura dos filhos, pois eles estão flutuando sobre ele.
"O pai, burro e arcaico como todo pai, não sabe a altura dos seus filhos moderninhos."
Para isso o pai precisa de um ultimo filho dedo-duro. Um que seja pé no chão (clear:both) para lhe informar a altura dos irmãos e assim afetar a altura do pai.
----- x----
Viajei demais!?
Na real o seu elemento tinha background sim, mas ele tinha altura 0. Ou seja, o elemento e suas características não poderiam ser exibidas.
Se colocasse um borda nesse elemento verificaria que ela se transformaria em uma linha continua, com se estivesse cercando um elemento sem altura, que era o que acontecia.
Assim que entendo o CSS
Evaldo disse:
position:relative;
width:1000px;
[b]height:25px;[/b]
background: url(../img/bkgrodape.png) no-repeat;
text-align:center;
font-size:10px;
color:#666666;
clear:both;
}
Agora, se for o elemento flutuado, aí varia muito... pode ser uma imagem, um parágrafo, uma div, etc... aí complica colocar altura em tudo, afinal, como se calcula a altura de um parágrafo?
PXzin disse:
Li uma coisa, entendi outra e postei uma resposta a algo totalmente nada haver!
Ver o restante dos comentários no fórum (e aproveitar pra comentar também !).