0

estoy por terminar mi primer proyecto web y cuando estoy revisando los navegadores me encuentro que firefox me causa el siguiente error en el footer.

Fallo con firefox Formato correcto chrome, opera, safari

Como verán en los demás navegadores funciona y se ve perfectamente en firefox es el único que me crea ese espacio, si me pueden ayudar se los agradecería. Aquí les dejo el código:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/modernizr-custom.js"></script>
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/fonts/fonts.css">
    <link rel="stylesheet" type="text/css" href="css/icomoon.css">
    <link rel="stylesheet" type="text/css" href="css/desing.css">
</head>
<body>
    <header>
<!---------------------------INICIO LOGO Y TITULO---------------------------->
        <h1>
            <a href="index.html">
                <figure id="logo">
                    <img src="image/logo.png">
                </figure>
            </a>

<!--------------EL TITULO SE OCULTA AL ESTAR MOBIL--------------------------->
            <div id="io_title">
                <a href="index.html"></a>
            </div>
        </h1>
<!---------------------------FIN LOGO Y TITULO----------------------------   >


<!---------------------------INICIO DEL MENU    ---------------------------->

        <nav id="ioMenu">
            <div id="showMenu" class="ioMenuMovil" onclick="displayMenu()">
                <a class="icon-menu2" href="#"></a> 
            </div>

            <div id="hideMenu" class="ioMenuMovil" onclick="displayMenu()">
                    <a class="icon-close" href="#"></a>
            </div>

            <div id="card_menu">    
                <ul>
                    <li><a href="#">Tramites</a></li>
                    <li><a href="#">Tips</a></li>
                    <li><a href="#">Estilo de Vida</a></li>
                    <li><a href="#">Guía para Emigrar</a></li>
                    <li><input id="search" placeholder="Buscar" type="text" name="search"><button type="submit" class="icon-search"></button></li>
                </ul>
            </div>
        </nav>
    </header>

<!------------------------------FIN DEL MENU------------------------------------>

    <section>
        <article id="initialArticle">
            <a href="">
                <figure>
                    <img src="image/imagePrueba.jpg">
                </figure>           
            </a>
            <a href="">
                <h3>El próximo iPhone X y iPhone x plus tendrán soporte de Apple pencil: reportes.</h3>
            </a>
        </article>

        <article class="allArticles">
            <div class="contenedor">
                <a href="">
                    <figure>
                        <img src="image/imagePrueba.jpg">
                    </figure>           
                </a>
                <a href="">
                    <p>El próximo iPhone X y iPhone x plus tendrán soporte de Apple pencil: reportes.</p>
                </a>    
                    <p class="date">Publicado: 22/02/36</p>
                    <a href="#"><p class="tag">Guía para Emigrar</p></a>
            </div>
        </article>

        <article class="allArticles">
            <div class="contenedor">
                <a href="">
                    <figure>
                        <img src="image/imagePrueba.jpg">
                    </figure>           
                </a>
                <a href="">
                    <p>El próximo iPhone X y iPhone x plus tendrán soporte de Apple pencil: reportes.</p>
                </a>    
                    <p class="date">Publicado: 22/02/36</p>
                    <a href="#"><p class="tag">Guía</p></a>
            </div>  
        </article>

        <article class="allArticles">
            <div class="contenedor">
                <a href="">
                    <figure>
                        <img src="image/imagePrueba.jpg">
                    </figure>           
                </a>
                <a href="">
                    <p>El próximo iPhone X y iPhone x plus tendrán soporte de Apple pencil: reportes.</p>
                </a>    
                    <p class="date">Publicado: 22/02/36</p>
                    <a href="#"><p class="tag">Guía</p></a>
            </div>  
        </article>
    </section>

    <div class="buttonsPages">
        <div id="index">
            <a href="#">Más Artículos</a>
        </div>

        <div id="general">
            <a href="#">Más Recientes</a>
            <a href="#">Portada</a>
            <a href="#">Más Antiguas</a>
        </div>
    </div>


<!-----------------------------INICIO DEL FOOTER-------------------------------->

    <footer>
        <div id="aboutme">
            <h3>Acerca de mí...</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            </p>
        </div>


        <div class="rrss">
            <p><strong>Encuentrame en:</strong></p>
            <a href="#"></a>
            <a href="" target="_blank"></a>
            <a href="" target="_blank"></a>
            <a href="#"></a>
        </div>

        <div class="suscription">
            <p>Recibe nuestras publicaciones en tu email.</p>
            <input type="mail" name="email" placeholder="Ingresa tu email" id="input_registro">
            <input type="button" id="button_registro" name="button_registro" value="Registrar">
        </div>

        <div id="derechos">
            <p>© 2018 All rights reserved | Privacity Policy</p>
        </div>

    </footer>

<!-----------------------------FIN DEL FOOTER-------------------------------->

    <script>
        function displayMenu()
        {
            var display;
            var card_menu = document.getElementById("card_menu");
            display = card_menu.style.display;

            if (display == "none" || display == "") 
            {
                card_menu.style.display = "block";
            }
            else
            {
                card_menu.style.display = "none";
            }
        }
    </script>
</body>
</html>

Este seria el css:

   *
{
    margin: 0px;
    padding: 0px;
}

body
{
    font-size: 16px;
    font-family: 'Roboto';
    background: rgb(230,230,230);
    position: relative;
}

header
{
    position: relative;
    height: 70px;
    width: 100%;
    background: rgb(48,51,46);
}

header h1 > *
{
    display: inline-block;
}

header h1
{
    display: inline-block;
    margin: 0px;
    padding: 0px;
    height: 70px;
    margin-left: 15px;
}

header h1 figure
{
    margin: 0px;
    padding: 0px;
    height: 50px;
    width: 50px;
    margin-top: 10px;
}

header h1 figure img
{
    width: 100%;
    height: 100%;
}

header h1 #io_title
{
    display: none;
}

header nav #showMenu,
header nav #hideMenu
{
    position: absolute;
    height: 50px;
    width: 50px;
    right: 15px;
    top: 5px;
}

header nav a
{
    margin: 0px;
    padding: 0px;
}

header nav #showMenu a,
header nav #hideMenu a
{
    text-decoration: none;
    color: white;
    font-size: 60px;
    text-align: center;
    vertical-align: middle;
    margin: 0px;
    padding: 0px;
}

header nav #hideMenu
{
    display: none;
}

header nav #card_menu
{
    display: none;
    position: relative;
    width: 100%;
    height: 450px;
    background: rgba(48,51,46,0.8);
    z-index: 999;
    margin: 0px;
    padding-bottom: 35px;
}

header nav ul
{
    position: relative;
    top: 45px;
    width: 90%;
    margin-left: 5%;
}

header nav ul li
{
    list-style: none;
    text-align: center;
    font-size: 1.1em;
    line-height: 65px;
    margin-bottom: 10px;
}

