Partage
  • Partager sur Facebook
  • Partager sur Twitter

Compatibilité IE

Suite à l'application d'un tuto alsacréations

Dolerho
    27 avril 2006 à 20:51:53

    Zalut à touZ !

    J'ai un design qui s'affichait très bien sur FF/IE, mais après avoir appliqué ce tuto, devenez-quoi ?

    Il s'affiche bien sur FF ( :p sans blague) mais sous IE ... c'est pas l'top !



    Voici le code de ma page :


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Testing Area theme !</title>
    <link href="new_style.css" rel="stylesheet" type="text/css" />
    <!--[if IE]>
    <script src="/ie7/ie7-standard-p.js" type="text/javascript"></script>
    <meta http-equiv="pragma" content="no-cache" />
    <![endif]-->
    <script type="text/JavaScript" src="http://www.redby.info/ajax/ajax.js"></script>
    </head>
    <body>
    <div id="header">
            <div class="hautdroit"></div><div class="hautgauche"></div>
            <img src="images/bann-trans.png" alt="Bannière" />
            <div class="basdroit"></div><div class="basgauche"></div>
    </div>
    <div id="menu">
            <ul>
            <div class="hautdroit"></div><div class="hautgauche"></div>
            <li class="element_menu"><a href="#">Accueil</a></li>
            <li class="element_menu"><a href="#">Nos offres </a></li>
            <li class="element_menu"><a href="#">Support</a></li>
            <li class="element_menu"><a href="#">Qui sommes-nous ? </a></li>
            <li class="element_menu"><a href="#">Acc&egrave;s Clients </a></li>
            <li class="element_menu"><a href="#">Préferences</a></li>
            <div class="basdroit"></div><div class="basgauche"></div>
            </ul>
            <br />
            <img src="images/freebsd_logo.gif" alt="Powered by FreeBSD" />
    </div>
    <div id="corps">
            <div class="hautdroit"></div><div class="hautgauche"></div>
            <div id="page">
                    <p><strong>Bienvenue sur RedBy.info !</strong> RedBy.info est un hébergeur gratuit autogéré. Le serveur propose un hébergement alternatif pour les petits sites web. Ceci dit, la priorité sera donnée aux sites d'entraide informatique, associatifs, ou proposant des services gratuits. Sont exclus tous les sites qui ne respectent pas la legislation française ou les bonnes moeurs.  </p>
    <p><b>Les offres</b> sont diverses, je vous invite à visiter la page <a href="./offres.php">nos offres</a> pour plus de détails. Elles conviennent autant pour des petits sites que pour des sites bien plus évolués, le seul inconvenient étant la bande passante limitée à 1Mb qui ne convient pas pour les sites de téléchargement. <br>Tout site hébergé sur ce serveur doit être en accord avec <a href="charte.php">cette charte</a>. </p>
    <p><b>Notre présence sur le net</b> date du mois de septembre 2003, sous le nom de <b>bery.ath.cx</b>, l'ancetre de <b>RedBy.info</b>. </p>

    <p><b>Techniquement</b>, les serveurs fonctionnent 24H/24H, 7 jours sur 7 connectés en permanence à Internet par une ligne ADSL privée chez un particulier en FRANCE, à Nancy. Deux serveurs, tous les deux étant sous FreeBSD (6.0). </p>
    <p>Voici la <a href="partenaires.php"><b>Liste de nos partenaires</b></a>. </p>
            </div>
    <div id="status">
            <span style="vertical-align: middle">© RedBy.info / <b>Accueil</b>, thème BlueBy par Dolerho<!--[if IE]>, optimisé pour <a href="http://www.mozilla.com/firefox" target="_blank">Firefox</a><![endif]--></span>
            <div class="basdroits"></div>
            <div class="basgauches"></div>
            </div>
    </div>
    </body>
    </html>





    Et voici ma CSS (rangée pour l'occasion :p )


    /* Parties générales de la page */
    #header {
            font-family: Georgia, "Times New Roman", Times, serif;
            font-size: 16px;
            font-weight: bold;
            color: #FFFFFF;
            margin-top: 5px;
            background-color: #779BD7;
            letter-spacing: 0.24em;
    }
    #menu {
            text-align: left;
            margin-top: 10px;
            width: 150px;
            float: left;
    }
    #corps {
            background-color: #779BD7;
            margin-top: 10px;
            margin-left: 165px;
    }
    #page {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: #FFFFFF;
            background-color: #779BD7;
            padding-top: 3px;
            padding-right: 3px;
            padding-bottom: 3px;
            padding-left: 3px;
    }
    #status {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: #CCCCCC;
            background-color: #6489C7;
            padding-top: 2px;
            border-top: 1px solid #5983C8; 
            text-align: center;
    }


    /* MENU */
    #menu ul {
            list-style-position: inside;
            width: 100%;
            margin: 0;
            padding: 0;
            text-align: center;
            margin-bottom: 2px;
            background-color: #779BD7;
    }
    .element_menu {
            margin: auto;
            background-color: #779BD7;
            border: none;
            list-style-image: none;
            list-style: none;
            height: 25px;
            padding-left: 5px;
            text-align: left;
    }

    .element_menu:hover {
            background-color: #6489C7;
    }
    #menu a {
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 12px;
            color: #FFFFFF;
            font-weight: bold;
            text-decoration: none;
            vertical-align: middle;
    }
    #menu a:hover {
            color: #003399;
    }


    /* CORPS */
    #page p:first-letter{
            font-size: 14px;
    }
    #page a {
            color: #CCCCCC;
            font-style: italic;
    }
    #page a:hover {
            color: #003399;
            cursor: crosshair;
    }


    /* Redéfinition de balises */
    table {
            background-color: #6489C7;
    }
    td {
            border: thin solid #336699;
            padding-left: 3px;
            padding-right: 3px;     
    }


    /* Divers + Spécial */
    #prefDesignChange {
            background-color: #6489C7;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 10px;
            color: #FFFFFF;
            font-weight: bold;
            border: thin solid #195DB3;
    }
    #authFormLogin {
            background-color: #6489C7;
            font-family: Verdana, Arial, Helvetica, sans-serif;
            font-size: 10px;
            color: #FFFFFF;
            font-weight: bold;
            border: thin solid #195DB3;
    }


    /* Arrondis */
    .hautgauche, .hautdroit, .basgauche, .basdroit, .basdroits, .basgauches {
            height: 7px; width: 7px;
            background-repeat: no-repeat;
            font-size: 1px; /* correction d'un bug IE */
    }
    .hautgauche {
            background: url(images/haut_gauche.png);
    }
    .hautdroit {
            float: right;
            background: url(images/haut_droite.png);
    }
    .basgauche {
            background: url(images/bas_gauche.png);
    }
    .basdroit {
            float: right;
            background: url(images/bas_droite.png);
    }
    .basgauches {
            background: url(images/bas_gauches.png);
    }
    .basdroits {
            float: right;
            background: url(images/bas_droites.png);
    }



    Les Windowsiens peuvent faire la différence entre IE et FF ici.

    MerZi de votre aide !
    • Partager sur Facebook
    • Partager sur Twitter
    cdel06
      27 avril 2006 à 21:13:10

      ie ne tient pas compte des meme margin que ff
      aplik un !important à tes margin puis rajout d'autres margin optimisée pour ie cette fois.
      cf : cette partie de ce tuto et celle-ci
      • Partager sur Facebook
      • Partager sur Twitter
      Dolerho
        27 avril 2006 à 21:21:59

        Les margin ne foirent pas, à ce niveau là c'est pareil sous IE et FF, c'est les arrondis qui font n'importe quoi sous IE
        • Partager sur Facebook
        • Partager sur Twitter
        jp949
          28 avril 2006 à 7:01:40

          Sur alsacreations ils doivent avoir la solution , s'ils donnent un tuto
          • Partager sur Facebook
          • Partager sur Twitter
          bndn
            28 avril 2006 à 10:56:11

            J'ai peut-être une partie de la solution : Quand tu fait un cadre, avec div, IE considère à chaque fois qu'il va y avoir du texte, et donc il fait comme si il y avais du texte, un espace, de la taille de ton font-size ! Réduit ton font-size pour ces div à 1px, et peut-être que ça arrangera un peu l'apparence ...
            • Partager sur Facebook
            • Partager sur Twitter
            Dolerho
              28 avril 2006 à 12:32:22

              C'était déjà fait dans le tuto :(

              Merci quand même, d'ailleurs ce que tu as dit c'est pas faux ! :-°
              font-size: 1px; /* correction d'un bug IE */
              • Partager sur Facebook
              • Partager sur Twitter

              Compatibilité IE

              × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
              × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
              • Editeur ●
              • Markdown