Boas pessoal, Eu estou com um problema numa template que tou a desenvolver. Está aqui a screen do site no firefox: http://i40.tinypic.com/10hvm6u.png No ie o fundo branco vai até ao fim da página mas no firefox não. HTML: Código: <html> <head> <link type="text/css" rel="stylesheet" href="css.css"> <script type="text/javascript"> function mouseOver() { document.getElementById("b1").src="images/home2.png" } function mouseOut() { document.getElementById("b1").src="images/home.png" } function mouseOver2() { document.getElementById("b2").src="images/noticias2.png" } function mouseOut2() { document.getElementById("b2").src="images/noticias.png" } function mouseOver3() { document.getElementById("b3").src="images/forum2.png" } function mouseOut3() { document.getElementById("b3").src="images/forum.png" } function mouseOver4() { document.getElementById("b4").src="images/contactos2.png" } function mouseOut4() { document.getElementById("b4").src="images/contactos.png" } </script> </head> <body> <div class = "wraper"> <div class = "header"> HOME CLAUDIU TESTE YOUTUBE GOOGLE OLA </div> <div class = "header2"> <font align = "left"></font> </div> <div class = "banner"> <font align = "left"></font> </div> <div class = "menu"> <img onmouseover="mouseOver()" onmouseout="mouseOut()" src="images/home.png" id="b1" /> <img onmouseover="mouseOver2()" onmouseout="mouseOut2()" src="images/noticias.png" id="b2" /> <img onmouseover="mouseOver3()" onmouseout="mouseOut3()" src="images/forum.png" id="b3" /> <img onmouseover="mouseOver4()" onmouseout="mouseOut4()" src="images/contactos.png" id="b4" /> </div> <div class="content"> claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br>claudiu<br> </div> </div> </body> </html> CSS Código: body{ background-image:url('images/bg.png'); text-align:center; margin:0px; color:white; height:100%; } .header { width: 800px; height:20px; background-image:url('images/header.png'); margin-top:0px; margin-left:auto; margin-right:auto; text-align:center; color:black; font-family:Arial; font-size:12; } .header2 { width: 800px; height:30px; background-image:url('images/header2.png'); margin-top:0px; margin-left:auto; margin-right:auto; } .banner { width: 800px; height:150px; background-image:url('images/banner.png'); margin-top:0px; margin-left:auto; margin-right:auto; } .menu { width: 800px; height:50px; background-image:url('images/menu.png'); margin-top:0px; margin-left:auto; margin-right:auto; } .content{ height:100%; margin:20px; color:black; } .wraper { width: 800px; height:100%; background-image:url('images/wraper.png'); background-repeat:repeat-y; margin-left:auto; margin-right:auto; } Alguém tem alguma solução?
Porque o "position: absolute" no container? Experimenta tirar isso.. De qq modo, se tiveres isso online deixa o link que é mais fácil de perceber o q se passa.
Tava aqui a tentar simular o teu site, mas não tenho as imagens, portanto não posso ajudar mais. Boa sorte com isso.
Tira o height: 100% do body e do wraper. EDIT: Em relação aos menús, tem outra duas opções bastante mais fáceis. Uma delas é usar imagens em efeito roll over » http://www.htmlcodetutorial.com/images/images_famsupp_59.html A outra é uniformizares o nome das tuas imagens de menu para "op1on", "op2on"... etc. e "op1off", "op2off"... etc Assim só precisavas de uma função de mouseOver que seria assim: PHP: function mouseOver(i) { document.getElementById("b"+i).src="images/op" + i + "on.png" } function mouseOut(i) { document.getElementById("b"+i).src="images/op" + i + "off.png" } E em vez de teres isto: PHP: <div class = "menu"> <img onmouseover="mouseOver()" onmouseout="mouseOut()" src="images/home.png" id="b1" /> <img onmouseover="mouseOver2()" onmouseout="mouseOut2()" src="images/noticias.png" id="b2" /> <img onmouseover="mouseOver3()" onmouseout="mouseOut3()" src="images/forum.png" id="b3" /> <img onmouseover="mouseOver4()" onmouseout="mouseOut4()" src="images/contactos.png" id="b4" /> </div> Passavas a ter isto: PHP: <div class = "menu"> <img onmouseover="mouseOver('1')" onmouseout="mouseOut('1')" src="images/home.png" id="b1" /> <img onmouseover="mouseOver('2')" onmouseout="mouseOut('2')" src="images/noticias.png" id="b2" /> <img onmouseover="mouseOver('3')" onmouseout="mouseOut('3')" src="images/forum.png" id="b3" /> <img onmouseover="mouseOver('4')" onmouseout="mouseOut('4')" src="images/contactos.png" id="b4" /> </div>
De nada.. estamos aqui é para ajudar. Qualquer dúvida apita, que eu ou outro membro te ajudam de certeza! Boa sorte com a construção do site.