header nav ul li input
{
    width: 75%;
}

header nav ul li button
{
    position: relative;
    top: 2px;
    height: 31.5px;
    width: 31.5px;
    background: rgba(48,51,46,0.7);
    border: none;
}

header nav ul li a
{
    text-decoration: none;
    color: white;
    padding: 18px 50px 18px 50px;
}

section
{
    position: relative;
    width: 100%;
    height: 100vh;
}

section div#category
{
    position: relative;
    width: 60%;
    height: 55px;
    margin-left: 20%;
    margin-top: 15px;
    border-bottom: 1px solid rgb(48,51,46);
}

section div#category p
{
    position: relative;
    text-align: center;
    color: rgb(48,51,46);
    top: 20px;
}

section article#initialArticle
{
    width: 100%;
    height: 350px;
    padding-bottom: 20px;
    border: none;
    background: white;
    border-bottom: 1px solid black;
}

section article#initialArticle figure
{
    height: 85%;
}

section article#initialArticle figure img
{
    height: 100%;
    width: 100%;
}

section article#initialArticle a
{
    text-decoration: none;
}

section article#initialArticle h3
{
    color: black;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 26px;
}

section article.allArticles
{
    position: relative;
    margin-top: 10px;
    height: 170px;
    background: white;
    border:none;
    border-bottom: 1px solid black;
}

section article.allArticles .contenedor
{
    position: relative;
    width: 95%;
    height: 90%;
    margin-left: 2.5%;
    top: 5%;
}

section article.allArticles .contenedor a
{
    text-decoration: none;
}

section article.allArticles .contenedor figure
{
    position: relative;
    width: 35%;
    height: 80%;
    top: 15.3px;
}


section article.allArticles .contenedor figure img
{
    width: 100%;
    height: 100%;
}

section article.allArticles .contenedor p
{
    position: absolute;
    left: 40%;
    top: 15.3px;
    width: 60%;
    font-size: 1em;
    color: black;
}

section article.allArticles .contenedor p.tag,
section article.allArticles .contenedor p.date
{
    display: none;
}

section#article article div#imagen
{
    width: 100%;
    height: 350px;
}

section#article article div#imagen figure
{
    width: 100%;
    height: 100%;
}

section#article article div#imagen figure img
{
    width: 100%;
    height: 100%;
}

section#article article div#articulo
{
    position: relative;
    width: 90%;
    margin-left: 5%;
}

section#article article div#articulo div#beforeTitle
{
    position: relative;
    margin-top: 25px;

}

section#article article div#articulo div#beforeTitle p
{
    display: inline-block;
    color: #1da1f2;
    font-size: 1em;
}

section#article article div#articulo div#beforeTitle a
{
    float: right;
    text-decoration: none;
    font-size: 1.3em;
    margin-left: 9px;
}

section#article article div#articulo div#beforeTitle a:nth-of-type(1):before
{
    font-family: 'icomoon';
    content: "\e905";
    color: #f8931f;
}

section#article article div#articulo div#beforeTitle a:nth-of-type(2):before
{
    font-family: 'icomoon';
    content: "\e90c";
    color: #25d366;
}

section#article article div#articulo div#beforeTitle a:nth-of-type(3):before
{
    font-family: 'icomoon';
    content: "\e90b";
    color: #1da1f2;

}

section#article article div#articulo div#beforeTitle a:nth-of-type(4):before
{
    font-family: 'icomoon';
    content: "\e909";
    color: #3b5998; 
}

section#article article h3#title
{
    clear: both;
    margin-top: 25px;
    text-align: left;
    margin-bottom: 25px;
}

section#article article div#articulo div#afterTitle p:nth-of-type(1)
{
    display: inline-block;
    color: #1da1f2;
}

section#article article div#articulo div#afterTitle p:nth-of-type(2)
{
    display: inline-block;
    float: right;
    color: rgb(210,210,210);
}

section#article article div#bodyArticle
{
    padding-top: 35px;
    background: rgb(255,255,255);
}

section#article article div#bodyArticle p
{
    text-indent: 0.5cm;
    text-align: justify;
}



div.buttonsPages
{
    position: relative;
    top: 375px;
    width: 90%;
    margin-left: 5%;
    text-align: center;
}

div.buttonsPages #index
{
    display: none;
}

div.buttonsPages #general
{
    display: ;
    position: relative;
    top: 0px;
}

div.buttonsPages #index a
{
    text-decoration: none;
    font-size: 0.8em;
    color: black;
    vertical-align: middle;
    background: white;
    padding: 15px 50px 15px 50px;
}

div.buttonsPages #general a
{
    display: inline-block;
    text-decoration: none;
    font-size: 0.9em;
    color: black;
    vertical-align: middle;
    background: white;
    margin-left: auto;
    padding: auto;
}

footer
{
    width: 100%;
    background: rgb(48,51,46);
    color: white;
    position: absolute;
    top: 1500px;/*SOLO SE DEBE AUMENTAR EL VALOR PARA BAJAR EL FOOTER*/
}

footer div
{
    width: 80%;
    margin-left: 10%;
}

footer div#aboutme
{
    margin-top: 30px;
}

footer div#aboutme p
{
    margin-top: 15px;
    text-align: justify;
    padding-bottom: 25px;
}

footer div.rrss
{
    padding-bottom: 25px;
    text-align: center;
}

footer div.rrss a
{
    position: relative;
    margin-top: 15px;
    margin-left: auto;
    left: 8px;
    width: 50px;
    height: 50px;
    display: inline-block;
    font-size: 2.5em;
    text-align: center;
    text-decoration: none;
}


footer div.rrss a:nth-of-type(1):before
{
    font-family: 'icomoon';
    content: "\e909";
    color: #3b5998;
}

footer div.rrss a:nth-of-type(2):before
{
    font-family: 'icomoon';
    content: "\e90b";
    color: #1da1f2;
}

footer div.rrss a:nth-of-type(3):before
{
    font-family: 'icomoon';
    content: "\e90a";
    color: #0077b5;
}

footer div.rrss a:nth-of-type(4):before
{
    font-family: 'icomoon';
    content: "\e905";
    color: white;
}

footer div.suscription
{
    padding-bottom: 20px;
}

footer div.suscription p
{
    padding-bottom: 15px;
    text-align: center;
}

footer div.suscription input
{
    display: inline-block;
    margin-left: 10%;
    border: none;
}

footer div.suscription input#input_registro
{
    width: 50%;
    border-bottom: 1px solid black;
}

footer div.suscription input#button_registro
{
    width: 30%;
    margin-left: 0px;
}

footer div#derechos
{
    font-size: 0.8em;
    text-align: center;
    padding-bottom: 15px;
}



