1

El margin-top de los elementos internos de mi contenedor en Firefox no se ve, mientras que en Chrome sí se ve, dejo imágenes adjuntas:

La de arriba es en firefox y no se ve el margin-top como en Chrome que es el de abajo.

EL código es el siguiente:

* {
  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>

¿Por qué ocurre eso y cómo puedo hacer que se vea igual en ambos navegadores?

3
  • Bienvenido @ilion_2017. Va a ser complicado que alguien pueda ayudarte sin ver el código. Commented el 6 dic. 2017 a las 12:06
  • cierto, lo edito ahora mismo :D
    – ILION_2017
    Commented el 6 dic. 2017 a las 12:08
  • listo, ya puse el código.
    – ILION_2017
    Commented el 6 dic. 2017 a las 12:32

3 respuestas 3

1

Para dar solución a tu problema yo agregaría un padding-top al padre (.initWrapPages) del mismo valor que tiene el margin-top de los contenedores hijos (.initPage) y éstos últimos les quitaría el 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>

1

prueba aplicarle el margin-top:10% a initWrapPages y no a initPage puesto que el anterior es el padre y es quien debe ir separado. Te quedaria así:

.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;

}

2
  • Muchísimas gracias, lo había pensado pero mientras dormía, pero tenéis toda la razón y ha funcionado perfectamente como quería, muchísimas gracias a los dos.
    – ILION_2017
    Commented el 6 dic. 2017 a las 13:55
  • Al parecer los valores en el margin con poercentajes no lo reconoce (Firefox), probé por curiosidad en pixeles y si surgió efecto.
    – ILION_2017
    Commented el 6 dic. 2017 a las 14:04
1

El problema ocurre por cómo estás definiendo los márgenes usando porcentajes, y a que el contenedor (initWrapPages) tiene display:flex. Y no es un problema con tu código en sí, sino con la manera de interpretarlo que tiene cada navegador.

Como se explica en esta respuesta del sitio en inglés, cuando se usa flexbox, Chrome y Safari resuelven los porcentajes de la altura de los elementos flex basándose en la propiedad height del padre. En cambio, Firefox e IE11/Edge dan prioridad a la altura flex del padre.

Es por eso que si defines la altura del padre (initWrapPages) a un valor concreto, aunque eso puede no valerte en tu caso en concreto. Otra posible solución sería añadir padding-top al padre (como te comentan en otra respuesta).

Y otra posible solución sería añadir un div intermedio dentro de .initWrapPages que contenga los .initPage, y al que moverías los estilos 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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.