Css or Javascript problem that only works in Firefox

Asked

Viewed 70 times

-2

Hello I’m doing a control where there are 2 tables to table To and B , then. This table B only appears if I click on boot B , and table A "vanishes". Between so much this happens right in Firefox , but in Edge and Chrome not, the error is not to click the button. This effect of "vanish the div" was done via Java script using a display: None in css. the code is here in this link too

https://jsfiddle.net/Larck6/c1peqhvL/32/

var diva;
var divb;



window.onload = function(){
  
  diva = document.getElementById("diva");
  divb = document.getElementById("divb");
  
  var bta = document.getElementById("bta");
  bt1.onclick = mostrarDiv1;
  var btb = document.getElementById("btb");
  bt2.onclick = mostrarDiv2;
  
  diva.classList.add ("escondido");
  divb.classList.add ("escondido");
  
  
}

function mostrarDiv1(){
  
  diva.classList.remove("escondido");
  divb.classList.add("escondido");
     
}

function mostrarDiv2(){
  diva.classList.add("escondido");
  divb.classList.remove("escondido");

}
/* Fonts from Google Fonts - more at https://fonts.google.com */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,700');

body {
  background-color: white;
  font-family: "Open Sans", sans-serif;
  padding: 5px 25px;
  font-size: 18px;
  margin: 0;
  color: #444;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  color-adjust: [exact];

}

h1 {
  font-family: "Merriweather", serif;
  font-size: 32px;
}

body {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font: 10pt "Tahoma";
}

@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}




.container{

  margin-left: auto; /* magin externa Esquerda */ 
  margin-right: auto; /* magin externa direita */
  clear: none;
  float: none;
  padding-left: 15pt;
  padding-right: 15pt;
}


.fundo{
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background-image: url("../img/Fundo_simples_A4.jpg");
  color-adjust: exact;
  z-index:-1;

}


/*img e cabecalho*/
.cabecalho{
  width:100%;
  z-index:1;
  position: absolute;
  padding-top: 5pt;
  /* position: absolute;teste*/
}

/* FIM cabecalho*/

/* logo RCm*/
.logo{
  height:auto;
  width:20%;
  float: left;
}

.logo img{
  height:auto;
  width:100%;

}
/*FIM logo RCM*/

.escondido{
  display:none;

}


.botao{
  height:auto;
  width:100%;
  float: left;
  text-align:center;
  color: #c40027;
  font-weight: bold;
  z-index:100;
  position: absolute;
  margin-top: 10%;
  margin-bottom: 80%;
}

#bt1{
  height:30px;
  width:60px;
  text-align:center;	
  color:#000000;
  background-color: rgba(75, 75, 75, 0.12);
}


button{
  height:30px;
  width:60px;
  text-align:center;	
  color:#000000;
  background-color: rgba(75, 75, 75, 0.12);
  
}

#button{
  height:30px;
  width:60px;
  text-align:center;	
  color:#000000;
  background-color: rgba(75, 75, 75, 0.12);

}




/*Titulo central*/
.titulo{
  height:auto;
  width:50%;
  float: left;
  color: #c40027;
  text-align: center;
  font-size: 15pt;
  font-weight: bold;
  padding-top: 10pt;
}
/* FIM Titulo  central*/

/*Simbolo vermelhor*/
.logo2{
  height:auto;
  width:20%;
  float: right;
  z-index:2;

}

.logo2 img{
  height:auto;
  width:40%;
  margin-left:40%;
  float: right;
}


/* fim simbolo vermelhor*/





.pratileira{
  height:auto;
  width:100%;
  float: left;
  text-align:center;
  margin-top:15%;
  color: #c40027;
  font-weight: bold;


}



.parte1{
  height:auto;
  width:100%;

}


.andar{
  color: #c40027;
  font-weight: bold;
  margin-left: 0;
  padding-top: 0;

}
.andar_p{
  height:70px;
  color: #c40027;
  font-weight: bold;
  margin-left: 0;
  padding-top: 20px;
  margin-top: 10px;
}

.partileiraandar{
  width:10%;
  float: left;
  padding-left: 10pt;

}
.abc_dados_prateleiras{
  width:85%;
  float: left;
  color: #c40027;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
}