@media screen and (min-width: 480px)
{
    body
    {
        background: red;
        background: rgb(230,230,230);
    }

    section#article article div#articulo div#beforeTitle
    {
        position: relative;
        margin-top: 35px;
    }

    section#article article div#articulo div#beforeTitle p
    {
        display: inline-block;
        color: #1da1f2;
        font-size: 1.2em;
    }

    section#article article div#articulo div#beforeTitle a
    {
        float: right;
        text-decoration: none;
        font-size: 1.3em;
        margin-left: 13px;
    }

    section#article article h3#title
    {
        clear: both;
        font-size: 1.3em;
        margin-top: 30px;
        text-align: left;
        margin-bottom: 30px;
    }

    section#article article div#bodyArticle
    {
        padding-top: 35px;
        background: rgb(255,255,255);
    }

    section#article article div#bodyArticle p
    {
        text-indent: 0.5cm;
        text-align: justify;
        font-size: 1.1em;
    }

    div.buttonsPages
    {
        position: relative;
        top: 375px;
        width: 90%;
        margin-left: 5%;
        text-align: center;
    }

    div.buttonsPages #index
    {
        display: none;
    }

    div.buttonsPages #general
    {
        display: ;
        position: relative;
        top: -25px;
    }

    div.buttonsPages #index a
    {
        text-decoration: none;
        font-size: 0.8em;
        color: black;
        vertical-align: middle;
        background: white;
        padding: 15px 55px 15px 55px;
    }

    div.buttonsPages #general a
    {
        display: inline-block;
        text-decoration: none;
        font-size: 0.8em;
        color: black;
        vertical-align: middle;
        background: white;
        margin-left: 10px;
        padding: 15px 19px 15px 19px;
    }

    footer div.rrss
    {
        text-align: center;
    }

    footer div.rrss a
    {
        position: relative;
        margin-top: 15px;
        margin-left: 5px;
        left: 8px;
        width: 50px;
        height: 50px;
        display: inline-block;
        font-size: 2.5em;
        text-align: center;
        text-decoration: none;
    }
}

@media screen and (min-width: 600px)
{
    body
    {
        background: orange;
        background: rgb(230,230,230);
    }

    section#article article div#imagen
    {
        width: 100%;
        height: 450px;
    }

    section#article article div#articulo
    {
        position: relative;
        width: 80%;
        margin-left: 10%;
    }

    section#article article div#articulo div#beforeTitle
    {
        position: relative;
        margin-top: 45px;

    }

    section#article article div#articulo div#beforeTitle p
    {
        display: inline-block;
        color: #1da1f2;
        font-size: 1.3em;
    }

    section#article article div#articulo div#beforeTitle a
    {
        float: right;
        text-decoration: none;
        font-size: 1.5em;
        margin-left: 17px;
    }

    section#article article h3#title
    {
        clear: both;
        margin-top: 35px;
        font-size: 1.7em;
        text-align: left;
        margin-bottom: 35px;
    }

    section#article article div#articulo div#afterTitle p
    {
        font-size: 1.1em;
    }

    section#article article div#bodyArticle
    {
        padding-top: 45px;
        background: rgb(255,255,255);
    }

    section#article article div#bodyArticle p
    {
        text-indent: 0.7cm;
        font-size: 1.1em;
        text-align: justify;
    }

    div.buttonsPages #index a
    {
        text-decoration: none;
        font-size: 0.8em;
        color: black;
        vertical-align: middle;
        background: white;
        padding: 15px 55px 15px 55px;
    }

    div.buttonsPages #general a
    {
        display: inline-block;
        text-decoration: none;
        font-size: 0.8em;
        color: black;
        vertical-align: middle;
        background: white;
        margin-left: 15px;
        padding: 15px 30px 15px 30px;
    }
}

