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>
Can you do a [mcve]? Probably most people here will have these two browsers installed and can test their example.
– Woss
It already includes the code!
– Nelson Pacheco
I tested the code on both browsers and the result was strictly the same.
– Sam