.p_l{
  width:12%;
  float: left;
  text-align:center;




}
.dados_pratileira_1{
  width:85%;
  float: left;
  text-align:left;

}

#A01,#A02,#A03,#A04,#A05,#A06,#A07,#A08{
  height:70px;
  width:12%;
  float: left;
  text-align:left;
  color: #464545;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 2px;
  -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);
  -moz-box-shadow:    9px 7px 5px rgba(50, 50, 50, 0.77);
  box-shadow:         0px 3px 5px rgba(50, 50, 50, 0.77);
}



/* >>>>>>>>Andar 1 <<<<<<<*/


#A11,#A12,#A13,#A14,#A15,#A16,#A17,#A18{
  height:70px;
  width:12%;
  float: left;
  text-align:left;
  color: #464545;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 2px;
  -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);
  -moz-box-shadow:    9px 7px 5px rgba(50, 50, 50, 0.77);
  box-shadow:         0px 3px 5px rgba(50, 50, 50, 0.77);

}




/* >>>>>Andadr 2<<<<<<<*/

#A21,#A22,#A23,#A24,#A25,#A26,#A27,#A28{
  height:70px;
  width:12%;
  float: left;
  text-align:left;
  color: #464545;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 2px;
  -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);
  -moz-box-shadow:    9px 7px 5px rgba(50, 50, 50, 0.77);
  box-shadow:         0px 3px 5px rgba(50, 50, 50, 0.77);

}


/*>>>>>>>>>>>>>>Andar 3<<<<<<<<<<*/


#A31,#A32,#A33,#A34,#A35,#A36,#A37,#A38{
  height:70px;
  width:12%;
  float: left;
  text-align:left;
  color: #464545;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 2px;
  -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);
  -moz-box-shadow:    9px 7px 5px rgba(50, 50, 50, 0.77);
  box-shadow:         0px 3px 5px rgba(50, 50, 50, 0.77);

}



/* >>>>>>>>>>>> ******** TABELA B******** <<<<<<<<<<<<<<<<<< */

#B01,#B02,#B03,#B04,#B05,#B06,#B07,#B08{
  height:70px;
  width:12%;
  float: left;
  text-align:left;
  color: #464545;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 2px;
  -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);
  -moz-box-shadow:    9px 7px 5px rgba(50, 50, 50, 0.77);
  box-shadow:         0px 3px 5px rgba(50, 50, 50, 0.77);
}



/* >>>>>>>>Andar 1 <<<<<<<*/


#B11,#B12,#B13,#B14,#B15,#B16,#B17,#B18{
  height:70px;
  width:12%;
  float: left;
  text-align:left;
  color: #464545;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 2px;
  -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);
  -moz-box-shadow:    9px 7px 5px rgba(50, 50, 50, 0.77);
  box-shadow:         0px 3px 5px rgba(50, 50, 50, 0.77);

}




/* >>>>>Andadr 2<<<<<<<*/

#B21,#B22,#B23,#B24,#B25,#B26,#B27,#B28{
  height:70px;
  width:12%;
  float: left;
  text-align:left;
  color: #464545;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 2px;
  -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);
  -moz-box-shadow:    9px 7px 5px rgba(50, 50, 50, 0.77);
  box-shadow:         0px 3px 5px rgba(50, 50, 50, 0.77);

}



/*>>>>>>>>>>>>>>Andar 3<<<<<<<<<<*/


#B31,#B32,#B33,#B34,#B35,#B36,#B37,#B38{
  height:70px;
  width:12%;
  float: left;
  text-align:left;
  color: #464545;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 2px;
  -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);
  -moz-box-shadow:    9px 7px 5px rgba(50, 50, 50, 0.77);
  box-shadow:         0px 3px 5px rgba(50, 50, 50, 0.77);

}





/* >>>>>>>>>>>> ||||||||| FIM TABELA B|||||||| <<<<<<<<<<<<<<<<<< */
<html>
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Estoque</title>
        <script src="scripts/cssdiv.js"></script>
        <link rel="stylesheet" href="css/index.css">
      </head>
