Compatibilité IE et Mozilla en CSS

Standyfordy · le 6 février 2005

Salut tout le monde,

Comme tout le monde, lors d'un developement d'un site, on passe plus de temps pour la compatibilité que pour le site en lui même :francais: .

Mais là j'ai jamais eu ça, une boite Css qui s'affiche plus longue sous mozilla que sous internet explorer !

J'ai simplifié le code et ça donne :

<html>

<head>

#sous-cadre {

height : 180px;

padding : 100px;

padding-top : 28px;

margin : -1px;

border : 1px solid #000000;

background-color : #FF0000;

width : 450px;

height : 280px;}

#cadre-milieu{

position : absolute;

top : 250px;

left : 270px;

height : 1000px;

width : 450px;}

</style>

</head>

<body>

<p>Popopom le super texte qui se met dans la boite :)</p>

</div>

</body>

</html>

Comme vous pouvez le voir, selon Ie ou Mozilla, la taille de la boite rouge est différente (je sais que ça vient du padding...)

Le pire, c'est que je sais que ce problème peut être résolu avec le hack de Tantek Celik mais je n'arrive pas l'appliquer.

Si une âme charitable pourrait me changer ma source en y incorporant ce fameux hack, je lui serait très reconnaissant :-D

Merci d'avance.

Standyfordy

Standyfordy · le 6 février 2005

Bon comme personne ne semble avoir envi de selancer :francais: , je vous ai simplifié la tâche un tantinet :transpi: .

Voici ce que ça donne :

La page de Test

Essayez avec IE et mozilla, la taille de la boite rouge n'est pas la même.

Siouplez repondezzzzz :francais:

Standyfordy

Nis · le 6 février 2005

Il faut nous laisser un peu le temps de nous réveiller aussi, c'est dimanche :yes:

Je ne vais pas corriger ton code, mais plutôt te donner un lien qui explique ce que tu veux faire : http://www.alsacreations.com/articles/centrer/

J'ai l'impression que tu te casses un peu la tete à vouloir définir 2 DIV (cadre-milieu, sous-cadre). Ici il n'en utilise qu'un seul : #global.

J'espère que ça aura pu t'aider, n'hésite pas à regarde le reste du site il y a plein de trucs intéressant dessus.

Standyfordy · le 6 février 2005

Désolé mais ce n'est pas un problème de centrage que j'ai, c'est un problème de longueur de boîte.

C'est un problème de compatibilité. Regardez ça :

Hack de Tantek Celik

Cette astuce me permettrait de pourvoir avoir la même largeur de boite pour IE et mozilla.

J'ai l'impression que tu te casses un peu la tete à vouloir définir 2 DIV (cadre-milieu, sous-cadre). Ici il n'en utilise qu'un seul : #global.

Non pas du tout car je veux mettre plusieurs div 'sous-cadre' dans le 'cadre-milieu'.

J'ai simplifie la source mais en fait ça aurait pu être ça :

.... <div id="sous-cadre">

........ <p>Popopom le super texte qui se met dans la boite :)</p>

.... </div>

.... <div id="sous-cadre">

........ <p>Popopom le super texte qui se met dans la boite :)</p>

.... </div>

</div>

La on voit mieux que j'ai effectivement bien besoin de deux 'div' différentes.

S'il vous plait, ne me dites pas que je m'emmerde à mettre plein de couleurs toutes belles pour vos yeux tout beau :transpi: pour rien :zarb:

Standyfordy (est en plein forme :-D )

Nis · le 6 février 2005

Avec le site que je t'ai donné, tu peux faire la même chose (il me semble...). Je ne sais pas si ils emploient la même technique que Tantek Celik, mais ca fonctionne aussi bien avec le moteur Gecko qu'avec celui d'IE.

Libre à toi ensuite de DIViser le bloc, comme tu le montres (mieux :transpi: ) maintenant :)

Si j'étais toi je me contenterais déjà de faire mon bloc principal, ensuite les autres.