@media screen and (min-width: 767px)
{
    body
    {
        background: yellow;
        /*background: rgb(230,230,230);*/
    }

    header
    {
        height: 100px;
    }

    header h1
    {
        height: 100px;
        width: 25%;
        min-width: 250px;
        margin-left: 20px;
    }

    header h1 figure
    {
        height: 60px;
        width: 60px;
        margin-top: 20px;
    }

    header h1 figure img
    {
        height: 100%;
        width: 100%;
    }

    header h1 #io_title
    {
        display: inline-block;
        height: 100px;
        vertical-align: middle;
    }

    header h1 #io_title a
    {
        text-decoration: none;
        color: white;
        font-size: 0.5em;
        position: relative;
        top: 10px;
    }

    header nav
    {
        vertical-align: middle;
        width: 60%;
        height: 100px;
        position: absolute;
        top: 0px;
        left: 35%;
        margin-left: 30px;
    }

    header nav #showMenu,
    header nav #hideMenu
    {
        display: none;
    }

    header nav #card_menu
    {
        display: inline-block;
        height: 0px;
        background: none;
        position: relative;
        width: 100%;
        padding-bottom: 0px;
    }

    header nav #card_menu ul
    {
        margin: 0px;
        padding: 0px;
        width: 100%;
        margin-top: -95px;
        text-align: right;
    }

    header nav #card_menu ul li
    {
        margin: 0px -2px;
        padding: 0px;
        display: inline-block;
        text-align: center;
        line-height: 40px;
        width: 120px;
        font-size: 1em;
    }

    header nav #card_menu ul li:nth-child(1)
    {
        width: 85px;
    }

    header nav #card_menu ul li:nth-child(2)
    {
        width: 75px;
    }

    header nav #card_menu ul li:nth-child(4)
    {
        width: 150px;
    }

    header nav #card_menu ul li:nth-child(5)
    {
        display: none;
    }


    header nav #card_menu ul li a
    {
        margin: 0px;
        padding: 0px;
    }

    section
    {
        position: relative;
        width: 55%;
        margin-left: 15%;
        height: 100vh;
    }

    section div#category
    {
        margin-left: 0%;
        position: relative;
        width: 100%;
        height: 55px;
        margin-top: 45px;
        margin-bottom: 35px;
        border-bottom: 1px solid #1da1f2;
    }

    section div#category p
    {
        position: relative;
        margin-left: 15%;
        text-align: left;
        color: rgb(48,51,46);
        top: 20px;
    }

    section article#initialArticle
    {
        width: 100%;
        height: 500px;
        border: none;
        padding: 0px;
    }

    section article#initialArticle figure
    {
        width: 100%;
        height: 100%;
    }

    section article#initialArticle figure img
    {
        width: 100%;
        height: 100%;
    }

    section article#initialArticle a h3
    {
        position: absolute;
        color: white;
        background: rgba(48,51,46,0.5);
        top: 350px;
    }

    section article.allArticles
    {
        position: relative;
        margin-top: 15px;
        height: 250px;
        background: white;
        border:none;
        border-bottom: 1px solid black;
    }

    section article.allArticles .contenedor
    {
        position: relative;
        width: 95%;
        height: 90%;
        margin-left: 2.5%;
        top: 5%;
    }

    section article.allArticles .contenedor a
    {
        text-decoration: none;
    }

    section article.allArticles .contenedor figure
    {
        position: relative;
        width: 35%;
        height: 80%;
        top: 15.3px;
    }


    section article.allArticles .contenedor figure img
    {
        width: 100%;
        height: 100%;
    }

    section article.allArticles .contenedor p
    {
        position: absolute;
        left: 40%;
        top: 15.3px;
        width: 60%;
        font-size: 1em;
        color: black;
    }

    section article.allArticles .contenedor p.date,
    section article.allArticles .contenedor p.tag
    {
        display: inline-block;
        position: relative;
        color: #1da1f2;
        top: 30px;
        left: 0px;
        width: auto;
        font-size: 0.8em;
        z-index: 10;
    }

    section article.allArticles .contenedor p.tag
    {
        position: relative;
        margin-right: 2.5px;
        float: right;
    }

    section#article
    {
        width: 65%;
    }

    section#article article div#imagen
    {
        width: 100%;
        height: 450px;
    }

    section#article article div#imagen figure
    {
        width: 100%;
        height: 100%;
    }

    section#article article div#imagen figure img
    {
        width: 100%;
        height: 100%;
    }

    section#article article
    {
        background: rgb(255,255,255);
    }

    section#article article div#articulo
    {
        position: relative;
        width: 100%;
        margin-left: 0%;
    }

    section#article article div#articulo div#beforeTitle
    {
        position: relative;
        margin-top: 0px;
        padding-top: 35px;      
    }

    section#article article div#articulo div#beforeTitle p
    {
        display: inline-block;
        color: #1da1f2;
        font-size: 1.3em;
    }

    section#article article div#articulo div#beforeTitle a
    {
        float: right;
        text-decoration: none;
        font-size: 1.3em;
        margin-left: 15px;
    }

    section#article article h3#title
    {
        font-size: 2em;
        clear: both;
        margin-top: 25px;
        margin-bottom: 25px;
        text-align: left;
    }

    section#article article div#articulo div#afterTitle p
    {
        font-size: 1.1em;
    }

    section#article article div#articulo div#afterTitle p:nth-of-type(1)
    {
        display: inline-block;
        color: #1da1f2;
    }

    section#article article div#articulo div#afterTitle p:nth-of-type(2)
    {
        display: inline-block;
        float: right;
        color: rgb(210,210,210);
    }

    section#article article div#bodyArticle
    {
        padding-top: 35px;
        background: rgb(255,255,255);
    }

    section#article article div#bodyArticle p
    {
        text-indent: 0.5cm;
        text-align: justify;
    }

    div.buttonsPages
    {
        position: relative;
        top: 915px;
        width: 55%;
        margin-left: 15%;
        text-align: center;
    }

    div.buttonsPages #index
    {
        display: none;
    }

    div.buttonsPages #general
    {
        display: ;
        position: relative;
        top: -25px;
    }

    div.buttonsPages #index a
    {
        text-decoration: none;
        font-size: 0.8em;
        color: black;
        vertical-align: middle;
        background: white;
        padding: 15px 25px 15px 25px;
    }

    div.buttonsPages #general a
    {
        display: inline-block;
        text-decoration: none;
        font-size: 0.8em;
        color: black;
        vertical-align: middle;
        margin-left: 0px;
        background: white;
        padding: 15px 10px 15px 10px;
    }

    div.buttonsPages #general a:nth-of-type(2)
    {
        margin-left: 15px;
    }

    div.buttonsPages #general a:nth-of-type(3)
    {
        margin-left: 15px;
    }

    footer 
    {
        position: relative;
        top: 900px;
        height: 330px;
    }

    footer div#aboutme
    {
        width: 50%;
        height: 300px;
        margin: 0px;
        padding-bottom: 0px;
    }

    footer div#aboutme h3
    {
        width: 80%;
        margin-left: 10%;
        padding-top: 20px;
    }

    footer div#aboutme p
    {
        width: 80%;
        margin-left: 10%;
        padding-top: 15px;
    }

    footer div.rrss
    {
        position: relative;
        width: 50%;
        height: 150px;
        margin: 0px;
        top: -300px;
        left: 50%;
        padding-bottom: 0px;
    }

    footer div.rrss p
    {
        padding-top: 30px;
    }

    footer div.rrss a
    {
        padding-top: 15px;
    }

    footer div.suscription
    {
        position: relative;
        width: 50%;
        height: 150px;
        margin: 0px;
        top: -300px;
        margin-left: 50%;
        padding-bottom: 0px;
        text-align: center;
    }

    footer div.suscription p
    {
        display: block;
        padding-top: 0px;
        padding-bottom: 30px;
    }

    footer div.suscription input:nth-of-type(1)
    {
        max-width: 175px;
    }

    footer div.suscription input:nth-of-type(2)
    {
        max-width: 125px;
        border: none;
        border-bottom: 1px solid white;
    }

    footer div#derechos
    {
        position: relative;
        top: -299px;
    }

    footer div#derechos p
    {
        position: relative;
        top: 15px;
    }

}

@media screen and (min-width: 950px)
{
    body
    {
        background: green;
        /*background: rgb(230,230,230);*/
    }

    section#article
    {
        width: 50%;
    }
}
9
  • footer está absolute respecto a que elemento? si la idea es que quede pegado al borde inferior ( sin usar fixed ) sin importar el contenido superior, hay un par de trucos para navegadores nuevos (salvo el especial edge) y algunos fixes para mobile. viendo el html completo se puede analizar el porqué de las diferencias el 1 sep. 2018 a las 18:06
  • Es absolute ya que lo quiero mover a abajo al final, pero no quiero que quede fijo, por eso no use el fixed.
    – shadowmors
    el 1 sep. 2018 a las 18:12
  • es lo que digo, si es esa la intención (no usar fixed) habría que ver el html completo y el css para ver donde está la diferencia del cálculo del alto del contenedor. como caso simple se puede implementar un flex, para algo mas compatible (IE 11 y edge y algunas versiones de iOS) hay soluciones javascript para recalcular el alto el 1 sep. 2018 a las 18:14
  • Ok, ya lo agrego. Acabo de probar con el position relative y tampoco, funciona.
    – shadowmors
    el 1 sep. 2018 a las 18:16
  • 1
    ya agregue todo el css
    – shadowmors
    el 1 sep. 2018 a las 18:18

2 respuestas 2

2

Ok hay una ensalada de position relatives y absolutes que al calcular el alto del html y del body de manera estricta el espacio que ves debajo es lo que sobra de aplicar un relative y luego un top:-300px por ejemplo.