<body>

        <div class="container">

          <div class="fundo">

            <div class="cabecalho">

              <div class="logo"><img src=""/></div>
              <div class="titulo">ESTOQUE BOBINAS</div>
              <div class="logo2"> <img src=""></div>

            </div>
            <!-- >>>>>>>>> botao <<<<<<<<< -->
            <div class="botao">
              <button id="bt1"> A </button>
              <button id="bt2"> B </button>
            
            </div>
            <!-- >>>>>>> FIM botao <<<<< -->


            

            <div id="diva"> <!-- >>>> INIcio da DIVA do botao 1 <<<<  -->
                          
             <!-- <div class="pratileira" onload="setTimeout('Atualizar()',1000)"><h3>Prateileira A</h3></div> -->
             <div class="pratileira"><h3>Prateileira A</h3></div>

              <div class="parte1">

                <div class="partileiraandar"> 

                  <div class="andar">Andares</div>
                  <div class="andar_p">Andar 0</div>
                  <div class="andar_p">Andar 1</div>
                  <div class="andar_p">Andar 2</div>
                  <div class="andar_p">Andar 3</div>

                </div>
                <!-- FIM  1 a 8 da -->
                <div class="abc_dados_prateleiras">
                  <div class="p_l">1</div>
                  <div class="p_l">2</div>
                  <div class="p_l">3</div>
                  <div class="p_l">4</div>
                  <div class="p_l">5</div>
                  <div class="p_l">6</div>
                  <div class="p_l">7</div>
                  <div class="p_l">8</div>
                </div> 
                <!-- FIM  1 a 8 da -->


                <!-- >>>>>>>>>>> inicio dos dados <<<<<<<<<< -->
                <div class="dados_pratileira_1">
                  <?php
                  $bobina = busca_endereco("A01");
                  ?>
                  <div id="A01"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("A02");
                  ?>
                  <div id="A02"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("A03");
                  ?>
                  <div id="A03"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("A04");
                  ?>
                  <div id="A04"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("A05");
                  ?>
                  <div id="A05"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("A06");
                  ?>
                  <div id="A06"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("A07");
                  ?>
                  <div id="A07"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("A08");
                  ?>
                  <div id="A08"><?=$bobina?></div>



                  <!-- andar 1 -->
                  <?php  
                  $bobina = busca_endereco("A11");
                  ?>

                  <div id="A11"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("A12");
                  ?>
                  <div id="A12"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("A13");
                  ?>
                  <div id="A13"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("A14");
                  ?>
                  <div id="A14"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("A15");
                  ?>
                  <div id="A15"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("A16");
                  ?>
                  <div id="A16"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("A17");
                  ?>
                  <div id="A17"><?=$bobina?></div>


                   <?php  
                  $bobina = busca_endereco("A18");
                  ?> 
                  <div id="A18"><?=$bobina?></div>




                  <!-- andar 2 --> 

                  <?php  
                  $bobina = busca_endereco("A21");
                  ?>   
                  <div id="A21"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("A22");
                  ?> 
                  <div id="A22"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("A23");
                  ?> 
                  <div id="A23"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("A24");
                  ?> 
                  <div id="A24"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("A25");
                  ?> 
                  <div id="A25"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("A26");
                  ?> 
                  <div id="A26"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("A27");
                  ?> 
                  <div id="A27"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("A28");
                  ?> 
                  <div id="A28"><?=$bobina?></div>




                  <!-- andar 3 -->

                  <?php  
                  $bobina = busca_endereco("A31");
                  ?>

                  <div id="A31"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("A32");
                  ?>

                  <div id="A32"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("A33");
                  ?>

                  <div id="A33"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("A34");
                  ?>

                  <div id="A34"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("A35");
                  ?>

                  <div id="A35"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("A36");
                  ?>

                  <div id="A36"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("A37");
                  ?>

                  <div id="A37"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("A38");
                  ?>

                  <div id="A38"><?=$bobina?></div>




                  <!-- >>>>>>>>>>> FIM dos dados <<<<<<<<<< -->

                </div> 

              </div> 

              <!-- >>>> FIM Tabela completa A <<<<  -->
              

            </div> <!-- >>>> FIM da DIVA do botao 1 <<<<  -->



            <div id="divb"> <!-- >>>> INCIO da DIVB do botao 2 <<<<  -->
              
              
              <div class="pratileira"><h3>Prateileira B</h3></div>

              <div class="parte1">

                <div class="partileiraandar"> 

                  <div class="andar">Andares</div>
                  <div class="andar_p">Andar 0</div>
                  <div class="andar_p">Andar 1</div>
                  <div class="andar_p">Andar 2</div>
                  <div class="andar_p">Andar 3</div>

                </div>
                <!-- FIM  1 a 8 da -->
                <div class="abc_dados_prateleiras">
                  <div class="p_l">1</div>
                  <div class="p_l">2</div>
                  <div class="p_l">3</div>
                  <div class="p_l">4</div>
                  <div class="p_l">5</div>
                  <div class="p_l">6</div>
                  <div class="p_l">7</div>
                  <div class="p_l">8</div>
                </div> 
                <!-- FIM  1 a 8 da -->


                <!-- >>>>>>>>>>> inicio dos dados <<<<<<<<<< -->
                <div class="dados_pratileira_1">


                  <?php  
                  $bobina = busca_endereco("B01");
                  ?>
                  <div id="B01"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B02");
                  ?>

                  <div id="B02"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B03");
                  ?>

                  <div id="B03"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B04");
                  ?>

                  <div id="B04"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B05");
                  ?>

                  <div id="B05"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B06");
                  ?>

                  <div id="B06"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B07");
                  ?>

                  <div id="B07"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("B08");
                  ?>

                  <div id="B08"><?=$bobina?></div>


                  <!-- andar 1 -->

                  <?php  
                  $bobina = busca_endereco("B11");
                  ?>

                  <div id="B11"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B12");
                  ?>

                  <div id="B12"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B13");
                  ?>

                  <div id="B13"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B14");
                  ?>

                  <div id="B14"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B15");
                  ?>

                  <div id="B15"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B16");
                  ?>

                  <div id="B16"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B17");
                  ?>

                  <div id="B17"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B18");
                  ?>

                  <div id="B18"><?=$bobina?></div>


                  <!-- andar 2 --> 

                  <?php  
                  $bobina = busca_endereco("B21");
                  ?>

                  <div id="B21"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B22");
                  ?>

                  <div id="B22"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B23");
                  ?>

                  <div id="B23"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B24");
                  ?>

                  <div id="B24"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B25");
                  ?>

                  <div id="B25"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B26");
                  ?>

                  <div id="B26"><?=$bobina?></div>

                  <?php  
                  $bobina = busca_endereco("B27");
                  ?>

                  <div id="B27"><?=$bobina?></div>



                  <?php  
                  $bobina = busca_endereco("B28");
                  ?>


                  <div id="B28"><?=$bobina?></div>


                  <!-- andar 3 -->

                  <?php  
                  $bobina = busca_endereco("B31");
                  ?>
                  <div id="B31"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("B32");
                  ?>

                  <div id="B32"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("B33");
                  ?>

                  <div id="B33"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("B34");
                  ?>

                  <div id="B34"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("B35");
                  ?>

                  <div id="B35"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("B36");
                  ?>

                  <div id="B36"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("B37");
                  ?>

                  <div id="B37"><?=$bobina?></div>


                  <?php  
                  $bobina = busca_endereco("B38");
                  ?>

                  <div id="B38"><?=$bobina?></div>





                  <!-- >>>>>>>>>>> FIM dos dados <<<<<<<<<< -->

                </div> 

              </div> 

              <!-- >>>> FIM Tabela completa B <<<<  -->
              </div> <!-- >>>> FIM da DIV B do botao 2 <<<<  -->
              
              </div> <!-- FIm Fundo site -->
        </div> <!-- Fim container site -->
      </body>
    </html>