Pour les couleurs, j'aime pas tellement ;p J'vois pas le bleu sur le gris foncé déjà :(

Standyfordy · le 6 février 2005

Non le lien que tu m'as donné ne parle que de centrage et pas de longueur. Encore dsl :yes: .

Pour les couleurs, j'aime pas tellement ;p J'vois pas le bleu sur le gris foncé déjà :(

Lol c'est pas ce site que je veux changer. Celui la je l'ai abandonné :(.

Merci quand même mais je craint bien que mon problème n'ai pas de solutions, en tout les cas c'est ce que je vais finir par croire !

Standyfordy (un peu moins en forme )

Nis · le 6 février 2005

Non le lien que tu m'as donné ne parle que de centrage et pas de longueur

Tu n'as pas du bien regarder le code que la personne présente sur ton site.

Soit alors j'ai bu, soit je ne comprends décidément pas ce que tu veux faire . Deux indices : width, height.

Lol c'est pas ce site que je veux changer. Celui la je l'ai abandonné :(.

Pas compris :non:

Lorsqu'il n'y a pas de solutions, c'est qu'il n'y a pas de problème.

Standyfordy · le 6 février 2005

Lorsqu'il n'y a pas de solutions, c'est qu'il n'y a pas de problème.

Lol je note je note :8

QUOTE
Lol c'est pas ce site que je veux changer. Celui la je l'ai abandonné :(.

Pas compris

Laisse tomber pas important. :8

Bon je vais essayer de réexpliquer depuis le début :

Je veux faire un système de news sur ma page d'acceuil. Chaque news est dans une div (ici sous-cadre) et se met l'une en dessous de l'autre. Toute les news sont contenus dans une autre div (ici cadre-milieu).

Shématiquement ça donne ça :

Donc on reprend la source avec plusieurs 'sous-cadre' pour une meilleure comprehension :zarb: :

<html>

<head>

#sous-cadre

{

height : 180px;

padding : 100px;

padding-top : 28px;

margin : -1px;

border : 1px solid #000000;

background-color : #FF0000;

width : 450px;

height : 280px;}

#cadre-milieu

{

position : absolute;

top : 250px;

left : 270px;

height : 1000px;

width : 450px;}

</style>

</head>

<body>

.... <div id="sous-cadre">

........ <p>Popopom le super texte qui se met dans la boite :)</p>

.... </div>

.... <div id="sous-cadre">

........ <p>Popopom le super texte qui se met dans la boite :)</p>

.... </div>

.... <div id="sous-cadre">

........ <p>Popopom le super texte qui se met dans la boite :)</p>

.... </div>

</div>

</body>

</html>

Et pour récapituler tout ça, Ce que ça donne en "vrai" :zarb: !

Page de Demo

Etant donné que j'ai un menu à droite de tout ça sur la vrai page, sous mozilla, les news rognent un peu le menu de droite (puisque les news s'affichent plus large sous mozilla !).

Alors que sous IE, c'est pila la bonne taille :chinois: .

Je voudrais donc savoir comment on fait pour que les news s'affichent de la même largeur sur les deux navigateurs ?!

Bon je crois que je ne peux pas être plus explixit. J'attends de vos réponses

Standyfordy

lorinc · le 7 février 2005

et si tu définissait toutes tes tailles en fonctions de la largeur de police (em), mmmh?

Compte_supprime_49771 · le 7 février 2005

Je voudrais donc savoir comment on fait pour que les news s'affichent de la même largeur sur les deux navigateurs ?!

Tu n'as pas déclaré le DTD à utiliser; IE6 se met donc en mode compatibilité IE5, qui inclut le 'padding', et la 'border', dans les dimensions des blocs... Pour que IE6 affiche la même chose que Mozilla:

<!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="fr" lang="fr">

<head>

 <title>Test</title>

 <style type="text/css">

 	div#cadre-milieu {
   position: absolute; 
   top: 250px; 
   left: 270px;
   height: 1000px;
   width: 450px;
 	}

 	div.sous-cadre {
   height: 180px;
   padding: 100px;
   padding-top: 28px;
   margin: -1px;
   border: 1px solid black;
   background-color: red;
   width: 450px;
   height: 280px;
 	}

 </style>

</head>

<body>

 <div id="cadre-milieu">

 	<div class="sous-cadre">
   <p>Popopom le super texte qui se met dans la boite :)</p>
 	</div>

 	<div class="sous-cadre">
   <p>Popopom le super texte qui se met dans la boite :)</p>
 	</div>

 	<div class="sous-cadre">
   <p>Popopom le super texte qui se met dans la boite :)</p>
 	</div>

 </div>

</body>

</html>

Règle déjà tes dimensions pour qu'elles te conviennent, sous IE6 en mode "standards", et sous Mozilla... Ensuite, cherche un hack pour passer une valeur de 'width' différente uniquement pour IE5...

Si tu peux utiliser PHP ou un autre language de programmation serveur, base toi sur le 'User agent' renvoyé par le client, pour envoyer une width différente à IE5... Ca sera plus propre. (mais si un utilisateur fake son user agent vers IE5, alors qu'il est sous Mozilla, il aura les mauvaises valeurs... mais bon, c'est pas censé être ton problème, s'ils remettent pas leur user agent à sa valeur par défaut, quand ils ont finit de visiter un site qui bloque les autres navigateurs qu'IE -et puis en général, il fakera vers IE6, et pas IE5, donc ça pose vraiment peu de problèmes...). Tu peux aussi faire ça en Javascript, s'il est activé chez le client... (10% de chance qu'il soit désactivé en moyenne (ces stats comptent les robots qui viennent sur le site, mais ils font bien moins de 10%)) mais là, tu risques de retrouver de nouveaux problèmes d'incompatibilité entre IE et Mozilla