Aquí te propongo usar un grid en el body y definir las áreas (me invente un tag para los botones que veo que tambíen van pegados al footer)

grid-template-areas: "header" "section" "botonera" "footer";

Es compatible con navegadores actuales, IE 11 y algunos iPhone antiguos pueden tener problemas en el cálculo del alto sobre todo cuando el contenido (section) no llena el alto de la ventana.

Para modificar los altos de las areas en cada resolución vas modificando

body {
  grid-template-rows: 100px  auto 120px 330px;
}

onda para achicar el menu:

body {
  grid-template-rows: 70px  auto 120px 330px;
}

Limpié hasta el primer breakpoint, sacando los absolutes y top de las areas, andá viendo si se entiende bien la forma de armar el html sin tantos absolutes y ajustando los otros breakpoints.

En el footer que es el mas propenso a empujar hacia abajo el alto del body, te cambié los relative a absolute para los diferentes elementos que contiene, asi no empuja y vuelve, sino que se colocan de manera absoluta con respecto al tag footer.

Otra cosa con cómo manejar los anchos de las cosas y sus márgenes sin tener que calcular el margen izquierdo es ponerlos con margen auto para los lados, por ejemplo:

div.buttonsPages {
  position: relative;
  width: 55%;
  margin: 30px auto;

Lo mismo para las sections, definís un max-width y el margin: 0 auto; te lo va centrando.

La idea principal es aprovechar la cascada del css y no reescribir/calcular tanto.

* {
  margin: 0px;
  padding: 0px;
}
body {
  display: grid;
    grid-template-columns: auto;
    grid-template-rows: 100px  auto 120px 330px;
    grid-template-areas: "header" "section" "botonera" "footer";
  font-size: 16px;
  font-family: 'Roboto';
  background: rgb(230, 230, 230);
  position: relative;
}
header, section, botonera, footer {
  position: relative;
  display: block;
}

header {
  width: 100%;
  background: rgb(48, 51, 46);
}

header h1>* {
  display: inline-block;
}

header h1 {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  height: 70px;
  margin-left: 15px;
}

header h1 figure {
  margin: 0px;
  padding: 0px;
  height: 50px;
  width: 50px;
  margin-top: 10px;
}

header h1 figure img {
  width: 100%;
  height: 100%;
}

header h1 #io_title {
  display: none;
}

header nav #showMenu,
header nav #hideMenu {
  position: absolute;
  height: 50px;
  width: 50px;
  right: 15px;
  top: 5px;
}

header nav a {
  margin: 0px;
  padding: 0px;
}

header nav #showMenu a,
header nav #hideMenu a {
  text-decoration: none;
  color: white;
  font-size: 60px;
  text-align: center;
  vertical-align: middle;
  margin: 0px;
  padding: 0px;
}

header nav #hideMenu {
  display: none;
}

header nav #card_menu {
  display: none;
  position: relative;
  width: 100%;
  height: 450px;
  background: rgba(48, 51, 46, 0.8);
  z-index: 999;
  margin: 0px;
  padding-bottom: 35px;
}

header nav ul {
  position: relative;
  top: 45px;
  width: 90%;
  margin-left: 5%;
}

header nav ul li {
  list-style: none;
  text-align: center;
  font-size: 1.1em;
  line-height: 65px;
  margin-bottom: 10px;
}

header nav ul li input {
  width: 75%;
}

header nav ul li button {
  position: relative;
  top: 2px;
  height: 31.5px;
  width: 31.5px;
  background: rgba(48, 51, 46, 0.7);
  border: none;
}

header nav ul li a {
  text-decoration: none;
  color: white;
  padding: 18px 50px 18px 50px;
}

section {
  position: relative;
  width: 100%;
}

section div#category {
  position: relative;
  width: 60%;
  height: 55px;
  margin-left: 20%;
  margin-top: 15px;
  border-bottom: 1px solid rgb(48, 51, 46);
}

section div#category p {
  position: relative;
  text-align: center;
  color: rgb(48, 51, 46);
  top: 20px;
}

section article#initialArticle {
  width: 100%;
  height: 350px;
  padding-bottom: 20px;
  border: none;
  background: white;
  border-bottom: 1px solid black;
}

section article#initialArticle figure {
  height: 85%;
}

section article#initialArticle figure img {
  height: 100%;
  width: 100%;
}

section article#initialArticle a {
  text-decoration: none;
}

section article#initialArticle h3 {
  color: black;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 26px;
}

section article.allArticles {
  position: relative;
  margin-top: 10px;
  height: 170px;
  background: white;
  border: none;
  border-bottom: 1px solid black;
}

section article.allArticles .contenedor {
  position: relative;
  width: 95%;
  height: 90%;
  margin-left: 2.5%;
  top: 5%;
}

section article.allArticles .contenedor a {
  text-decoration: none;
}

section article.allArticles .contenedor figure {
  position: relative;
  width: 35%;
  height: 80%;
  top: 15.3px;
}

section article.allArticles .contenedor figure img {
  width: 100%;
  height: 100%;
}

section article.allArticles .contenedor p {
  position: absolute;
  left: 40%;
  top: 15.3px;
  width: 60%;
  font-size: 1em;
  color: black;
}

section article.allArticles .contenedor p.tag,
section article.allArticles .contenedor p.date {
  display: none;
}

section#article article div#imagen {
  width: 100%;
  height: 350px;
}

section#article article div#imagen figure {
  width: 100%;
  height: 100%;
}

section#article article div#imagen figure img {
  width: 100%;
  height: 100%;
}

section#article article div#articulo {
  position: relative;
  width: 90%;
  margin-left: 5%;
}

section#article article div#articulo div#beforeTitle {
  position: relative;
  margin-top: 25px;
}

section#article article div#articulo div#beforeTitle p {
  display: inline-block;
  color: #1da1f2;
  font-size: 1em;
}

section#article article div#articulo div#beforeTitle a {
  float: right;
  text-decoration: none;
  font-size: 1.3em;
  margin-left: 9px;
}

section#article article div#articulo div#beforeTitle a:nth-of-type(1):before {
  font-family: 'icomoon';
  content: "\e905";
  color: #f8931f;
}

section#article article div#articulo div#beforeTitle a:nth-of-type(2):before {
  font-family: 'icomoon';
  content: "\e90c";
  color: #25d366;
}

section#article article div#articulo div#beforeTitle a:nth-of-type(3):before {
  font-family: 'icomoon';
  content: "\e90b";
  color: #1da1f2;
}

section#article article div#articulo div#beforeTitle a:nth-of-type(4):before {
  font-family: 'icomoon';
  content: "\e909";
  color: #3b5998;
}

section#article article h3#title {
  clear: both;
  margin-top: 25px;
  text-align: left;
  margin-bottom: 25px;
}

section#article article div#articulo div#afterTitle p:nth-of-type(1) {
  display: inline-block;
  color: #1da1f2;
}

