Objects change position when browser changes [closed]

Question

Objects change position when browser changes [closed]

Navigation

#1 by (0 votes)

0

Can someone tell me why changing the browser, from Chrome to Firefox, do the relative positions I gave in CSS change? I usually use Chrome, but I tried it on Firefox and all the objects I gave position:relative are deforested.

/* ---------------------------------------------- */


/* RESULTADO PESQUISA ARTISTA */


/* ---------------------------------------------- */


/*container da pesquisa*/

.div-pesquisa {
  position: absolute;
  z-index: 50000;
  top: 120.8%;
}


/*estilização do titulo "you searched for...*/

.div-pesquisa h3 {
  text-align: center;
  text-transform: uppercase;
  font-size: 100%;
  font-weight: 300;
  letter-spacing: 1px;
}


/*container da pesquisa*/

.pesquisa {
  list-style: none;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin-top: 1%;
  top: -80%;
}

.pesquisa li {
  display: block;
  float: left;
  width: 20%;
  height: 240px;
}


/*imagem da musica do artista */

.music-img {
  width: 100%;
  height: 240px;
  margin: 0;
  overflow: hidden;
  background-color: #666666;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.music-img:hover {
  background-color: #478B8D;
}


/* ===== */

.pesquisa li figure i {
  position: relative;
  top: 55px;
  left: 40%;
  font-size: 400%;
  color: #74C8D2;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.pesquisa li figure i:hover {
  color: #fff;
}


/* --------- IMPORTANTE --------*/


/*info da musica (ANIMAR E FAZER COM QUE AO FAZER HOVER NA MUSICA APAREÇA*/

.info-music {
  margin: 0 auto;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.46)));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.46));
  width: 100%;
  height: 100px;
  padding: 0;
  top: 22%;
  position: relative;
  z-index: 1000;
}

.info-music h6 {
  margin: 0 10px;
  color: #000;
  text-align: center;
  font-size: 80%;
  position: relative;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 300;
  top: 25%;
  z-index: 1000;
}


/*----------------Container dos botoes--------------------*/

.result-info {
  position: relative;
  list-style: none;
  display: inline-block;
  width: 100%;
  z-index: 1;
}

.result-info li {
  display: block;
  float: left;
  width: 33.33%;
  z-index: 1;
}

.result-info .btn-playlists {
  width: 100%;
  height: 240px;
  margin-top: -1%;
  color: #fff;
  border: 0;
  background-color: #67AEB4;
  text-decoration: none;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 1;
}

.result-info .btn-playlists:hover {
  background-color: #fff;
  color: #67AEB4;
  text-decoration: none;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 1;
}

.result-info .btn-albums {
  width: 100%;
  height: 240px;
  margin-top: -1%;
  color: #fff;
  border: 0;
  background-color: #54A5AC;
  text-decoration: none;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 1;
}

.result-info .btn-albums:hover {
  background-color: #fff;
  color: #54A5AC;
  text-decoration: none;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 1;
}

.result-info .btn-bio {
  width: 100%;
  height: 240px;
  margin-top: -1%;
  color: #fff;
  border: 0;
  background-color: #478B8D;
  text-decoration: none;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 1;
}

.result-info .btn-bio:hover {
  background-color: #fff;
  color: #478B8D;
  text-decoration: none;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  z-index: 1;
}

.result-info li button i {
  display: block;
  font-size: 250%;
}


/* ---------------------------------------------- */


/* SEE MORE DO ARTIST */


/* ---------------------------------------------- */


/*container da pesquisa*/

.container-more-music {
  position: absolute;
  top: 120.8%;
  width: 100%;
}


/*estilização do titulo "you searched for...*/

.container-more-music h3 {
  text-align: center;
  text-transform: uppercase;
  font-size: 100%;
  font-weight: 300;
  letter-spacing: 1px;
}


/*container da pesquisa 1*/

.see-more-music {
  list-style: none;
  display: inline-block;
  width: 100%;
  height: 100%;
  margin-top: 1%;
  top: -80%;
}

.see-more-music li {
  display: block;
  float: left;
  width: 20%;
  height: 240px;
}


/* Container imagem da musica do artista */

.music-img {
  width: 100%;
  height: 240px;
  margin: 0;
  overflow: hidden;
  background-color: #666666;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.music-img:hover {
  background-color: #47888D;
}


/* img do artista */

.see-more-music li img {
  width: 100%;
  height: 100%;
}

.see-more-music li figure i {
  position: relative;
  top: 55px;
  left: 40%;
  font-size: 400%;
  color: #74C8D2;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.see-more-music li figure i:hover {
  color: #fff;
}

<!----------- Resultado de pesquisa de artista----------->

<div class="div-pesquisa wow FadeIn">

  <div class="row">
    <h3></h3>
  </div>


  <ul class="pesquisa Clearfix">

    <li><button class="go-back-btn" type="button" name="button" id="back-form-artist"><i class="ion-ios-arrow-back"></i>GO BACK</button></li>

    <li id="topmusic1">
      <figure class="music-img">
        <i class="ion-ios-play-circle"></i>
        <div class="info-music">
          <h6>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h6>
        </div>
      </figure>
    </li>

    <li id="topmusic2">
      <figure class="music-img">
        <i class="ion-ios-play-circle"></i>
        <div class="info-music">
          <h6>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h6>
        </div>
      </figure>
    </li>

    <li id="topmusic3">
      <figure class="music-img">
        <i class="ion-ios-play-circle"></i>
        <div class="info-music">
          <h6>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h6>
        </div>
      </figure>
    </li>


    <li><button class="see-more-btn" href="#more-music" type="button" name="button" id="your-playlist"><i class="ion-ios-add"></i>SEE MORE</button></li>

  </ul>




  <ul class="result-info">
    <li><button class="btn-playlists" type="button" name="button" id="your-playlist"><i class="ion-ios-musical-notes"></i>PLAYLISTS</button></li>

    <li><button class="btn-albums" type="button" name="button" id="top-albums"><i class="ion-ios-albums"></i>TOP ALBUMS</button></li>

    <li><button class="btn-bio" type="button" name="button" id="biography"><i class="ion-ios-person"></i>BIOGRAPHY</button></li>
  </ul>

</div>







<!------------------------- SEE MORE MUSIC ----------------------------->


<div class="container-more-music" id="more-music" style="overflow:scroll; height:400px;">

  <div class="row">
    <h3>You searched for...</h3>
  </div>


  <ul class="see-more-music Clearfix">

    <li><button class="go-back-btn" type="button" name="button" id="your-playlist"><i class="ion-ios-arrow-back"></i>GO BACK</button></li>

  </ul>
</div>

html css posicionamento navegador

asked by anonymous 14.05.2018 / 21:20

1 answer

Module not found: Can not resolve 'assets / css / custom.css' Google Play API

score 0 · Accepted Answer

The explanation is that although the HTML standard is the same for all browsers, there are minor differences in implementations. That's why you see differences.

It's not their fault, the HTML standard most likely leaves some small things at the discretion of browsers.