Si tu préfères un hack: http://www.positioniseverything.net/articles/box-model.html

Standyfordy · le 7 février 2005

Ok pour le hack :non: . D'ailleurs si tu relis les premiers posts, j'en ai parlé du hack de tantek celik...

Pour plus d'infos :Hack de Tantek Celik

D'ailleurs si une âme charitable pourrait me mettre ce hack dans le code ce serait nickel :)... parce que ce hack marche sur IE5 et moi j'ai le 6 :eeek2: .

Pour ce qui est du Php qui adapte la page en fonction du navigateur, c'est une éventualité que je ne vais pas écarter :francais: . Mais c'est vrai que c'est une bonne idée :eeek2:

Quelqu'un pourrait m'orienter sur un tel script Php (qui s'adapte en fonction du navigateur (IE ou Mozilla)) ? AU moins le debut de la synthaxe parce que je ne connais pas la fonction Php servent à cela :eeek2:

Merci d'avance

Standyfordy

Compte_supprime_49771 · le 7 février 2005

D'ailleurs si une âme charitable pourrait me mettre ce hack dans le code ce serait nickel :)... parce que ce hack marche sur IE5 et moi j'ai le 6 .

<!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="fr" lang="fr">

<head>

 <title>Test</title>

 <style type="text/css">

 div#cadre-milieu {
 	position: absolute;
 	top: 250px;
 	left: 270px;
 	height: 1000px;
 	width: 450px;
 }

 div.sous-cadre {
 	height: 180px;
 	padding: 100px;
 	padding-top: 28px;
 	margin: -1px;
 	border: 1px solid black;
 	background-color: red;
 	width: 248px;
 	height: 280px;
 }

 * html div { /* This is the Tan hack */
 	width: 248px;
 	w\idth: 450px;
 }

 </style>

</head>

<body>

 <div id="cadre-milieu">

 	<div class="sous-cadre">
   <p>Popopom le super texte qui se met dans la boite :)</p>
 	</div>

 	<div class="sous-cadre">
   <p>Popopom le super texte qui se met dans la boite :)</p>
 	</div>

 	<div class="sous-cadre">
   <p>Popopom le super texte qui se met dans la boite :)</p>
 	</div>

 </div>

</body>

</html>

Il est vraiment simple... Dans ton code CSS normal, tu règles ta largeur de façon standard (sans compter les paddings et borders), pour les navigateurs types Mozilla, Firefox, Galeon, Konqueror et Opera; puis au niveau du Tan hack, la première width est lue uniquement par Internet Explorer (toutes versions), donc tu règles la valeur de width pour IE5 (en prenant donc en compte les padding et les borders), et le second width, est lu par tous les IE, sauf IE5, donc tu rétablis une valeur standard (la même valeur que pour Mozilla & co). Essaie de te trouver un IE5 pour tester quand même, parce que j'en ai pas non plus, mais je pense pas qu'il y ai de problème...

Si tu voulais donc une largeur totale pour tes blocs de news, de 450px, sous un navigateur standard, tu dois enlever à ça, tes paddings (100px de chaque côté), et tes borders (1px de chaque côté), ce qui te donne donc la width de 248px... Alors qu'avec IE5, avec les mêmes paddings et borders, étant donné que ta width les prends déjà en compte, tu laisse ton 450px...

Pour ce qui est du Php qui adapte la page en fonction du navigateur, c'est une éventualité que je ne vais pas écarter . Mais c'est vrai que c'est une bonne idée
Quelqu'un pourrait m'orienter sur un tel script Php (qui s'adapte en fonction du navigateur (IE ou Mozilla)) ? AU moins le debut de la synthaxe parce que je ne connais pas la fonction Php servent à cela

Personnellement, j'utilise le module d'URL rewriting d'Apache pour régler une variable ('UA', qui contient 'MSIEx' avec x le numéro de version majeure d'IE...)

