Bonjour !

Alors voila mon problème, je fais un site pour m'entrainer, et ce site fonctionne très bien sur tous le snavigateurs

Pour ce qui est de google chrome, c'est un problème que je n'ai jamais vu, au début tout est OK, mais au fur et a mesure que je me "ballade" sur le site, l'affichage commence a se déformer jusqua avoir le titre qui disparait, le menu tout en haut de la page avec sont background qui descend jusquen bas de la page, je ne vois pas du tout d'où ça peut venir, surtout que:

-C'est un problème "progressif"

-Il n'y a pas ce problème sous Firefox

voila les codes:

/* Generals */

html, body
{margin: 0; width: 100%; height: 100%;}

body
{
    display: flex;
    flex-direction: column;
}


#body1
{
    background: url('http://localhost/GeyserVape/images/fond1.jpg');
    background-size: cover;
}

#titleHead
{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background-color: black;
    color: aliceblue;
    justify-content: space-between;
    margin: 0;
}

#titleHead h1
{
    text-align: center;
    flex: 2;
}

#titleHead div
{
    flex: 1;
    display: flex;
    flex-direction: column;
}

#titleHead h2
{
    text-align: center;
}

#titleHead a
{
    text-align: center;
    width: 70%;
    margin-bottom: 10px;
    display: block;
    
}

nav
{
    width: 100%;
}

a
{
    
    text-decoration: none;
    color: aliceblue;
}

#deco
{
    display: block;
    height: 20px;
}

#menu
{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin: 0px;
    padding: 0px;
}

li
{
    list-style: none;
    width: 100%;
    height: 100%;
    background-color: black;
    text-align: center;
    font-size: 125%;
}

li a
{
    display: block;
    color: aliceblue;
}

li a:hover, #titleHead a:hover
{
    background-color: #9baab3;
    color: black;
}

/* Articles */

#menuArticles
{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
    margin: 0px;
    padding: 0px;
    height: 100%;
}

#menuArticles li
{
    background-color: inherit;
    width: 50%;
    height: 50%;
}

#menuArticles li a
{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: inherit;
    color: inherit;
    height: 100%;
    color: black;
    font-size: 150%;
}

#menuArticles li a:hover, td a:hover
{
    background-color: rgba(155, 170, 179, 0.7);
}


/* Liquids */

table
{
    align-self: center;
    width: 80%;
    height: 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

tr
{
    display: flex;
    justify-content: space-around;
    width: 100%;
    text-align: left;
}

th
{
    background-color: black;
    color: aliceblue;
}

td
{
    background-color: aliceblue;
}

td, th
{
    font-size: 150%;
    display: block;
    width: 100%;
    padding: 0;
}

td a
{
    color: black;
    background-color: aliceblue;
    display: block;
    width: 100%;
}

.name
{
    flex: 2;
}

td[class="name"]
{
    
    text-align: center;
}

.brand
{
    flex: 1;
}

.cost
{
    flex: 1;
}


/* Connection */

#connect
{
    border: 1px solid black;
    width: 70%;
    height: 50%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: auto;
    padding: 0;
}

#connect h2
{
    display: block;
    width: 90%;
    text-align: center;
    background-color: black;
    color: aliceblue;
    margin-top: 0;
}

#connect label
{
    width: 40%;
}

#connect input
{
    width: 40%;
}

/* E-Liquides */

#liquid
{
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    height: 95%;
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
}

#liquide
{
    flex: 3;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}

#imgLiquide
{
    width: 70%;
    text-align: center;
}

#liquide h2
{
    width: 30%;
}

#liquide p
{
    width: 100%;
}

#commande
{
    flex: 1;
    height: 70%;
    border: 1px solid black;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px;
}

#retourLiquide
{
    color: black;
    text-decoration: underline;
    height: 5%;
}

#retourLiquide:hover
{
    background-color: aqua;
}

ca doit venir du #menu, #nav, ou des balises ul, li, a car c'est le menu qui prends toute la page, et le reste des elements de la page s'emboite dans 10px de hauteur

Voila vous avez une solution?

Merci !!

EDIT: Bon, alors problème résolu, pour ceux qui rencontrent le même problème, j'ai rajouté height: 20px; a #menu

apparemment google chrome réagis mal quand on ne lui definis pas une hauteur, les autres navigateurs gèrent automatiquement la hauteur ...

C'est tout pour moi bonne journée !!

-
Edité par ilantaieb 13 mai 2018 à 15:42:18