javascript html css

2 answers

1

There’s more than one problem with that code. Firstly that it should not be working even in Firefox, at least not the way you posted it, because in your HTML you declare diva and divb, but in your Javascript you are searching elements with the ids div1 and div2.

Then in office mostrarDiv1 and mostrarDiv2, instead of adding the class escondido to one element and remove to the other, you are adding and removing the class in the same element div1

Now, as for the code being behaving differently in each browser, it is probably due to the way each browser loads the page. In your code, you declare a function to be triggered when the window finish loading, that is in onload, but if the window is already loaded when your browser interprets Javascript, this function will never fire.

You should do something like:

if (document.readyState === "complete") onload();
else window.onload = onload;

function onload(){

  div1 = document.getElementById("diva");
  div2 = document.getElementById("divb");

  // ...

}

That way if the HTML is already loaded, you trigger the function, and if it is not loaded, you put the function to be fired as soon as it loads.

  • I fixed the error was at the time to summarize it and paste here :D , but now this correct , I tried to do the if but not yet rolled :(

  • Are you sure the error is not in the logic of your code? Here is working .

  • found the error was the div q did the background msm I declaring the zindex -1 or any other value to stay down do not know the right reason the browser was not interpreting this, it was just I take the Z position that worked vlw by the help

0

It should not work in any browser, because there are errors in the code, for example in these lines:

div1 = document.getElementById("div1");
div2 = document.getElementById("div2");

There is no element with id’s #div1 and #div2. Looks like you meant the Divs #diva and #divb. In this case, simply change the id’s of the tables' Ivs to id="div1" and id="div2".

Another problem is in the functions that show the tables, where you should add the class .escondido in one div and remove from the other and vice versa, according to the button clicked, and you are doing this only on div1, for example:

div1.classList.remove("escondido");
div1.classList.add("escondido");

It would have to be so, in the first function, for example:

div1.classList.remove("escondido"); // mostra uma
div2.classList.add("escondido");    // e esconde a outra

So your code should be like this:

var div1;
var div2;

window.onload = function(){
  
  div1 = document.getElementById("div1");
  div2 = document.getElementById("div2");
  
  var bt1 = document.getElementById("bt1");
  bt1.onclick = mostrarDiv1;
  var bt2 = document.getElementById("bt2");
  bt2.onclick = mostrarDiv2;
  
  div1.classList.add ("escondido");
  div2.classList.add ("escondido");
  
  
}

function mostrarDiv1(){
  
  div1.classList.remove("escondido");
  div2.classList.add("escondido");
     
}

function mostrarDiv2(){
  div1.classList.add("escondido");
  div2.classList.remove("escondido");

}
body {
  background-color: white;
  font-family: "Open Sans", sans-serif;
  padding: 5px 25px;
  font-size: 18px;
  margin: 0;
  color: #444;
  -webkit-print-color-adjust: exact;
  color-adjust: exact;
  color-adjust: [exact];

}

h1 {
  font-family: "Merriweather", serif;
  font-size: 32px;
}

body {
  margin: 0;
  padding: 0;
  background-color: #FAFAFA;
  font: 10pt "Tahoma";
}

@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
  }
}

