HTML looks different between firefox and chrome

Question

HTML looks different between firefox and chrome

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)

1

The margin-top of the internal elements of my container in Firefox can not be seen, while in Chrome it can be seen, I leave images attached:

The code is as follows:

* {
  padding: 0;
  margin: 0;
}

.initWrapPages {
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.initPage img {
  width: 100%;
  border-radius: 1px 1px 0 0;
}

.initPagesText {
  height: 10%;
}

.initPagesText h4 {
  padding-left: 5%;
  padding-right: 5%;
}

.initPagesText p {
  padding-left: 10%;
  padding-right: 10%;
}

.initPagesText a {
  text-decoration: none;
}

.initPage {
  background: #D2D9D2;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.8);
  width: 20%;
  text-align: center;
  float: left;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 10%;
  border-radius: 3px 3px 2px 2px;
}

<div class="initWrapPages">
  <div class="initPage">
    <img src="img/home/image_default.png">
    <div class="initPagesText">
      <h4>'FALKLANDS WAR' el tema que está dando que hablar!</h4>
      <p>Acabamos de lanzar el primer single de nuestro EP/LP 'Below The Lines' vol I, la acogida del público es destacable, te preguntarás ¿PORQUÉ? pues que no te lo cuenten míralo tu mismo, vamos!</p>
    </div>
  </div>
  <div class="initPage">
    <img src="img/home/image_default.png">
    <div class="initPagesText">
      <h4>NUEVAS CAMISETAS DISPONIBLES!</h4>
      <p>Hemos actualizado nuestro merchandising con las nuevas camisetas recién adquiridas, con un diseño que a todos os va a gustar!, hecho por nuestro colaborador Pepito, tenéis los precios y promos disponibles en esta sección!, no lo dudes y entra!</p>

    </div>
  </div>
  <div class="initPage">
    <img src="img/home/image_default.png">
    <div class="initPagesText">
      <h4>Disponible 'Below The Lines' vol I</h4>
      <p>La primera parte de nuestro LP ha sido subido a las redes para el disfrute de todo el público, además de escuchar los nuevos temas podréis obtener free download del vol I, </p>
    </div>

  </div>
  <div class="initPage">
    <img src="img/home/image_default.png">
    <div class="initPagesText">
      <h4>Nuestro Team</h4>
      <p>No siempre trabajamos solos, siempre tenemos ayuda a nivel multimedia y fotografico de nuestro equipo que siempre están apoyando la música, entra y conócelos, te pueden interesar!</p>
    </div>

  </div>
</div>

Why is that happening and how can I make it look the same in both browsers?

javascript html5 html css3 css

asked by ILION_2017 06.12.2017 в 12:57

source

3 answers

1

try to apply the margin-top:10% to initWrapPages and not to initPage since the previous one is the father and it is the one who should go separately. It would look like this:

.initWrapPages {
position: relative;
width: 90%;
margin: 0 auto;
margin-top: 10%;
padding-bottom: 1000px;
display: flex;
flex-wrap: wrap;
justify-content: center;

}

.initPage {
 background: #D2D9D2;
 box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.8);
 width: 20%;
 text-align: center;
 float: left;
 margin-left: 2%;
 margin-right: 2%;  
 border-radius: 3px 3px 2px 2px;

}

answered by 06.12.2017 в 14:14

1

The problem occurs because of how you are defining the margins using percentages, and because the container ( initWrapPages ) has display:flex . And it's not a problem with your code itself, but with the way that each browser interprets it.

As explained in this English site response , when using flexbox, Chrome and Safari solve the percentages of the height of the flex elements based on the height property of the parent. In contrast, Firefox and IE11 / Edge give priority to the parent's flex height.

That's why if you define the height of the father ( initWrapPages ) to a specific value, although that may not be valid in your case in particular. Another possible solution would be to add padding-top to the parent (as they tell you in another answer).

And another possible solution would be to add a div intermediate within .initWrapPages that contains the .initPage , and to which you would move the styles flex :

* {
  padding: 0;
  margin: 0;
}

.initWrapPages {
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 1000px;

}

