JavaScript quand tu nous tiens (ou pas)

[dmo95]

Bonsoir à tous,

Actuellement en train de déployer un site web développé en local je suis confronté à pas mal de coquilles... En particulier sur IE, normal me diriez-vous , malgré le fait que je me sois concentré uniquement sur IE7.

Vous constaterez quelques soucis de mise page avec les feuilles de styles. Je sais d'ou cela provient, il s'agit d'une propriété left : 15px; ou top : -45px. Seulement si je l'adapte à IE forcément le comportement change pour FF et Safari. Donc je me suis orienté vers ls hacks avec notamment :

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" type="text/css" media="screen" />

<!--[if IE7]>
<link href="<?php bloginfo('template_url'); ?>/style_ie.css" rel="stylesheet" type="text/css" media="all" />
<![endif]-->

Cela ne fonctionne pas sachant que je souhaiterais juste ajouté les quelques propriétés nécessaire. J'ai essayé la copie de fichier en y modifiant les propriétés, et également inversé l'ordre, mais rien n'y fait. Voilà pour la première question.

Ensuite, j'ai développé un petit contrôle des input sur les différents formulaires, ils fonctionnent parfaitement bien sur Safari et FF, mais sur IE idem le JavaScript ne se déclenche pas... L'exemple se trouve ici ou la dans la catégorie Nous contacter.

Merci de m'apporter vos idées, qui m'ont souvent ouvert les yeux en tan que jeune développeur.

 

[Anonyme]

Tu m'étonnes que ton css IE only ne fonctionne pas, la première ligne est un reset css. À bannir d'urgence.

À propos tu sais qu'il y a moyen de faire des formulaires sans tableaux?

 

[heroe]

ya pas une astuce dans le genre sur IE... mais me souvient plus lequel est pour IE6 et lequel pour IE7
après hein je suis pas expert CSS hein... je laisse gloup gloup m'engueuler

/* !IE */
div#plop ul li {width: 300px;}

/* IE 6 ou 7 */
*html div#plop ul li {width: 800px;}

/* IE 6 ou 7 */
*+html div#plop ul li {width: 400px;}

 

[Anonyme]

Les hacks sont déconseillés c'est mieux les commentaires conditionnels comme lui a fait.

 

[heroe]

rhaaa 4mn pour me faire engueler...

 

[Anonyme]

rhaaa 4mn pour me faire engueler...

Engueuler, t'exagère j'étais même pas fâcher…

 

[dmo95]

Ok merci, c'est bien ce que j'avais vu que les hacks c'était pas top, même pour le W3C ^^.

Par contre en ce qui concerne ton premier post Gloup, le reset est volontaire !! Et justement le problème est là, c'est qu'il ne reset absolument rien...

An idea ?

Et pour les formulaires de contact, une idée pourquoi sous IE ils ne fonctionnent pas ? Ou une méthode de debug sur IE... qui plus est je n'ai pas de PC et XP de ma VM a une clé non valide donc je suis sous IE6 (browser que j'ai banni des contraintes ^^). Une méthode ?

Pas mal le petit formulaire sans tableau , j'y prendrais compte pour la prochaine fois

 

[Lapin Masqué]

Ton reset CSS ne marche pas et c'est parfaitement normal.

Les instructions CSS ne sont pas exécutées par ordre d'apparition mais par "poids".

http://openweb.eu.org/articles/cascade_css

En gros, une instruction avec comme sélecteur une balise (a html p ...) pèse moins lourd que une instruction avec une classe comme sélecteur (.zzz .xxx) qui pèse moins lourd qu'une instruction avec un id comme sélecteur (#zzz, #xxx) qui pèse moins lourd qu'une instruction marquée !important.

Pour calculer dis toi que les balises valent 1 , les classes 10 et les id 100 même si ce n'est pas tout à fait vrai ça reste utile pour calculer.

 

[tatouille]

il y a une parade,

<link rel="stylesheet" href="page.css" type="text/css" media="screen,projection,print" id="common" />

/* page.css */
@import "common.css";

<!--[if IE]> <style type="text/css">* {font-family: Arial, sans-serif;} </style> <![endif]-->


de toutes les facons il vaut mieux inclure les redifinitions hacks dans le core des pages,
cela aussi regle aussi le probleme d'url d'IE (n'applique pas le fullpath:

/path/css -> .image{ backurl:toto.jpg) -> equals ./toto.jpg et non /path/css/toto.jpg

par exemple dans le cas d'un png filter,

et ca vous permet d'avoir un code plus propre sans pourrir vos CSS normées, et pour moi c'est plus logique d'inclure cela au niveau de la vue que dans un element extern a la vue, c'est une correction locale et non globale

mais bon ceci dit banissez IE c'est la seule solu pour qu'ils bougent leur cul chez crosoft: quand ils perdent de l'argent


ceci est a banir

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/style.css" type="text/css" media="screen" />


<link rel="stylesheet" href="{TEMPLATE_IE_CSS}" type="text/css" media="screen" />

et parse ta template

exemple

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="{TEMPLATE_LANG}">
<!-- XHTML 1.0 Transitional -->
<!-- {TEMPLATE_NAME} -->
<head>
    <title>{TEMPLATE_TITLE}</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="robots" content="noindex,nofollow" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="cache-control" content="no-cache,no-store" />
    <meta http-equiv="pragma" content="no-cache" />
    
    <link rel="stylesheet" type="text/css" href="{TEMPLATE_ROOT}/css/common.css" id="common" />
    
    <!-- IE PNG24 -->
    <!--[if lt IE 7]>
        <style type="text/css">
            .box_top {
                filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='{TEMPLATE_ROOT}/img/box_top.png');
            }
            .box_bottom {
                filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='{TEMPLATE_ROOT}/img/box_bottom.png');
            }
            
            .box_top_img,
            .box_bottom_img {
                filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);
            }
        </style>
    <![endif]-->
    <!-- IE PNG24 -->
    <script type="text/javascript">
        {JS_HEAD}
    </script>
    <script type="text/javascript" src="{TEMPLATE_ROOT}/scpt/core.js"></script>
    
</head>
<body onload="{JS_ONLOAD}">
      <div class="container">
          <!-- HEADER -->
          <div id="HEADER">
        {HEADER}
        </div>
        <!-- HEADER -->
        
        <!-- MENU -->
        <div id="MENU">
        {MENU}
        </div>
        <!-- MENU -->
        
        <!-- BODY -->
        <div id="BODY">
        {PAGE_BODY}
        </div>
        <!-- BODY -->
        
        <!-- FOOTER -->
        <div id="FOOTER">
        {FOOTER}
        </div>
        <!-- FOOTER -->
    </div>
</body>
<!-- {TEMPLATE_NAME} -->
<!-- XHTML 1.0 Transitional -->
</html>