section#article article div#articulo div#afterTitle p:nth-of-type(2) {
  display: inline-block;
  float: right;
  color: rgb(210, 210, 210);
}

section#article article div#bodyArticle {
  padding-top: 35px;
  background: rgb(255, 255, 255);
}

section#article article div#bodyArticle p {
  text-indent: 0.5cm;
  text-align: justify;
}

div.buttonsPages {
  position: relative;
  width: 90%;
  margin-left: 5%;
  text-align: center;
}

div.buttonsPages #index {
  display: none;
}

div.buttonsPages #general {
  position: relative;
}

div.buttonsPages #index a {
  text-decoration: none;
  font-size: 0.8em;
  color: black;
  vertical-align: middle;
  background: white;
  padding: 15px 50px 15px 50px;
}

div.buttonsPages #general a {
  display: inline-block;
  text-decoration: none;
  font-size: 0.9em;
  color: black;
  vertical-align: middle;
  background: white;
  margin-left: auto;
  padding: auto;
}

footer {
  width: 100%;
  background: rgb(48, 51, 46);
  color: white;
}

footer div {
  width: 80%;
  margin-left: 10%;
}

footer div#aboutme {
  margin-top: 30px;
}

footer div#aboutme p {
  margin-top: 15px;
  text-align: justify;
  padding-bottom: 25px;
}

footer div.rrss {
  padding-bottom: 25px;
  text-align: center;
}

footer div.rrss a {
  position: relative;
  margin-top: 15px;
  margin-left: auto;
  left: 8px;
  width: 50px;
  height: 50px;
  display: inline-block;
  font-size: 2.5em;
  text-align: center;
  text-decoration: none;
}

footer div.rrss a:nth-of-type(1):before {
  font-family: 'icomoon';
  content: "\e909";
  color: #3b5998;
}

footer div.rrss a:nth-of-type(2):before {
  font-family: 'icomoon';
  content: "\e90b";
  color: #1da1f2;
}

footer div.rrss a:nth-of-type(3):before {
  font-family: 'icomoon';
  content: "\e90a";
  color: #0077b5;
}

footer div.rrss a:nth-of-type(4):before {
  font-family: 'icomoon';
  content: "\e905";
  color: white;
}

footer div.suscription {
  padding-bottom: 20px;
}

footer div.suscription p {
  padding-bottom: 15px;
  text-align: center;
}

footer div.suscription input {
  display: inline-block;
  margin-left: 10%;
  border: none;
}

footer div.suscription input#input_registro {
  width: 50%;
  border-bottom: 1px solid black;
}

footer div.suscription input#button_registro {
  width: 30%;
  margin-left: 0px;
}

footer div#derechos {
  font-size: 0.8em;
  text-align: center;
  padding-bottom: 15px;
}

@media screen and (min-width: 480px) {
  body {
    background: red;
    background: rgb(230, 230, 230);
  }
  section#article article div#articulo div#beforeTitle {
    position: relative;
    margin-top: 35px;
  }
  section#article article div#articulo div#beforeTitle p {
    display: inline-block;
    color: #1da1f2;
    font-size: 1.2em;
  }
  section#article article div#articulo div#beforeTitle a {
    float: right;
    text-decoration: none;
    font-size: 1.3em;
    margin-left: 13px;
  }
  section#article article h3#title {
    clear: both;
    font-size: 1.3em;
    margin-top: 30px;
    text-align: left;
    margin-bottom: 30px;
  }
  section#article article div#bodyArticle {
    padding-top: 35px;
    background: rgb(255, 255, 255);
  }
  section#article article div#bodyArticle p {
    text-indent: 0.5cm;
    text-align: justify;
    font-size: 1.1em;
  }
  div.buttonsPages {
    position: relative;
    width: 90%;
    margin-left: 5%;
    text-align: center;
  }
  div.buttonsPages #index {
    display: none;
  }
  div.buttonsPages #general {
    position: relative;
  }
  div.buttonsPages #index a {
    text-decoration: none;
    font-size: 0.8em;
    color: black;
    vertical-align: middle;
    background: white;
    padding: 15px 55px 15px 55px;
  }
  div.buttonsPages #general a {
    display: inline-block;
    text-decoration: none;
    font-size: 0.8em;
    color: black;
    vertical-align: middle;
    background: white;
    margin-left: 10px;
    padding: 15px 19px 15px 19px;
  }
  footer div.rrss {
    text-align: center;
  }
  footer div.rrss a {
    position: relative;
    margin-top: 15px;
    margin-left: 5px;
    left: 8px;
    width: 50px;
    height: 50px;
    display: inline-block;
    font-size: 2.5em;
    text-align: center;
    text-decoration: none;
  }
}

@media screen and (min-width: 600px) {
  body {
    background: orange;
    background: rgb(230, 230, 230);
  }
  section#article article div#imagen {
    width: 100%;
    height: 450px;
  }
  section#article article div#articulo {
    position: relative;
    width: 80%;
    margin-left: 10%;
  }
  section#article article div#articulo div#beforeTitle {
    position: relative;
    margin-top: 45px;
  }
  section#article article div#articulo div#beforeTitle p {
    display: inline-block;
    color: #1da1f2;
    font-size: 1.3em;
  }
  section#article article div#articulo div#beforeTitle a {
    float: right;
    text-decoration: none;
    font-size: 1.5em;
    margin-left: 17px;
  }
  section#article article h3#title {
    clear: both;
    margin-top: 35px;
    font-size: 1.7em;
    text-align: left;
    margin-bottom: 35px;
  }
  section#article article div#articulo div#afterTitle p {
    font-size: 1.1em;
  }
  section#article article div#bodyArticle {
    padding-top: 45px;
    background: rgb(255, 255, 255);
  }
  section#article article div#bodyArticle p {
    text-indent: 0.7cm;
    font-size: 1.1em;
    text-align: justify;
  }
  div.buttonsPages #index a {
    text-decoration: none;
    font-size: 0.8em;
    color: black;
    vertical-align: middle;
    background: white;
    padding: 15px 55px 15px 55px;
  }
  div.buttonsPages #general a {
    display: inline-block;
    text-decoration: none;
    font-size: 0.8em;
    color: black;
    vertical-align: middle;
    background: white;
    margin-left: 15px;
    padding: 15px 30px 15px 30px;
  }
}