page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
}
* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
}




.container{

  margin-left: auto; /* magin externa Esquerda */ 
  margin-right: auto; /* magin externa direita */
  clear: none;
  float: none;
  padding-left: 15pt;
  padding-right: 15pt;
}


.fundo{
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  background-image: url("../img/Fundo_simples_A4.jpg");
  color-adjust: exact;
  z-index:-1;

}


/*img e cabecalho*/
.cabecalho{
  width:100%;
  z-index:1;
  position: absolute;
  padding-top: 5pt;
  /* position: absolute;teste*/
}

/* FIM cabecalho*/

/* logo RCm*/
.logo{
  height:auto;
  width:20%;
  float: left;
}

.logo img{
  height:auto;
  width:100%;

}
/*FIM logo RCM*/

.escondido{
  display:none;

}


.botao{
  height:auto;
  width:100%;
  float: left;
  text-align:center;
  color: #c40027;
  font-weight: bold;
  z-index:100;
  position: absolute;
  margin-top: 10%;
  margin-bottom: 80%;
}

#bt1{
  height:30px;
  width:60px;
  text-align:center;	
  color:#000000;
  background-color: rgba(75, 75, 75, 0.12);
}


button{
  height:30px;
  width:60px;
  text-align:center;	
  color:#000000;
  background-color: rgba(75, 75, 75, 0.12);
  
}

#button{
  height:30px;
  width:60px;
  text-align:center;	
  color:#000000;
  background-color: rgba(75, 75, 75, 0.12);

}




/*Titulo central*/
.titulo{
  height:auto;
  width:50%;
  float: left;
  color: #c40027;
  text-align: center;
  font-size: 15pt;
  font-weight: bold;
  padding-top: 10pt;
}
/* FIM Titulo  central*/

/*Simbolo vermelhor*/
.logo2{
  height:auto;
  width:20%;
  float: right;
  z-index:2;

}

