Question simple en CSS : Différence entre Firefox et IE

Marsh Posté le 30-06-2005 à 20:13:17

Bonjour tout le monde!

Je commence a utiliser de plus en plus les CSS pour le positionnement et le layout de mes pages mais j'ai qques problèmes, notamment avec la propriété float

voici le code :

Code :

<html>
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>test.html</title>
<style type="text/css">
#element1 { position:relative;float: left; width:200px;
}
body { font-family: Arial,Helvetica,sans-serif; }
#element2 { position:relative;border: 1px solid rgb(204, 51, 204); width:200px;
} </style>
</head>
<body>
<div id="element1">
Premier DIV
</div>
<div id="element2">
Deuxieme DIV
</div>
</body>
</html>

Avec IE 6.0, le bloc element2 est collé a gauche de element1 (ce qui me semble logique vu l'utilisation du float).
Avec Firefox 1.04, le bloc element2 est en dessous de element1. D'autre part la bordure de element1 recouvre la surface de element2.

Qui a raison ? Merci de votre aide!

Message édité par jalios828 le 30-06-2005 à 20:17:03

Reply

Marsh Posté le 30-06-2005 à 20:13:17

Reply

Marsh Posté le 30-06-2005 à 23:42:19

Apparemment en augmentant le width de element2 ou en le supprimant totalement, le float fonctionne sous FireFox. Mais je ne comprends pas pourquoi

Reply

Marsh Posté le 01-07-2005 à 15:33:20

up :hello:

Reply

Marsh Posté le 04-07-2005 à 13:58:51

jalios828 a écrit :

up :hello:

Personne ?

Reply

Marsh Posté le 05-07-2005 à 08:11:05

Tu as vérifier sur SelfHTML.org l'interopérabilité des params ?
J'ai eu les même problèmes avec une validation pour plusieurs explorateurs : Amaya, IE 5.0, IE 5.5, IE 6.0, FireFox, Mozilla, Opera, IE 5.2 mac et Safari.
J'ai réussi à isoler les modifs valident pour certains... Au final, j'ai fait du JS qui modifient les éléments la page dynamiquement. Je n'ai pas trouvé d'autre solution.
Mais ce n'est pas la première fois que j'ai des problèmes avec les CSS. Je pense que le support n'est pas encore au point.

Voilà en gros ce que mon prog en php génère (j'ai pas mis la routine de détection de version).

Code :

<SCRIPT TYPE='text/javascript'>
if ((Is_ie)&&(Is_mac))
{
var i=0;
for (i=0;i<8;i++)
{
eval ( 'document.all.correct_ie' + i + '.style.width = "auto"' );
eval ( 'document.all.correct_ie' + i + '.style.height = "auto"' );
eval ( 'document.all.tabletd_ie' + i + '.style.height = "auto"' );
eval ( 'document.all.tabletd_ie' + i + '.style.position = "relative"' );
eval ( 'document.all.table_ie' + i + '.style.width = "640px"' );
eval ( 'document.all.table_ie' + i + '.style.height = "82px"' );
}
}
</SCRIPT>

Message édité par christophe_d13 le 05-07-2005 à 08:14:28

Reply

Marsh Posté le 05-07-2005 à 09:05:59

Ho mon dieu le caca inutile.

le Hack CSS c'est quand même plus propre

Reply

Marsh Posté le 05-07-2005 à 09:28:36

gatsusat> Je t'écoute.
Mais sache que sur le site en question, il n'y est pas de fichiers CSS à proprement parlé. Il y a en fait un tableau de produits et chaque produit dispose de sa propre feuille de style. Parfois, il y a meêm plusieurs produits qui partagent la même feuille de style. D'autant que ce n'est pas moi qui m'occupe des feuilles de style ni des données. Je me contente juste de faire en sorte que tout fonctionne. Et puis à la base, je suis pas programmeur PHP ou JS, mais plutot ASM et C.
http://www.jocatop.fr/produits/produit.php

Message édité par christophe_d13 le 05-07-2005 à 09:29:33

Reply

Marsh Posté le 05-07-2005 à 09:41:25

christophe_d13 a écrit :

Tu as vérifier sur SelfHTML.org l'interopérabilité des params ?
J'ai eu les même problèmes avec une validation pour plusieurs explorateurs : Amaya, IE 5.0, IE 5.5, IE 6.0, FireFox, Mozilla, Opera, IE 5.2 mac et Safari.
J'ai réussi à isoler les modifs valident pour certains... Au final, j'ai fait du JS qui modifient les éléments la page dynamiquement. Je n'ai pas trouvé d'autre solution.
Mais ce n'est pas la première fois que j'ai des problèmes avec les CSS. Je pense que le support n'est pas encore au point.

Voilà en gros ce que mon prog en php génère (j'ai pas mis la routine de détection de version).

Code :

<SCRIPT TYPE='text/javascript'>
if ((Is_ie)&&(Is_mac))
{
var i=0;
for (i=0;i<8;i++)
{
eval ( 'document.all.correct_ie' + i + '.style.width = "auto"' );
eval ( 'document.all.correct_ie' + i + '.style.height = "auto"' );
eval ( 'document.all.tabletd_ie' + i + '.style.height = "auto"' );
eval ( 'document.all.tabletd_ie' + i + '.style.position = "relative"' );
eval ( 'document.all.table_ie' + i + '.style.width = "640px"' );
eval ( 'document.all.table_ie' + i + '.style.height = "82px"' );
}
}
</SCRIPT>

Merci pour vos réponses...
Je n'ai pas bcp d'XP sur les CSS pour le positionnement et je pensais être passé a côté de qquchose de très gros...
En surfant un peu sur le net j'ai trouvé un autre problème avec le float qui necessitait l'utilisation de spacers... Vous connaissez ?
Finalement le "float", j'ai vraiment l'impression que c'est un cadeau empoisonné. quand on l'utilise dans des combinaisons complexes, on peut avoir de mauvaises surprises.

Autre problème que j'ai pu rencontré mais qui n'est pas directement lié aux float : IE et FireFox n'interpretent pas un height:100% de la même façon...

Par contre j'ai entendu parlé d'un truc sympa : le "display : table". Ca pourrait être un compromis interessant pour certains types de layout : qques fois, voir le layout d'une page comme une table avec des colonnes et des lignes c'est carrément plus simple/logique. Mais bon IE ne le gère pas du tout alors....

Bref j'ai encore du boulot sur la planche!

Reply

Question simple en CSS : Différence entre Firefox et IE

Sujets relatifs:

Leave a Replay