@media screen and (min-width: 767px) {
  body {
    background: yellow;
    /*background: rgb(230,230,230);*/
  }
  header {
  }
  header h1 {
    height: 100px;
    width: 25%;
    min-width: 250px;
    margin-left: 20px;
  }
  header h1 figure {
    height: 60px;
    width: 60px;
    margin-top: 20px;
  }
  header h1 figure img {
    height: 100%;
    width: 100%;
  }
  header h1 #io_title {
    display: inline-block;
    height: 100px;
    vertical-align: middle;
  }
  header h1 #io_title a {
    text-decoration: none;
    color: white;
    font-size: 0.5em;
    position: relative;
    top: 10px;
  }
  header nav {
    vertical-align: middle;
    width: 60%;
    height: 100px;
    position: absolute;
    top: 0px;
    left: 35%;
    margin-left: 30px;
  }
  header nav #showMenu,
  header nav #hideMenu {
    display: none;
  }
  header nav #card_menu {
    display: inline-block;
    height: 0px;
    background: none;
    position: relative;
    width: 100%;
    padding-bottom: 0px;
  }
  header nav #card_menu ul {
    margin: 0px;
    padding: 0px;
    width: 100%;
    margin-top: -95px;
    text-align: right;
  }
  header nav #card_menu ul li {
    margin: 0px -2px;
    padding: 0px;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    width: 120px;
    font-size: 1em;
  }
  header nav #card_menu ul li:nth-child(1) {
    width: 85px;
  }
  header nav #card_menu ul li:nth-child(2) {
    width: 75px;
  }
  header nav #card_menu ul li:nth-child(4) {
    width: 150px;
  }
  header nav #card_menu ul li:nth-child(5) {
    display: none;
  }
  header nav #card_menu ul li a {
    margin: 0px;
    padding: 0px;
  }
  section {
    position: relative;
    width: 55%;
    margin-left: 15%;
  }
  section div#category {
    margin-left: 0%;
    position: relative;
    width: 100%;
    height: 55px;
    margin-top: 45px;
    margin-bottom: 35px;
    border-bottom: 1px solid #1da1f2;
  }
  section div#category p {
    position: relative;
    margin-left: 15%;
    text-align: left;
    color: rgb(48, 51, 46);
    top: 20px;
  }
  section article#initialArticle {
    width: 100%;
    height: 500px;
    border: none;
    padding: 0px;
  }
  section article#initialArticle figure {
    width: 100%;
    height: 100%;
  }
  section article#initialArticle figure img {
    width: 100%;
    height: 100%;
  }
  section article#initialArticle a h3 {
    position: absolute;
    color: white;
    background: rgba(48, 51, 46, 0.5);
    top: 350px;
  }
  section article.allArticles {
    position: relative;
    margin-top: 15px;
    height: 250px;
    background: white;
    border: none;
    border-bottom: 1px solid black;
  }
  section article.allArticles .contenedor {
    position: relative;
    width: 95%;
    height: 90%;
    margin-left: 2.5%;
    top: 5%;
  }
  section article.allArticles .contenedor a {
    text-decoration: none;
  }
  section article.allArticles .contenedor figure {
    position: relative;
    width: 35%;
    height: 80%;
    top: 15.3px;
  }
  section article.allArticles .contenedor figure img {
    width: 100%;
    height: 100%;
  }
  section article.allArticles .contenedor p {
    position: absolute;
    left: 40%;
    top: 15.3px;
    width: 60%;
    font-size: 1em;
    color: black;
  }
  section article.allArticles .contenedor p.date,
  section article.allArticles .contenedor p.tag {
    display: inline-block;
    position: relative;
    color: #1da1f2;
    top: 30px;
    left: 0px;
    width: auto;
    font-size: 0.8em;
    z-index: 10;
  }
  section article.allArticles .contenedor p.tag {
    position: relative;
    margin-right: 2.5px;
    float: right;
  }
  section#article {
    width: 65%;
  }
  section#article article div#imagen {
    width: 100%;
    height: 450px;
  }
  section#article article div#imagen figure {
    width: 100%;
    height: 100%;
  }
  section#article article div#imagen figure img {
    width: 100%;
    height: 100%;
  }
  section#article article {
    background: rgb(255, 255, 255);
  }
  section#article article div#articulo {
    position: relative;
    width: 100%;
    margin-left: 0%;
  }
  section#article article div#articulo div#beforeTitle {
    position: relative;
    margin-top: 0px;
    padding-top: 35px;
  }
  section#article article div#articulo div#beforeTitle p {
    display: inline-block;
    color: #1da1f2;
    font-size: 1.3em;
  }
  section#article article div#articulo div#beforeTitle a {
    float: right;
    text-decoration: none;
    font-size: 1.3em;
    margin-left: 15px;
  }
  section#article article h3#title {
    font-size: 2em;
    clear: both;
    margin-top: 25px;
    margin-bottom: 25px;
    text-align: left;
  }
  section#article article div#articulo div#afterTitle p {
    font-size: 1.1em;
  }
  section#article article div#articulo div#afterTitle p:nth-of-type(1) {
    display: inline-block;
    color: #1da1f2;
  }
  section#article article div#articulo div#afterTitle p:nth-of-type(2) {
    display: inline-block;
    float: right;
    color: rgb(210, 210, 210);
  }
  section#article article div#bodyArticle {
    padding-top: 35px;
    background: rgb(255, 255, 255);
  }
  section#article article div#bodyArticle p {
    text-indent: 0.5cm;
    text-align: justify;
  }
  div.buttonsPages {
  position: relative;
  width: 55%;
  margin: 30px auto;
  text-align: center;
}
  div.buttonsPages #index {
    display: none;
  }
  div.buttonsPages #general {
    display: ;
    position: relative;
  }
  div.buttonsPages #index a {
    text-decoration: none;
    font-size: 0.8em;
    color: black;
    vertical-align: middle;
    background: white;
    padding: 15px 25px 15px 25px;
  }
  div.buttonsPages #general a {
    display: inline-block;
    text-decoration: none;
    font-size: 0.8em;
    color: black;
    vertical-align: middle;
    margin-left: 0px;
    background: white;
    padding: 15px 10px 15px 10px;
  }
  div.buttonsPages #general a:nth-of-type(2) {
    margin-left: 15px;
  }
  div.buttonsPages #general a:nth-of-type(3) {
    margin-left: 15px;
  }
  footer {
    position: relative;
  }
  footer div#aboutme {
    width: 50%;
    height: 300px;
    margin: 0px;
    padding-bottom: 0px;
  }
  footer div#aboutme h3 {
    width: 80%;
    margin-left: 10%;
    padding-top: 20px;
  }
  footer div#aboutme p {
    width: 80%;
    margin-left: 10%;
    padding-top: 15px;
  }
  footer div.rrss {
    position: absolute;
    width: 50%;
    height: 150px;
    margin: 0px;
    bottom: 0;
    right: 0;
    padding-bottom: 0px;
    }
  footer div.rrss p {
    padding-top: 30px;
  }
  footer div.rrss a {
    padding-top: 15px;
  }
  footer div.suscription {
      position: absolute;
      width: 50%;
      height: 150px;
      margin: 0px;
      top: 0;
      right: 0;
      padding-bottom: 0px;
      text-align: center;
  }
    footer div.suscription p {
    display: block;
    padding-top: 0px;
    padding-bottom: 30px;
  }
  footer div.suscription input:nth-of-type(1) {
    max-width: 175px;
  }
  footer div.suscription input:nth-of-type(2) {
    max-width: 125px;
    border: none;
    border-bottom: 1px solid white;
  }
  footer div#derechos {
    position: absolute;
    bottom: 20px;
  }
  footer div#derechos p {
    position: relative;
    top: 15px;
  }
}

