28172 sujets

CSS et mise en forme, CSS3

Impec sous FF ; nul sous ie ?

Bonjour,

Je viens à votre rencontre car j'ai évidemment quelques soucis de compréhension à propos de I.E. J'utilise un script de blog (Wordpress 2) sur un serveur "dédié" chez 1hebergement. J'ai crée mon propre thème pour ce blog, et j'ai suivi au mieux les recommandation de la W3C. Pour preuve, sous Firefox 2 et 3, je n'ai absolument aucun problème d'affichage et mon css est bien valide. Tout semble se placer comme ça le devrait. Sur mon OS, je n'ai pas IE, car je l'ai désinstallé il y a bien longtemps, puisque je suis FF depuis la 1ère version ou presque.

J'ai installé IE Tab, histoire de voir ce que ça donne et à mon grand "étonnement", mon blog ne s'affiche pas correctement sur ce navigateur. Le problème, c'est que là, je ne sais absolument pas quoi faire, ni par où commencer pour corriger ces mauvais affichages. Je ne dis pas que j'ai commis aucune erreur, loin de là, mais est-ce que certains d'entre-vous auraient la gentillesse de m'aider à déboguer ça ?

Voilà tout d'abord l'adresse de mon blog.
Voilà ensuite l'adresse de la CSS
Bonjour,

Le site s'affiche correctement sous IE7.
Le problème d'affichage se pose pour IE6 et précédents.
Il s'agit de la non prise en compte de la propriété "position:fixed;" par les versions d'Internet Explorer antérieures à 7. Pour corriger il faut créer une feuille de style spéciale pour IE6 et remplacer les "position:fixed" par "position:absolute". Il faut aussi modifier les propriétés de la balise <body> et de cadre-contenu comme ceci :
body  {
overflow: hidden;
background: #f5f5f5 url(images/bodydecor.png) repeat;
font-size: 11px;
font-family: "Times New Roman", Times, serif;
font-family: "Trebuchet MS", verdana;
letter-spacing: 0.1pt;
}

#cadre-contenu  {
position: relative; /* petit doute, pas certain que la position relative soit bien prise en compte */
height: 100%;
overflow: auto;
left: 25px;
margin-top: 65px;
margin-bottom: 20px;
width: 800px;
border: 1px solid white;
z-index: 1;
background-color: black;
padding-top: 25px;
}


Plus d'informations sur cette page : position:fixed for Internet Explorer
Modifié par Shunkin (29 Apr 2008 - 01:45)
Ah, ok ! Alors mon ietab doit utiliser la version 6 du moteur de ie. Heureux que ça se passe bien sous ie7 alors, ça fait plaisir et surtout merci à toi d'avoir pris un peu de ton temps pour analyser la situation.

Petite question :
Pour le faire, je dois utiliser un commentaire conditionnel dédié à ie 6 seulement dans lequel je dis après mon premier appel du css d'aller voir la feuille cssie.css contenant ce fix ? Est-ce la meilleure méthode à adopter ?
Bien voilà, alors j'ai fais ce que tu m'as dis, mais ça ne change rien sous Firefox, avec IE tab. J'ai regardé pour installer IE6 SP1, depuis télécharger.com mais à l'installation, le programme me dit qu'une version plus récente est déjà installée ! O_O

Bon, comme récemment, en faisant du ménage, j'ai enlevé certains composants comme IE, je vais réinstaller la 7, mais si ça fonctionne bien, je ne sais plus trop comment faire. Quel foutoir quand même ce IE...

Quelqu'un peut me dire si la correction apportée avec mon styleie6fix.css est ok ?
Désolé, quelques corrections à faire à ma première réponse.

Dans #cadre-position", remplacer "position:relative;" par "position:static;overflow:hidden;" et remplacer le "height:100%;" par "height:auto;".
Faire de même pour les autres "position:relative;".

Supprimer les propriétés de "body" et les remplacer par ces lignes :
html, body {overflow-y:hidden;}

* html body {height: 100%;overflow: auto;}


ça devrait fonctionner cette fois.
Modifié par Shunkin (30 Apr 2008 - 17:01)
:)

Je sais que j'apprends doucement, mais rien y fait. En fait, le problème semble provenir, en tout cas dans mon ietab de ff, de la barre de catégorie "cadre-categories", en haut. Elle n'est pas du tout lacé normalement, et viens manger par dessus le reste.

Snif
Il faut certainement jouer un peu sur les positionnement pour avoir quelque chose de correct sous IE6.
En ajoutant "left:10px;" pour #cadre-categories puis "margin-top:60px;" pour #cadre-droite et #cadre-gauche l'affichage devrait être meilleur.
Après il faudra certainement modifier ces deux valeurs pour avoir un affichage optimum.
Sujet clos
Aller à