.logo2 img{
  height:auto;
  width:40%;
  margin-left:40%;
  float: right;
}


/* fim simbolo vermelhor*/





.pratileira{
  height:auto;
  width:100%;
  float: left;
  text-align:center;
  margin-top:15%;
  color: #c40027;
  font-weight: bold;


}



.parte1{
  height:auto;
  width:100%;

}


.andar{
  color: #c40027;
  font-weight: bold;
  margin-left: 0;
  padding-top: 0;

}
.andar_p{
  height:70px;
  color: #c40027;
  font-weight: bold;
  margin-left: 0;
  padding-top: 20px;
  margin-top: 10px;
}

.partileiraandar{
  width:10%;
  float: left;
  padding-left: 10pt;

}
.abc_dados_prateleiras{
  width:85%;
  float: left;
  color: #c40027;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
}

.p_l{
  width:12%;
  float: left;
  text-align:center;




}
.dados_pratileira_1{
  width:85%;
  float: left;
  text-align:left;

}

#A01,#A02,#A03,#A04,#A05,#A06,#A07,#A08{
  height:70px;
  width:12%;
  float: left;
  text-align:left;
  color: #464545;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 2px;
  -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);
  -moz-box-shadow:    9px 7px 5px rgba(50, 50, 50, 0.77);
  box-shadow:         0px 3px 5px rgba(50, 50, 50, 0.77);
}



/* >>>>>>>>Andar 1 <<<<<<<*/


#A11,#A12,#A13,#A14,#A15,#A16,#A17,#A18{
  height:70px;
  width:12%;
  float: left;
  text-align:left;
  color: #464545;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 2px;
  -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);
  -moz-box-shadow:    9px 7px 5px rgba(50, 50, 50, 0.77);
  box-shadow:         0px 3px 5px rgba(50, 50, 50, 0.77);

}




/* >>>>>Andadr 2<<<<<<<*/

#A21,#A22,#A23,#A24,#A25,#A26,#A27,#A28{
  height:70px;
  width:12%;
  float: left;
  text-align:left;
  color: #464545;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 2px;
  -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);
  -moz-box-shadow:    9px 7px 5px rgba(50, 50, 50, 0.77);
  box-shadow:         0px 3px 5px rgba(50, 50, 50, 0.77);

}


/*>>>>>>>>>>>>>>Andar 3<<<<<<<<<<*/


#A31,#A32,#A33,#A34,#A35,#A36,#A37,#A38{
  height:70px;
  width:12%;
  float: left;
  text-align:left;
  color: #464545;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 2px;
  -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);
  -moz-box-shadow:    9px 7px 5px rgba(50, 50, 50, 0.77);
  box-shadow:         0px 3px 5px rgba(50, 50, 50, 0.77);

}



/* >>>>>>>>>>>> ******** TABELA B******** <<<<<<<<<<<<<<<<<< */

#B01,#B02,#B03,#B04,#B05,#B06,#B07,#B08{
  height:70px;
  width:12%;
  float: left;
  text-align:left;
  color: #464545;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 2px;
  -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);
  -moz-box-shadow:    9px 7px 5px rgba(50, 50, 50, 0.77);
  box-shadow:         0px 3px 5px rgba(50, 50, 50, 0.77);
}



/* >>>>>>>>Andar 1 <<<<<<<*/


#B11,#B12,#B13,#B14,#B15,#B16,#B17,#B18{
  height:70px;
  width:12%;
  float: left;
  text-align:left;
  color: #464545;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 2px;
  -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);
  -moz-box-shadow:    9px 7px 5px rgba(50, 50, 50, 0.77);
  box-shadow:         0px 3px 5px rgba(50, 50, 50, 0.77);

}




/* >>>>>Andadr 2<<<<<<<*/

#B21,#B22,#B23,#B24,#B25,#B26,#B27,#B28{
  height:70px;
  width:12%;
  float: left;
  text-align:left;
  color: #464545;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 2px;
  -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);
  -moz-box-shadow:    9px 7px 5px rgba(50, 50, 50, 0.77);
  box-shadow:         0px 3px 5px rgba(50, 50, 50, 0.77);

}



/*>>>>>>>>>>>>>>Andar 3<<<<<<<<<<*/