.initWrapPagesContainer {
    display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.initPage img {
  width: 100%;
  border-radius: 1px 1px 0 0;
}

.initPagesText {
  height: 10%;
}

.initPagesText h4 {
  padding-left: 5%;
  padding-right: 5%;
}

.initPagesText p {
  padding-left: 10%;
  padding-right: 10%;
}

.initPagesText a {
  text-decoration: none;
}

.initPage {
  background: #D2D9D2;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.8);
  width: 20%;
  text-align: center;
  float: left;
  margin-left: 2%;
  margin-right: 2%;
  margin-top: 10%;
  border-radius: 3px 3px 2px 2px;
}

<div class="initWrapPages">
  <div class="initWrapPagesContainer">
    <div class="initPage">
      <img src="img/home/image_default.png">
      <div class="initPagesText">
        <h4>'FALKLANDS WAR' el tema que está dando que hablar!</h4>
        <p>Acabamos de lanzar el primer single de nuestro EP/LP 'Below The Lines' vol I, la acogida del público es destacable, te preguntarás ¿PORQUÉ? pues que no te lo cuenten míralo tu mismo, vamos!</p>
      </div>
    </div>
    <div class="initPage">
      <img src="img/home/image_default.png">
      <div class="initPagesText">
        <h4>NUEVAS CAMISETAS DISPONIBLES!</h4>
        <p>Hemos actualizado nuestro merchandising con las nuevas camisetas recién adquiridas, con un diseño que a todos os va a gustar!, hecho por nuestro colaborador Pepito, tenéis los precios y promos disponibles en esta sección!, no lo dudes y entra!</p>

      </div>
    </div>
    <div class="initPage">
      <img src="img/home/image_default.png">
      <div class="initPagesText">
        <h4>Disponible 'Below The Lines' vol I</h4>
        <p>La primera parte de nuestro LP ha sido subido a las redes para el disfrute de todo el público, además de escuchar los nuevos temas podréis obtener free download del vol I, </p>
      </div>

    </div>
    <div class="initPage">
      <img src="img/home/image_default.png">
      <div class="initPagesText">
        <h4>Nuestro Team</h4>
        <p>No siempre trabajamos solos, siempre tenemos ayuda a nivel multimedia y fotografico de nuestro equipo que siempre están apoyando la música, entra y conócelos, te pueden interesar!</p>
      </div>

    </div>
  </div>
</div>

answered by 06.12.2017 в 15:27

The links must have text Add icon fa in a text box

score 1 · Accepted Answer

To solve your problem, I would add a padding-top to the parent ( .initWrapPages ) of the same value as the margin-top of the child containers ( .initPage ) and the latter would remove the margin-top .

* {
  padding: 0;
  margin: 0;
}

.initWrapPages {
  position: relative;
  width: 90%;
  margin: 0 auto;
  padding-bottom: 1000px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 10%;
}

.initPage img {
  width: 100%;
  border-radius: 1px 1px 0 0;
}

.initPagesText {
  height: 10%;
}

.initPagesText h4 {
  padding-left: 5%;
  padding-right: 5%;
}

.initPagesText p {
  padding-left: 10%;
  padding-right: 10%;
}

.initPagesText a {
  text-decoration: none;
}

.initPage {
  background: #D2D9D2;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.8);
  width: 20%;
  text-align: center;
  float: left;
  margin-left: 2%;
  margin-right: 2%;
  border-radius: 3px 3px 2px 2px;
}

<div class="initWrapPages">
  <div class="initPage">
    <img src="img/home/image_default.png">
    <div class="initPagesText">
      <h4>'FALKLANDS WAR' el tema que está dando que hablar!</h4>
      <p>Acabamos de lanzar el primer single de nuestro EP/LP 'Below The Lines' vol I, la acogida del público es destacable, te preguntarás ¿PORQUÉ? pues que no te lo cuenten míralo tu mismo, vamos!</p>
    </div>
  </div>
  <div class="initPage">
    <img src="img/home/image_default.png">
    <div class="initPagesText">
      <h4>NUEVAS CAMISETAS DISPONIBLES!</h4>
      <p>Hemos actualizado nuestro merchandising con las nuevas camisetas recién adquiridas, con un diseño que a todos os va a gustar!, hecho por nuestro colaborador Pepito, tenéis los precios y promos disponibles en esta sección!, no lo dudes y entra!</p>

    </div>
  </div>
  <div class="initPage">
    <img src="img/home/image_default.png">
    <div class="initPagesText">
      <h4>Disponible 'Below The Lines' vol I</h4>
      <p>La primera parte de nuestro LP ha sido subido a las redes para el disfrute de todo el público, además de escuchar los nuevos temas podréis obtener free download del vol I, </p>
    </div>

  </div>
  <div class="initPage">
    <img src="img/home/image_default.png">
    <div class="initPagesText">
      <h4>Nuestro Team</h4>
      <p>No siempre trabajamos solos, siempre tenemos ayuda a nivel multimedia y fotografico de nuestro equipo que siempre están apoyando la música, entra y conócelos, te pueden interesar!</p>
    </div>

  </div>
</div>