Problème d'affichage sous WP

Bonjour,

J'ai eu un retour d'un ami ayant un Windows Phone 8.1 et Internet Explorer concernant un problème d'affichage sur le menu principale de mon site.

http://www.sang47.fr/

Voilà ce qu'il obtient : http://www.sang47.fr/images/probl%C3%A8me_WP81_Internet%20Explorer.jpg

Cordialement.

1 réponse

  1. Voilà mon CSS

    /* Pour les ecrans superieurs à 1024 px on applique les regles suivantes */
    /* Styles generaux à appliquer dans tous les cas.*/
    body {
    background: #7f7f7f;
    margin : 0px;
    line-height: 1.75;
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    text-align:justify;
    }

    a {
    color:#000000;
    }

    p {
    margin: 1.75em 0;
    font-weight: 300;
    letter-spacing: 0.025em;
    word-spacing: 0.025em;
    }

    #image {
    float: left;
    width: auto;
    margin: 0 10px 10px 0;
    }

    #texte {
    width:100%;
    }

    p.mention {
    font-size : 12px;
    color:#000000;
    text-align: center;
    margin-top: 0px;
    }

    h1, h2 {
    margin: 1em 0 0.5em;
    letter-spacing: 0.125em;
    word-spacing: 0.125em;
    text-transform: uppercase;
    text-align: left;
    }
    h1 {
    font-size: 1.3em;
    }

    h2 {
    font-weight: normal;
    }

    h3 {
    color: #000000;
    font-size : 16px;
    }

    ul {
    list-style:none;
    margin-left:0px;
    padding-left:0px;
    }

    ul li {
    margin-left:0px;
    padding-left:0px;
    }

    /* Menu de Navigation */
    nav {
    display: flex;
    margin : 0px auto 0px auto;
    }

    nav ul {
    width : 1024px;
    list-style-type: none;
    display: flex;
    margin : 0px auto;
    padding: 0;
    }

    nav li {
    flex: 1;
    background: #595959;
    }

    nav a {
    display: flex;
    color:#fff;
    text-transform: uppercase;
    text-decoration:none;
    margin : 0px auto;
    justify-content: center;
    align-items : center;
    padding: 5px 0px;
    }

    nav a:hover {
    background: #7f7f7f;
    margin : 0px auto;
    padding: 5px 0px;
    }

    li.active {
    background: #bfbfbf;
    }
    /*Sous menu de navigation */
    ul.nav {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 200px;
    text-align : center;
    text-transform: uppercase;
    }

    li.nav a {
    display: block;
    color: #000;
    text-decoration: none;
    color:#fff;
    }

    li.nav a:hover {
    background-color: #7f7f7f
    }

    li.navactive{
    background: #7f7f7f
    }

    /* Header */
    header {
    width:100%;
    background:#000000;
    border-bottom: 1px solid red;
    margin : 0px auto;
    padding-top : 0px;
    }

    #logo {
    margin : auto;
    text-align : center;
    }

    /* Footer*/
    footer {
    width:100%;
    margin : 0px auto;
    }

    /* Contenu*/
    section.bloc_page {
    display: flex;
    color: #000000;
    background-color: #bfbfbf;
    width: 1024px;
    margin: 0px auto;
    }

    article {
    flex: 4;
    padding: 1px 0px;
    margin-left : 20px;
    margin-right : 20px;
    }

    aside {
    flex: 1;
    margin: 5px 5px ;
    }

    iframe {
    border: 0px;
    }

    ul.level_0 {
    list-style-type:disc;
    margin-left: 10px;
    }

    ul.level_1 {
    list-style-type:circle;
    margin-left: 25px;
    }

    /* Les Tableaux*/
    table {
    background: #FEFEFE;
    border: 1px solid black;
    border-collapse: collapse; /*fusion des bordures*/
    margin-left : auto;
    margin-right : auto;
    }

    caption {
    background: #7f7f7f;
    border: 1px solid black;
    border-bottom: none;
    padding: 5px;
    font-size: 120%;
    font-weight: bold;
    color: black;
    }

    th {
    background: #a6a6a6;
    }

    td, th {
    border: 0px solid black;
    padding: 9px 27px;
    text-align: left;
    font-size : 13px;
    }

    /* Formulaire de contact*/
    #form-contact label {
    margin:4px 0;
    color:#000000;
    display:block;
    text-align : center;
    }

    input {
    display:block;
    width:70%;
    color:#000;
    border:1px solid #000000;
    padding:10px;
    margin : 0px auto 15px auto;
    }

    textarea {
    display:block;
    width:70%;
    color:#000;
    border:1px solid #000000;
    padding:10px;
    margin : 0px auto 15px auto;;
    }

    .bouton-envoyer {
    cursor:pointer;
    background-color:#7f7f7f;
    border:1px solid #000000;
    color:#ffffff;
    font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
    font-size : 13px;
    width:25%;
    font-weight:bold;
    margin : 10px auto;
    }

    .bouton-envoyer:hover {
    background-color: #595959;
    }

    /* Regles appliquees aux ecrans inferieurs à 1024px */
    @media all and (max-width: 1024px)
    {
    body {
    width: auto;
    margin: 0;
    padding: 0;
    }

    /* fixer une largeur maximale de 100% aux elements potentiellement problematiques */
    img,
    table,
    tr,
    td,
    textarea,
    input,
    embed,
    video,
    iframe,
    nav {
    max-width: 100%;
    padding: 0;
    margin-left : auto;
    margin-right : auto;
    }

    /* conserver le ratio des images */
    img {
    height: auto;
    }

    nav {
    width: 100%;
    }

    nav ul {
    display:flex;
    flex-direction: column;
    }

    section.bloc_page {
    background-color: #bfbfbf;
    width: 100%;
    margin : 0px;
    padding : 10px 0px 25px 0px;
    display : block;
    padding : 0;
    }

    article,
    aside {
    display : block;
    width : 100%;
    margin : 0px;
    padding : 0;
    }

    ul.nav {
    width: 100%;
    }
    aside {
    text-align : center;
    }

    form {
    width : 100%;
    }

    h1 {
    font-size: 1em;
    text-transform: none;
    }

    p {
    font-size: 13px;
    margin : 0px;
    }

    input, textarea {
    margin : auto;
    padding-top : 5px;
    padding-bottom : 5px;
    }
    #image {
    width: 100%;
    text-align : center;
    }
    #texte {

    width: 100%;
    }
    }

    /* Pour les ecrans inferieurs à 320px, on n'affiche pas les tableaux*/
    @media all and (max-width: 320px)
    {
    table {
    display : none;
    }

    video {
    display : none;
    }
    }