Problema no Background e z-index

[Teteu Six 4]

Tudo bem pessoal?

Eu já acompanho o fórum a um tempo, e normalmente busco e encontro minhas ajudas aqui. Mas essa é a primeira vez que eu busco ajuda postando, então me desculpe qualquer coisa e me ajudem se for possível.

Eu fiz a pagina, tudo blza mas o banner deu problema..

As DIV's que estão envolvida são:

 

<!-- DIV DO FUNDO PRETO QUE APARECE NA FRENTE DAS MÁQUINAS (NA QUAL ESTÁ COM PROBLEMA NO IE) -->

bannerProductProdutosPage

 

<!-- DIV DA IMAGEM DA CIDADE COM AS MÁQUINAS -->

bottomOfHeaderPageProduct

 

 

Olhe o HTML

 

<!-- INCLUDE ALL CONTENT + BACKGROUND PAGE -->
<div id="all">
 <!-- INLCUDE BACKGROUND BLACK -->
 <div class="bannerProductProdutosPage"></div>

 <!--  INCLUDE ONE SHADOW, YOUR LOCATION IS BEETWEEN #header AND #content -->
 <div class="bgContenProduct"></div>

 <!-- INCLUDE ALL CONTENT (#header and #content) -->
<div id="container">
  <div class="bgHead" style="height: 457px;"></div>

<!-- INCLUDE ALL HEADER, SINCE LOGO UNTIL THE BANNER -->
  <div id="header" style="height: 460px;">

<!-- INCLUDE ALL HEAER TOP. LOGO, PHONES, MENU AND INFORMATION LINE -->
    <?php
       include 'include/headerTopProducts.php';
    ?>

<!--  INCLUDE HEADER BOTTOM, BANNER AND SHADOW -->
    <div id="bottomOfHeaderPageProduct">

    <img alt="" src="image/shadowDivision.png" class="shadowDivisionPageProduct">    

 

Agora o CSS

.bannerProductProdutosPage{   
   background: none repeat scroll 0 0 #000000;
   height: 300px;/*
   margin-left: -670px;*/
   margin-top: 159px;
   position: absolute;
   width: 100%;
   z-index: 1;

}
.bannerProductProdutosPage1{
   background: url("../image/banner/bannerProduct.jpg") no-repeat scroll 0 0 transparent;
   height: 300px;
   margin-left: -65px;
   margin-top: -50px;
   *margin-top: 0px;
   width: 1292px;
   *position: relative;
   *float: left;
   *display: block;
   z-index: 2000;
}

 

no FF fica assim

 

 

ja no IE(o maldito) ele da problema

 

[Kakashi_Hatake 267]

Para que serve o * ?

*margin-top: 0px;
*position: relative;
*float: left;
*display: block;

 

Posso estar falando bobagens mas é a primeira vez que vejo algo assim.

[Teteu Six 4]

Serve como hack para o Maldito(desculpe a palavra) Internet Explorer7 e 8

[Kakashi_Hatake 267]

use o Responder Azul

ou a 'Resposta Rápida'.

 

 

Onde está o <div class="bannerProductProdutosPage1"></div>

 

 

Não daria para botar dentro da div que contém o background ?

[Francispansa 6]

Teria um link para visualizar?

[Teteu Six 4]

Valew pela dica do responder! :D

 

mas... em relação a DIV eu te peço perdão porque eu esqueci de coloca, eu tinha digitado esse post e depois acabei apagando uma boa parte e sem perceber eu apaguei a linha mas o HTML ta aqui agora completo (a parte que aparece na imagem)

 

<!-- INCLUDE ALL CONTENT + BACKGROUND PAGE -->
	<div id="all">

		<div class="bannerProductProdutosPage"></div>

                       <!--  INCLUDE ONE SHADOW, YOUR LOCATION IS BEETWEEN #header AND #content -->
		<div class="bgContenProduct"> </div>

		<!-- INCLUDE ALL CONTENT (#header and #content) -->
		<div id="container">

		<div class="bgHead" style="height: 457px;"></div>
			<!-- INCLUDE ALL HEADER, SINCE LOGO UNTIL THE BANNER -->
			<div id="header" style="height: 460px;">

				<!-- INCLUDE ALL HEAER TOP. LOGO, PHONES, MENU AND INFORMATION LINE -->
				<?php
					include 'include/headerTopProducts.php';
				?>


				<!--  INCLUDE HEADER BOTTOM, BANNER AND SHADOW -->
				<div id="bottomOfHeaderPageProduct">

					<img alt="" src="image/shadowDivision.png" class="shadowDivisionPageProduct">


						<!-- banner img -->
						<div class="bannerProductProdutosPage1">

							<div class="product1">

<!-- o resto do codigo são os produtos e informções deles, e que no momento eu não acho necessário ser colocado, mas qualquer coisa eu coloco --> 

 

 

Carlos Coelho a minha intenção é deixar aquele background fique 100%

mesmo que o usuário aperte CTRL+"+" ou "-"

 

aqui vai o link da pagina, mas eu estou desenvolvendo então não leve em consideração alguns erros.

 

Link da página

[Francispansa 6]

Teteu, eu faria o seguinte.

Não usaria a div bannerProductProdutosPage e deixaria o css da div bannerProductProdutosPage1 mais ou menos assim:

 

.bannerProductProdutosPage1{
   background: #000 url("../image/banner/bannerProduct.jpg") no-repeat scroll  top center;
   height: 300px;
   width: 100%;
   display:block;
   float:left;
}

 

Talves tentando simplificar um pouco mais sua estrutura, fique mais facil de resolver o problema e sem usar muitos hacks para IE.. =)

[Teteu Six 4]

Muito obrigado Francispansa vou tentar fazer o que você indicou.

Mas dando certo ou não... obrigado!

 

Não deu certo :(

Mas vlw pela dica...

mas ainda preciso de ajuda e estou aceitando ajuda. (y)

 

olha como ficou com a sua dica

 

 

 

 

 

 

[Francispansa 6]

Experimenta deixa assim:

 

.bannerProductProdutosPage1{
   background: #000 url("../image/banner/bannerProduct.jpg") no-repeat scroll  top center;
   height: 300px;
   width: 100%;
   display:block;
   position:absolute;
   left:0;
   top: ;/* ve qual a distancia do topo você quer*/
}

[Teteu Six 4]

:no:

ainda não funcionou :/

continuo a mesma coisa, mas muito obrigado!