Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Boa Tarde pessoal do Imasters.
Estou tentando fazer um layout com div's e imagens de fundo apenas para aprendizado.
Com o código que fiz tudo funciona marabilhosamente bem no fire-fox e chrome.
Porém no IE fica uma caca.
Percebi que as div's no IE não aumentam de tamanho quando se usa background-image e height 100%.
O que faço para que no ie a div pegue o tamanho da imagem que eu seto no background?
Abaixo vai o código.
teste_div.css
body { margin:0; padding:0; border:none; text-align: center; }
div { width: 100%; border: 1px solid black; }
.master { margin:0 auto; width: 975px; text-align:left; }
.top { height: 168px; background-image: url("imgteste/topo.jpg"); }
.banners-top { margin-top: 6px; height: 122px; background: url("imgteste/banner.jpg") no-repeat center center #0884c4 ; }
.menu { margin-top: 5px; width: 165px; height: 100%; float: left; background: url("imgteste/menu.jpg") no-repeat top center }
.banners-right { margin-top: 5px; width: 165px; height: 100%; float: right; background: url("imgteste/banner-right.jpg") no-repeat top center }
.contents { margin: 5 auto; width: 640px; height: 100%; background: url("imgteste/conteudo.jpg") no-repeat top center }
.footer { height: 108px; background-image: url("imgteste/footer.jpg"); }
teste_div.html
<html>
<head>
<title>Teste Div</title>
<link rel="stylesheet" type="text/css" href="teste_div.css" />
</head>
<body>
<div class="master">
<div class="top"></div>
<div class="banners-top"></div>
<div class="menu"></div>
<div class="banners-right"></div>
<div class="contents"></div>
<div class="footer"></div>
</div>
</body>
</html>Carregando comentários...