Ca donne (dans un .htaccess, ou ton apache.conf -renseigne toi si tu connais pas le module de réecriture d'URL):

RewriteEngine on

### Set browser id environment variable

RewriteCond %{HTTP_USER_AGENT} !^Mozilla.*MSIE.*Opera [NC]
RewriteCond %{HTTP_USER_AGENT} ^Mozilla.*MSIE\ ([[:digit:]]) [NC]
RewriteRule ^style/main.css.php$ - [E=UA:MSIE%1]

En gros, ça commence par éliminer les navigateurs Opera (qui contiennent MSIE dans leur 'User agent'), et puis ça laisse passer toutes les versions d'IE, en mettant de côté le numéro de version majeure... Finallement, ça règle la variable pour ma feuille de style...

Ensuite, faut donc aller dans ta feuille de style (si t'as pas de feuille de style séparée, indique l'url de ta page à la place de 'style/main.css.php'...), et faire un truc genre:

<?php

header('Content-Type: text/css'); // Met pas cette ligne si t'as pas de feuille de style séparée

// Browser identification
if (strpos($_SERVER['UA'], 'MSIE') !== FALSE) { define('MSIE', TRUE); }
else { define('MSIE', FALSE); }
switch ($_SERVER['UA']) {
case 'MSIE5':
 define('MSIE5', TRUE);
 break;
default:
 define('MSIE5', FALSE);
 break;
}

?>

Ce qui commence par envoyer le MIME type de ton fichier CSS (sinon, la plupart des navigateurs standards considéreront que ton fichier n'est pas une feuille de style CSS), puis parse la variable UA, pour déterminer quelle version d'IE le client a, et finallement, règle deux constantes PHP, une, MSIE, pour savoir si le gars a IE (pour corriger les bugs et problèmes propres à IE), et une autre, MSIE5 (principalement pour corriger les problèmes de width/height).

Après, tu continues ta feuille de style, avec genre:

div#main_backgroundBlock {
position: relative;
left: 50%;
width: <?php echo MSIE5 ? '760px' : '754px'; ?>;
margin: 5px 0px 5px -380px;
border: 1px solid black;
padding: 2px;
background: white;
}

Là par exemple, si le gars a IE5, le bloc aura une width de 760px, ce qui prend en compte les 2px de padding de chaque côté, et les borders de 1px de chaque côtés, donc 6px en tout... Et si le gars a pas IE5, le bloc aura une width de 754px, et dans la largeur totale, le navigateur rajoute le padding et la bordure, pour donner exactement le même résultat que sous IE5... (une largeur totale du bloc depuis la bordure, de 760px)

Tu peux bien entendu te servir de ce système pour régler d'autres problèmes propres à IE... (et dès que y'a besoin d'alignement au pixel près, y'a un tas de problèmes qui 'apparaissent'...)

Si t'as pas Apache, tu peux facilement déterminer le navigateur, et la version d'IE, avec les expressions régulières de PHP... Mais je me servais de la réecriture d'URL pour renvoyer des gens sur des pages genre "T0|\| |\|4\/!g4|-3|_|r S|_|xXxXxX" (bon, pas en vrai, mais tu vois le genre... "Oui, bonjour, vot' navigateur ne supporte pas complètement les technologies utilisées pour la mise en forme de ce site, je vous conseille de télécharger Firefox, Mozilla, Konqueror, Galeon, Opera, etc, ou bien d'attendre que nous trouvions une alternative pour régler ce problème..."), donc bon, j'ai gardé ça, mais ça se fait très bien avec PHP...

Il doit bien y avoir des modules qui font ça, mais j'ai pas cherché plus loin... (je sais que y'a des fonctions pour identifier le navigateur, à partir du 'User agent', et d'une liste de User Agent, mais les listes sont tellement énormes, que ça ralenti pas mal le traitement... (il doit y avoir des listes lights, faut chercher...) http://fr2.php.net/function.get-browser (lis tout, y'a besoin d'un fichier de liste d'UA, qu'on doit dl séparément... -le browscap.ini))

Bon courage, il en faut quand on veut faire fonctionner un site -même simple- mis en forme avec CSS, sous 'IE et les autres' en même temps

Standyfordy · le 8 février 2005

Merciiiiiiiiiiiii beaucoup :-D .

Tu as très bien répondu a ce que j'attendais, merci encore :smack:

Bon courage, il en faut quand on veut faire fonctionner un site -même simple- mis en forme avec CSS, sous 'IE et les autres' en même temps

Merci beaucoup, et il faut aussi du courage pour répondre tout ce que tu as écrits :yes:

MERCI !

Standyfordy

Charles.w · le 8 février 2005

Heu...sinon, juste un truc, comme ca, en passant, l'air de rien IE ne respecte pas vraiment les standards établis pas le W3C...et la prise en charge de certaine CSS est plus qu'aléatoire...donc il est fort probable qu'une CSS buggée passe sans pb sur IE, mais pose problème avec mozilla / firefox / netscape...

Standyfordy · le 8 février 2005

Oui je sais c'est d'ailleurs la raison de la création de ce topic :). D'où l'idée d'utiliser un hack ou un script PHP qui permette de réaliser le même affichage sur le plus grand nombre de navigateurs possible.

Standyfordy

Connexion

Compatibilité IE et Mozilla en CSS

Messages recommandés

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Lien vers le commentaire

Partager sur d’autres sites

Archivé