Objects change position when switching from browser

Asked

Viewed 39 times

0

Can anyone tell me why when switching from browser, from Chrome to Firefox, the relative positions I gave in CSS change? Normally I 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 browser positioning
  • 3

    Can you do a [mcve]? Probably most people here will have these two browsers installed and can test their example.

  • It already includes the code!

  • 1

    I tested the code on both browsers and the result was strictly the same.

1 answer

0


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 even their fault, the HTML standard most likely leaves a few small things at the discretion of browsers.

Browser other questions tagged html css browser positioning

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