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

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Question simple en CSS : Différence entre Firefox et IE

jalios828

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

Publicité

jalios828

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

jalios828

up :hello:

jalios828

jalios828 a écrit :

up :hello:

Personne ?

christophe_d13

L'efficacité à tout prix.

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

gatsusat

Ho mon dieu le caca inutile.

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

christophe_d13

L'efficacité à tout prix.

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

jalios828

christophe_d13 a écrit :

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!

FORUM HardWare.fr

Programmation

HTML/CSS

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

Sujets relatifs
Besoin d'aide diverses en CSS [note en bas de page]	problème I.E. pour flash et pas firefox
CSS: largeur variable et blockquote	Cherche Fckeditor en version plus simple
Pb CSS pour un affichage de menus fixe à droite	quelques question sur excel....
Tidy sous FireFox, ça vaut quoi ?	Menu vertical déroulant hs sous firefox
script incompatible MOZ/FIREFOX	CSS : question sur l'avenir
Plus de sujets relatifs à : Question simple en CSS : Différence entre Firefox et IE

Page générée en 0.062 secondes