[CSS] IE6 me rends fou

  • Créateur du sujet Créateur du sujet Membre supprimé 2
  • Date de début Date de début
M

Membre supprimé 2

Invité
Bonjour,

Je suis dans la mouise car je dois rendre un site aujourd'hui (9 heures de moins par rapport a chez vous). Si quelqu'un peut m'aider, je lui serai éternellement reconnaissant. :(

Ce petit site est valide Xhtml transitionnal / Css et - comme d'habitude - il y a un bug sur IE6.

Je suis parti de ce template souhaité par mon client, il s'agit d'un modèle 3 colonnes en largeur fluide.

Mon problème concerne 2 pages:
Boarding
Events

Comme vous pouvez le voir sur la capture IE6, le content dépasse sur le footer.
On pourrait dire que ce footer ne reconnait pas la hauteur du content, et lui passe dessus.

Capture iE6:
notok.png



Mais le plus bizarre, c'est que lorsque je redimensionne la fenêtre iE6 en la réduisant, le footer reprend une apparence normale:

Capture IE6:
ok.png


J'avoue que je ne maitrise pas encore correctement les feuilles de style en largeur fluide, toutes suggestions sera la bienvenue.

Merci bcp.
 
Dernière édition par un modérateur:
Je ne voudrais pas te faire peur... mais sur Firefox 2 PC, le rendu n'est pas bon non plus (chevauchement des colonnes sur un 15"...) même si le footer apparait bien.

Exemple : la page lusitanos
 
Je suis parti pour faire nuit blanche, mais je crois que je viens de cerner le problème.
L'image sur laquelle le footer chevauche a une largeur de 700px. lorqu'on retrecit la fenêtre, celle-ci ne se réduit pas, cela semble logique. On ne peut donc pas mettre de photos ou de table avec largeur en px sur ce type de template ? as-tu des suggestions ? au point ou j'en suis, j'ai interêt a rebâtir toute la feuille. Merci Starmac.
 
ben... si on peut mettre des tailles fixes. Mais ça reste compliqué à gérer.
Suggestion : image en taille fixe mais plus petite :siffle:
 
Tu devrais mettre tes largeurs de blocs en pourcents pour avoir un contenu fluide (genre gauche : 15, centre : 70 et droite 15). J'ai vu aussi dans le code html des largeurs données en style inline, vu qu'elles écrasent celles de la feuilles de styles externe, ne faudrait-il pas les effacer? Sinon 700 pixels de large pour l'image cela me semble énorme, tout le monde n'a pas un écran en 1280*1024. ;)
 
Tu peux dans ta feuille de style faire des paramètres spéciaux pour Internet Explorer, il suffit de le mettre à la suite de l'attribut normal et le faire précéder d'un '_'
Exemple :
width: 300px; //Pour tout le monde
_width: 320px; //Seul IE le comprendra
 
kernel32.dll a dit:
Tu peux dans ta feuille de style faire des paramètres spéciaux pour Internet Explorer, il suffit de le mettre à la suite de l'attribut normal et le faire précéder d'un '_'
Exemple :
width: 300px; //Pour tout le monde
_width: 320px; //Seul IE le comprendra
Cliquez pour agrandir...

Tiens, je ne connaissais pas ce hack. Malheureusement, comme tout hack, on ne peut pas s'y fier. Un hack est par définition l'utilisation d'un comportement anormal et involontaire (un bug) du navigateur. Ceci veut dire que ce comportement, s'il peut être "pratique" dans certaines conditions, n'est pas garanti dans d'autres, et peut même se révéler très problématique dès qu'on sort du cadre restreint où se hack fonctionne.

Le mieux, pour appliquer des styles à certaines versions d'IE et pas à d'autres, c'est d'utiliser les commentaires conditionnels. C'est une fonctionnalité intégrée par Microsoft à ses navigateurs, qui est documentée et dont le comportement est de fait fiable et prévisible. De plus, ce système offre un contrôle très fin sur les versions de navigateurs.

Ce système est très simple. Dans l'exemple suivant, j'utilise une feuille de style globale, vue par tous les navigateurs, et je déclare une feuille de style spécifique à IE6 dans un commentaire conditionnel.
Bloc de code: 
<head>
   <link rel="stylesheet" href="global.css" type="text/css" />
   <!--[if IE 6]>
      <link rel="stylesheet" href="ie6.css" type="text/css" />
   <![endif]-->
</head>

Tout ce qui se trouve entre <!--[if IE 6]> et <![endif]--> ne sera pas lu par les autres navigateurs, qui prendront cela comme un commentaire ordinaire (on rappelle que la syntaxe d'un commentaire html c'est <!-- ... -->).
Mais les navigateurs Microsoft vont analyser un tel commentaire. Dans cet exemple, on restreint la feuille de style à IE6, mais d'autres syntaxes permettent de restreindre à toutes les versions supérieures, inférieures, etc.
Par exemple :
<!--[if IE]> s'applique à toutes versions d'IE confondues
<!--[if gte IE 5.5]> s'applique à toutes les versions supérieures ou égales à IE5.5 (gte signifie "greater than or equal", litéralement "supérieur ou égal").

Ceux que ça intéresse peuvent lire cet article complet et documenté sur le sujet.

Encore une fois, préférez ce système à tout autre hack dès qu'il s'agit d'appliquer des styles à certaines versions d'IE.
 
Désolé pour le délai. J'ai été pris par le temps, et finalement rebâti le site en Html 4.01 transitionnal, celui-ci fonctionne bien. Maintenant que j'ai du temps avant la prochaine MAJ, vos réponses vont m'être très utiles pour repasser la structure en Xhtml. Merci beaucoup à tous, Mac-G est une communauté fantastique. :zen: :love:
 
tumb a dit:
Désolé pour le délai. J'ai été pris par le temps, et finalement rebâti le site en Html 4.01 transitionnal, celui-ci fonctionne bien. Maintenant que j'ai du temps avant la prochaine MAJ, vos réponses vont m'être très utiles pour repasser la structure en Xhtml.
Cliquez pour agrandir...

Surtout, ne te sens pas obligé de refaire ton site en XHTML. HTML convient aussi. L'important, c'est de coder selon un standard, afin que tous les navigateurs respectant ce standard puisse l'afficher correctement.
Le fait que XHTML soit plus récent que HTML ne signifie pas que ce dernier est obsolète.

D'ailleurs, dans les milieux où se décide le futur du web (W3C, groupes d'industriels, etc.), il semble que les efforts vont se concentrer sur une nouvelle version de HTML plutôt que sur une nouvelle version de XHTML.
 
sylver a dit:
Surtout, ne te sens pas obligé de refaire ton site en XHTML. HTML convient aussi. L'important, c'est de coder selon un standard, afin que tous les navigateurs respectant ce standard puisse l'afficher correctement.
Le fait que XHTML soit plus récent que HTML ne signifie pas que ce dernier est obsolète.

D'ailleurs, dans les milieux où se décide le futur du web (W3C, groupes d'industriels, etc.), il semble que les efforts vont se concentrer sur une nouvelle version de HTML plutôt que sur une nouvelle version de XHTML.
Cliquez pour agrandir...
C'est vrai que c'est le souhait actuel de Tim Burner Lee :)
 
Haut Bas