@media screen and (min-width: 950px) {
  body {
    background: green;
    /*background: rgb(230,230,230);*/
  }
  section#article {
    width: 50%;
  }
}
<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/modernizr-custom.js"></script>
  <link rel="stylesheet" type="text/css" href="css/normalize.css">
  <link rel="stylesheet" type="text/css" href="css/fonts/fonts.css">
  <link rel="stylesheet" type="text/css" href="css/icomoon.css">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <header>
    <!---------------------------INICIO LOGO Y TITULO---------------------------->
    <h1>
      <a href="index.html">
        <figure id="logo">
          <img src="image/logo.png">
        </figure>
      </a>

      <!--------------EL TITULO SE OCULTA AL ESTAR MOBIL--------------------------->
      <div id="io_title">
        <a href="index.html"></a>
      </div>
    </h1>
    <!---------------------------FIN LOGO Y TITULO----------------------------   >


<!---------------------------INICIO DEL MENU    ---------------------------->

    <nav id="ioMenu">
      <div id="showMenu" class="ioMenuMovil" onclick="displayMenu()">
        <a class="icon-menu2" href="#"></a>
      </div>

      <div id="hideMenu" class="ioMenuMovil" onclick="displayMenu()">
        <a class="icon-close" href="#"></a>
      </div>

      <div id="card_menu">
        <ul>
          <li><a href="#">Tramites</a></li>
          <li><a href="#">Tips</a></li>
          <li><a href="#">Estilo de Vida</a></li>
          <li><a href="#">Guía para Emigrar</a></li>
          <li><input id="search" placeholder="Buscar" type="text" name="search"><button type="submit" class="icon-search"></button></li>
        </ul>
      </div>
    </nav>
  </header>

  <!------------------------------FIN DEL MENU------------------------------------>

  <section>
    <article id="initialArticle">
      <a href="">
        <figure>
          <img src="image/imagePrueba.jpg">
        </figure>
      </a>
      <a href="">
        <h3>El próximo iPhone X y iPhone x plus tendrán soporte de Apple pencil: reportes.</h3>
      </a>
    </article>

    <article class="allArticles">
      <div class="contenedor">
        <a href="">
          <figure>
            <img src="image/imagePrueba.jpg">
          </figure>
        </a>
        <a href="">
          <p>El próximo iPhone X y iPhone x plus tendrán soporte de Apple pencil: reportes.</p>
        </a>
        <p class="date">Publicado: 22/02/36</p>
        <a href="#">
          <p class="tag">Guía</p>
        </a>
      </div>
    </article>
  </section>

<botonera>
  <div class="buttonsPages">
    <div id="index">
      <a href="#">Más Artículos</a>
    </div>

    <div id="general">
      <a href="#">Más Recientes</a>
      <a href="#">Portada</a>
      <a href="#">Más Antiguas</a>
    </div>
  </div>
</botonera>

  <!-----------------------------INICIO DEL FOOTER-------------------------------->

  <footer>
    <div id="aboutme">
      <h3>Acerca de mí...</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
        dolor in reprehenderit in voluptate velit esse
      </p>
    </div>


    <div class="rrss">
      <p><strong>Encuentrame en:</strong></p>
      <a href="#"></a>
      <a href="" target="_blank"></a>
      <a href="" target="_blank"></a>
      <a href="#"></a>
    </div>

    <div class="suscription">
      <p>Recibe nuestras publicaciones en tu email.</p>
      <input type="mail" name="email" placeholder="Ingresa tu email" id="input_registro">
      <input type="button" id="button_registro" name="button_registro" value="Registrar">
    </div>

    <div id="derechos">
      <p>© 2018 All rights reserved | Privacity Policy</p>
    </div>

  </footer>

  <!-----------------------------FIN DEL FOOTER-------------------------------->

  <script>
    function displayMenu() {
      var display;
      var card_menu = document.getElementById("card_menu");
      display = card_menu.style.display;

      if (display == "none" || display == "") {
        card_menu.style.display = "block";
      } else {
        card_menu.style.display = "none";
      }
    }
  </script>
</body>

</html>

2
  • Gracias por intentar ayudarme, pero colocando el código como me indicaste ahora el error que tenia desaparece en la versión destock, pero no en la responsive.
    – shadowmors
    el 1 sep. 2018 a las 19:49
  • por eso aclare que limpié hasta el primer breakpoint (desktop) tendrás que ir limpiando los demás para que tenga el mismo comportamiento, es cambiar los relative por absolute en el caso de cosas que están dentro de las áreas y ajustar los top con numero negativo a números positivos mas chicos en relacion al inicio del área, como no se expande hacia abajo ya no hace falta subirlos el 1 sep. 2018 a las 19:56
1

Puede que esto te sirva : https://support.mozilla.org/es/kb/como-solucionar-que-firefox-muestre-las-paginas-we

si no... iniciar el navegador en Modo seguro y de persistir el problema, puedes probar a crear un nuevo perfil y comprobar si sigue igual.

Si en modo seguro o con un nuevo perfil la web se visualiza correctamente, lo más seguro es que tengas algún problema con alguna extensión instalada. Deshabilita una por una hasta que des con la que presenta conflictos, o en último caso, utiliza un nuevo perfil.

Si sigues visualizándola mal, es posible que esté diseñada sin seguir los estándares de creación web del W3C o que haga uso de tecnologías propietarias como ActiveX, que sólo pueden usarse en Internet Explorer.

Usa el http://validator.w3.org/ para comprobarlo

5
  • 1
    Ni YouTube sigue las reglas de esa página
    – user75901
    el 1 sep. 2018 a las 17:57
  • Yo valide el código y esta el css3 esta bien, fue lo primero que hice, probare con la información que me has suministrado. Muchas gracias.
    – shadowmors
    el 1 sep. 2018 a las 18:00
  • Además que el mismo OP indica que excepto firefox, en todos los demás se ve bien
    – user75901
    el 1 sep. 2018 a las 18:06
  • Nop el NoSquint no es compatible con la ultima versión de firefox.
    – shadowmors
    el 1 sep. 2018 a las 18:07
  • Mal ahi... sorry, no se como ayudarte, es lo que pude conseguir
    – Alien69
    el 2 sep. 2018 a las 18:21

Tu Respuesta

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

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