Intégration impossible sous Drupal

Information importante

En raison d'un grand nombre d'inscriptions de spammers sur notre site, polluant sans relache notre forum, nous suspendons la création de compte via le formulaire de "sign up".

Il est néanmoins toujours possible de devenir adhérent•e en faisant la demande sur cette page, rubrique "Inscription" : https://www.drupal.fr/contact


De plus, le forum est désormais "interdit en écriture". Il n'est plus autorisé d'y écrire un sujet/billet/commentaire.

Pour contacter la communauté, merci de rejoindre le slack "drupalfrance".

Si vous voulez contacter le bureau de l'association, utilisez le formulaire disponible ici, ou envoyez-nous un DM sur twitter.

Submitted by Flash88 on

Bonjour !

J'ai un petit souci avec Drupal ! J'ai plusieurs problème avec Internet Explorer et le CSS uniquement sous Drupal. En effet, j'ai plusieurs éléments (carte + tableau) qui sur une feuille html s'affichent correctement, alors que sous Drupal rien ne fonctionne !

Par exemple ce code-ci ne fonctionne pas sous Drupal/IE alors qu'en le mettant sur un fichier HTML à part, cela fonctionne :

.grille-domaine-activite {
padding: 5px;
font-size: 11px;
position: relative;
}
.grille-domaine-activite tr { background: #ffffff;}
.grille-domaine-activite a {
display: block;
width: 150px;
height: 40px;
color: #636363;
text-decoration: none;
background-color:#dfe0e1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
padding: 10px;
}

.grille-domaine-activite a:hover {
padding: 10px;
color: #fff;background-color: #FF9900;
}

Forum : 
Développement
Version de Drupal : 
6.x

Soumis par benfarhat le 6 Mai, 2011 - 01:06

Salut flash88

lors de la création de ton thème ce qu'il faut absolument faire par intermittence (si ce n'est pas constamment) c'est voir le résultat de ton site sur plusieurs navigateur qui n'ont pas le même rendu.

Internet explorer 9,8, 7, 6 et 5.5
firefox 2, 3.x
google chrome
opera
safari
tu as au moins une idée sur la localisation du ou des problèmes

imagines que tu construit une voiture et que tu peut l'essayer pendant la construction (on va dire que c'est une voiture magique :)
si avant de mettre les roues, elle marche, et qu'après les avoir mis elle ne marche plus, tu saura inaliénablement que le soucis viens des roues.
par contre si tu construit toute ta voiture et que tu la test une fois toutes les pièces montés et bien ca sera la galère pour trouver ou ca cloche

Donc ce que je te propose pour vérifié c'est d'aller de l'extérieur vers l'intérieur

chaque élément (on va dire balise) et contenu dans un autre élément.
comme cette exemple

<html>
<head>
</head>
<body>
  <div>
   <ul>
    <li>
     <a>
     </a>
    </li>
   </ul>
  </div>
</body>
</html>

ce module sur firefox de permet de mieux voir de quoi je parle
https://addons.mozilla.org/fr/firefox/addon/view-source-chart/

donc toi tu va voir le conteneur le plus externe et seulement lui (en oubliant tous ce qu'il y a a l'extérieur)
vérifie que l'affichage est le même pour tous les navigateurs que j'ai cité plus haut.
si c'est bon rentre d'un niveau dans le conteneur interne
si c'est pareil passe au suivant
etc etc jusqu'à la fin

Remarque: ca ne sera jamais identique a 100% il y'aura des petites différentes (pour ne pas dire imperfection) mais que toi avec ton œil humain tu jugera satisfaisant

maintenant si un conteneur n'est pas identique alors tu corrige le css

comment??

vérifie d'abord que les attributs contenu a l'intérieur du sélecteur qui pointe vers le conteneur que tu tests
j'explique

si tu test un conteneur div dont la class est drufr tu doit chercher dans ton css

div {
liste d'attributs et de leurs valeurs
}
div.drufr {
liste d'attributs et de leurs valeurs
}

et

.drufr {
liste d'attributs et de leurs valeurs
}

si la liste des attributs est ok (car certains navigateur sont moins sévères que d'autres)

tu passes aux hacks internet explorer

car oui c'est Internet Explorer le mauvais élève
et qu'on ne peut pas l'ignorer car il rafle une trés grosse part d'utilisation (et donc de visiteurs potentiels pour ton site)

par exemple si tu as ca
width:500px;
_width:450px

ca voudra dire pour tous les navigateurs vous prenait une largeur de 500 pixel, et pour internet explorer 5.5 et 6 vous prenez 450pixels

si tu as par exemple

color:#000000 !important;
color:#212121;
alors firefox utilisera la couleur 000000 (noir) et internet explorer le gris 212121

tu as aussi des "bug" d'internet explorer qui parfois ne comprend pas la valeur background (je crois avec un .png)
si tu rajoute l'attribut suivant juste apres ca fonctionnera comme par magie

zoom:1;

voila en gros!
le problème c'est que c'est hack doivent être utilisé occasionnellement, si jamais tu retouche une trop grosse partie de ton css, alors l'idéal serait de faire un css pour internet explorer et ne le charger que suite a une condition (module conditional stylesheet)

http://drupal.org/project/conditional_styles

pour plus d'info sur les hack je te propose ces deux liens:

http://www.zonecss.fr/courscss/cours_feuille_css_31.html
http://www.lesintegristes.net/2008/04/08/cibler-internet-explorer-dans-u...

et lors de la création de ton interface si tu veux que le résultat général soit compatible avec tous les navigateurs pense à utiliser un framework css ou un système de grille

comme 960gs
1140px
less framework
et compass framework

voila, j'espère que c'est quelques infos sont dans un premier temps claire et dans un second bénéfique

si tu as un problème niveau css n'hésite pas a poser ta ou tes questions :)