Incompatibility Firefox

Question

Incompatibility Firefox

Navigation

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

0

I'm about to finish my first web project and when I'm reviewing the browsers I find that firefox causes me the following error in the footer.

As you will see in other browsers it works and it looks perfectly in firefox is the only one that creates that space, if you can help me I would appreciate it. Here is the code:

<!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>

This would be the 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%;
    }
}

html5 html css3 css

asked by shadowmors 01.09.2018 в 19:17

source

2 answers

How to convert a variable int to vector? Heatmap in Javascript or Jquery

score 2 · Answer 1

Ok there is a salad of position relatives and absolutes that when calculating the height of the html and the body in a strict way, the space you see below is what is left over from applying a relative and then a top:-300px for example.

Here I propose to use a grid in the body and define the areas (I invented a tag for the buttons that I see that are also attached to the footer)

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

It is compatible with current browsers, IE 11 and some older iPhones may have problems in calculating the height especially when the content (section) does not fill the height of the window.

To modify the height of the areas in each resolution you are modifying

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

Wave to reduce the menu:

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

I cleaned up the first breakpoint, taking the absolutes and top of the areas, and see if you understand well how to build the html without so many absolutes and adjusting the other breakpoints.

In the footer that is the most prone to push down the height of the body, I changed the relative to absolute for the different elements it contains, so it does not push and return, but they are placed absolutely with respect to the tag footer.

Another thing with how to handle the widths of things and their margins without having to calculate the left margin is to put them with auto margin for the sides, for example:

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

The same for the sections , you define a max-width and the margin: 0 auto; is focused on it.

The main idea is to take advantage of the css cascade and not rewrite / calculate so much.

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

score 1 · Answer 2

This may help: link

otherwise ... start the browser in Safe Mode and if the problem persists, you can try to create a new profile and check if it remains the same.

If in safe mode or with a new profile the web is displayed correctly, it is most likely that you have a problem with an installed extension. Disable one by one until you find the one with conflicts, or in the last case, use a new profile.

If you still see it badly, it may be designed without following the web creation standards of W3C or using proprietary technologies such as ActiveX , which can only be used in Internet Explorer .

Use the link to check it out