#B31,#B32,#B33,#B34,#B35,#B36,#B37,#B38{
  height:70px;
  width:12%;
  float: left;
  text-align:left;
  color: #464545;
  font-weight: bold;
  margin-left: 0;
  margin-bottom: 10px;
  padding-left: 2px;
  -webkit-box-shadow: 9px 7px 5px rgba(50, 50, 50, 0.77);
  -moz-box-shadow:    9px 7px 5px rgba(50, 50, 50, 0.77);
  box-shadow:         0px 3px 5px rgba(50, 50, 50, 0.77);

}
<div class="container">

 <div class="fundo">

   <div class="cabecalho">

     <div class="logo"><img src=""/></div>
     <div class="titulo">ESTOQUE BOBINAS</div>
     <div class="logo2"> <img src=""></div>

   </div>
   <!-- >>>>>>>>> botao <<<<<<<<< -->
   <div class="botao">
     <button id="bt1"> A </button>
     <button id="bt2"> B </button>
   
   </div>
   <!-- >>>>>>> FIM botao <<<<< -->


   

   <div id="div1"> <!-- >>>> INIcio da DIVA do botao 1 <<<<  -->
                 
    <!-- <div class="pratileira" onload="setTimeout('Atualizar()',1000)"><h3>Prateileira A</h3></div> -->
    <div class="pratileira"><h3>Prateileira A</h3></div>

     <div class="parte1">

       <div class="partileiraandar"> 

         <div class="andar">Andares</div>
         <div class="andar_p">Andar 0</div>
         <div class="andar_p">Andar 1</div>
         <div class="andar_p">Andar 2</div>
         <div class="andar_p">Andar 3</div>

       </div>
       <!-- FIM  1 a 8 da -->
       <div class="abc_dados_prateleiras">
         <div class="p_l">1</div>
         <div class="p_l">2</div>
         <div class="p_l">3</div>
         <div class="p_l">4</div>
         <div class="p_l">5</div>
         <div class="p_l">6</div>
         <div class="p_l">7</div>
         <div class="p_l">8</div>
       </div> 
       <!-- FIM  1 a 8 da -->


       <!-- >>>>>>>>>>> inicio dos dados <<<<<<<<<< -->
       <div class="dados_pratileira_1">
         <?php
         $bobina = busca_endereco("A01");
         ?>
         <div id="A01"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("A02");
         ?>
         <div id="A02"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("A03");
         ?>
         <div id="A03"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("A04");
         ?>
         <div id="A04"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("A05");
         ?>
         <div id="A05"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("A06");
         ?>
         <div id="A06"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("A07");
         ?>
         <div id="A07"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("A08");
         ?>
         <div id="A08"><?=$bobina?></div>



         <!-- andar 1 -->
         <?php  
         $bobina = busca_endereco("A11");
         ?>

         <div id="A11"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("A12");
         ?>
         <div id="A12"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("A13");
         ?>
         <div id="A13"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("A14");
         ?>
         <div id="A14"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("A15");
         ?>
         <div id="A15"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("A16");
         ?>
         <div id="A16"><?=$bobina?></div>

         <?php  

         $bobina = busca_endereco("A17");
         ?>
         <div id="A17"><?=$bobina?></div>


          <?php  
         $bobina = busca_endereco("A18");
         ?> 
         <div id="A18"><?=$bobina?></div>




         <!-- andar 2 --> 

         <?php  
         $bobina = busca_endereco("A21");
         ?>   
         <div id="A21"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("A22");
         ?> 
         <div id="A22"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("A23");
         ?> 
         <div id="A23"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("A24");
         ?> 
         <div id="A24"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("A25");
         ?> 
         <div id="A25"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("A26");
         ?> 
         <div id="A26"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("A27");
         ?> 
         <div id="A27"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("A28");
         ?> 
         <div id="A28"><?=$bobina?></div>




         <!-- andar 3 -->

         <?php  
         $bobina = busca_endereco("A31");
         ?>

         <div id="A31"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("A32");
         ?>

         <div id="A32"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("A33");
         ?>

         <div id="A33"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("A34");
         ?>

         <div id="A34"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("A35");
         ?>

         <div id="A35"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("A36");
         ?>

         <div id="A36"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("A37");
         ?>

         <div id="A37"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("A38");
         ?>

         <div id="A38"><?=$bobina?></div>




         <!-- >>>>>>>>>>> FIM dos dados <<<<<<<<<< -->

       </div> 

     </div> 

     <!-- >>>> FIM Tabela completa A <<<<  -->
     

   </div> <!-- >>>> FIM da DIVA do botao 1 <<<<  -->



   <div id="div2"> <!-- >>>> INCIO da DIVB do botao 2 <<<<  -->
     
     
     <div class="pratileira"><h3>Prateileira B</h3></div>

     <div class="parte1">

       <div class="partileiraandar"> 

         <div class="andar">Andares</div>
         <div class="andar_p">Andar 0</div>
         <div class="andar_p">Andar 1</div>
         <div class="andar_p">Andar 2</div>
         <div class="andar_p">Andar 3</div>

       </div>
       <!-- FIM  1 a 8 da -->
       <div class="abc_dados_prateleiras">
         <div class="p_l">1</div>
         <div class="p_l">2</div>
         <div class="p_l">3</div>
         <div class="p_l">4</div>
         <div class="p_l">5</div>
         <div class="p_l">6</div>
         <div class="p_l">7</div>
         <div class="p_l">8</div>
       </div> 
       <!-- FIM  1 a 8 da -->


       <!-- >>>>>>>>>>> inicio dos dados <<<<<<<<<< -->
       <div class="dados_pratileira_1">


         <?php  
         $bobina = busca_endereco("B01");
         ?>
         <div id="B01"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B02");
         ?>

         <div id="B02"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B03");
         ?>

         <div id="B03"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B04");
         ?>

         <div id="B04"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B05");
         ?>

         <div id="B05"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B06");
         ?>

         <div id="B06"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B07");
         ?>

         <div id="B07"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("B08");
         ?>

         <div id="B08"><?=$bobina?></div>


         <!-- andar 1 -->

         <?php  
         $bobina = busca_endereco("B11");
         ?>

         <div id="B11"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B12");
         ?>

         <div id="B12"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B13");
         ?>

         <div id="B13"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B14");
         ?>

         <div id="B14"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B15");
         ?>

         <div id="B15"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B16");
         ?>

         <div id="B16"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B17");
         ?>

         <div id="B17"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B18");
         ?>

         <div id="B18"><?=$bobina?></div>


         <!-- andar 2 --> 

         <?php  
         $bobina = busca_endereco("B21");
         ?>

         <div id="B21"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B22");
         ?>

         <div id="B22"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B23");
         ?>

         <div id="B23"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B24");
         ?>

         <div id="B24"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B25");
         ?>

         <div id="B25"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B26");
         ?>

         <div id="B26"><?=$bobina?></div>

         <?php  
         $bobina = busca_endereco("B27");
         ?>

         <div id="B27"><?=$bobina?></div>



         <?php  
         $bobina = busca_endereco("B28");
         ?>


         <div id="B28"><?=$bobina?></div>


         <!-- andar 3 -->

         <?php  
         $bobina = busca_endereco("B31");
         ?>
         <div id="B31"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("B32");
         ?>

         <div id="B32"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("B33");
         ?>

         <div id="B33"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("B34");
         ?>

         <div id="B34"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("B35");
         ?>

         <div id="B35"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("B36");
         ?>

         <div id="B36"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("B37");
         ?>

         <div id="B37"><?=$bobina?></div>


         <?php  
         $bobina = busca_endereco("B38");
         ?>

         <div id="B38"><?=$bobina?></div>





         <!-- >>>>>>>>>>> FIM dos dados <<<<<<<<<< -->

       </div> 

     </div> 

     <!-- >>>> FIM Tabela completa B <<<<  -->
     </div> <!-- >>>> FIM da DIV B do botao 2 <<<<  -->
     
     </div> <!-- FIm Fundo site -->
</div> <!-- Fim container site -->

  • the error you accused I had already fixed, it was at the time of summarizing for the forum that I missed, however the error of not working on Chrome and firefox still running :(

  • I use Chrome and it’s working right here, including the functional example I put in the answer. I believe the problem then must be something else.

  • found the error, was the div q did the background msm I declaring zindex -1 or any other value to stay down. I don’t know the right reason the browser wasn’t interpreting this, it was just me taking the Z position that worked out vlw by the help

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.