28220 sujets

CSS et mise en forme, CSS3

[RESOLU] Sci-fi MS IE 6

Le titre du sujet est peut-être étrange mais pas autant que le comportement de la dernière mouture (6) du navigateur de Microsoft pour Windows lorsqu'il affiche ma bête de page Web XHTML 1.0 strict et sa feuille de style externe qui va bien.

Il duplique du code notamment pour les liens (il saute une ligne et ajoute les dernières lettres du mot précédent). Suis-je clair ?
Une image vaut tout les discours du monde :

lien page HTML : http://mon.panda.rouge.free.fr/static/InfoPSG_Accueil.html

lien feuille de style CSS :http://mon.panda.rouge.free.fr/static/infopsg-screen.css

Je précise que l'affichage est correct sur Gecko (Mozilla, Firefox, Netscape 7, 8) et Presto (Opera). J'ai validé la structure XHTML avec l'outil en ligne du W3C : valide. Quant à ma CSS le code est validé excepté pour mon hack PNGbehavior pour forcer la transparence du PNG (hack qui n'est en rien responsable du problème) sur la poubelle moyen-ageuse de microsoft.

Le problème se situe uniquement au niveau de la CSS (sans style MS IE affiche le bon contenu toute de même) mais si la mise en page est le problème pourquoi ajoute-il du contenu (un bout de lien en sus qui n'existe pas...) imaginaire ?

J'avais jamais vu cela avant mais si quelqu'un a déjà eu ce problème ou a des pistes de solution (désinstaller MS IE de tous les ordinateurs de la terre) qu'il me les écrivent je l'en remercie d'avance Smiley lol

Jeu des septs erreurs : bout de lien imaginaire ajouté en haut à droite 'Accédez à nos vidéos + s" et en bas à gauche "devenez partenaire + ire" sinon la liste de lien-image du bas de page la dernière image il ne veut pas qu'elle soit alignée comme les autres et pour finir la mini-pub firefox (à droite vers le bas) insupporte MS IE qui l'affiche n'importe comment...


PS : on m'a suggérer un problème provenant de l'utilisation du charset (UTF-8) mais c'est de la foutaise à mon humble avis...
Modifié par Rea (06 Jul 2005 - 09:41)
Salut,

#infopsg-tv p#psgtv { margin: 0; padding: 0; width: 159px; height: 104px; background: transparent url(habillage/infopsg-tv.jpg) top left no-repeat;
border: 0; border-bottom: 5px solid #243F50;   }


il ne manque pas une virgule entre #infopsg-tv et p#psgtv?

Apparemment, IE répète les dernières lettres, comme si il y avait deux paragraphes superposés...
bouquins a écrit :
Salut,

#infopsg-tv p#psgtv { margin: 0; padding: 0; width: 159px; height: 104px; background: transparent url(habillage/infopsg-tv.jpg) top left no-repeat;
border: 0; border-bottom: 5px solid #243F50;   }


il ne manque pas une virgule entre #infopsg-tv et p#psgtv?

Apparemment, IE répète les dernières lettres, comme si il y avait deux paragraphes superposés...


Pour certains puristes cette synthaxe '#bidule p#machin' (le paragraphe identifié 'machin' est dans le conteneur "bidule') peut être ramené à un simple p#machin mais moi ça me facilite la lecture ainsi écris (j'ai fais des tests et '#infopsg-tv p#psgtv' ou 'p#psgtv' c'est pareil pour tout les navigateurs IE y compris)

Donc le défaut n'est pas là mais je te remercie de ta participation bouquins Smiley cligne
Déjà, on va virer la page imbittable et se concentrer sur le bug proprement dit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
  <title>test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
    <!-- 
    .float {
    float : left;
    width : 100px;
    } 
    -->
    </style>
  </head>
  
  <body>
      <div class="float">
        <div class="float">float 1</div>
        <!-- foo -->
        <div class="float">float 2</div> 
        <!-- foo -->
        <div class="float">
        	float 3 et bug
        </div>
    	</div>

  </body>
</html>


Là, déjà ça va mieux Smiley cligne

Et du coup, la solution empirique est simple : tu vires l'une des deux lignes de commentaire <!-- foo --> et ke bug de répétition de caractères disparaît.

IE patine beaucoup beaucoup dès qu'il y a des flottants. Là, j'avoue que c'est assez cocasse Smiley rolleyes
Modifié par Laurent Denis (06 Jul 2005 - 09:15)
Laurent Denis a écrit :
Déjà, on va virer la page imbittable et se concentrer sur le bug proprement dit :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
  <head>
  <title>test</title>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <style type="text/css">
    <!-- 
    .float {
    float : left;
    width : 100px;
    } 
    -->
    </style>
  </head>
  
  <body>
      <div class="float">
        <div class="float">float 1</div>
        <!-- foo -->
        <div class="float">float 2</div> 
        <!-- foo -->
        <div class="float">
        	float 3 et bug
        </div>
    	</div>

  </body>
</html>


Là, déjà ça va mieux Smiley cligne

Et du coup, la solution empirique est simple : tu vires l'une des deux lignes de commentaire <!-- foo --> et ke bug de répétition de caractères disparaît.

IE patine beaucoup beaucoup dès qu'il y a des flottants. Là, j'avoue que c'est assez cocasse Smiley rolleyes


Merci Laurent d'avoir mis fin à mes nuits d'insomnie angoissante la sueur perlant sur mon front dans cet inextricable problème Smiley lol

Mais l'origine de cette irrégularité est connue ?

Car si un simple commentaire est à l'origine de bogue aussi gênant on n'est pas sorti de l'auberge les zamis Smiley sweatdrop

PS : j'avoue que je n'aurais jamais pensé à ça Smiley confused Comme quoi la solution est toujours là où l'attend le moins Smiley ravi
Rea a écrit :


Pour certains puristes cette synthaxe '#bidule p#machin' (le paragraphe identifié 'machin' est dans le conteneur "bidule') peut être ramené à un simple p#machin mais moi ça me facilite la lecture ainsi écris (j'ai fais des tests et '#infopsg-tv p#psgtv' ou 'p#psgtv' c'est pareil pour tout les navigateurs IE y compris)


Cette syntaxe n'est en rien problématique ici, en effet.

Mais une précision, si tu t'en sers systématiquement, car tu risques d'avoir quelques suprises dans d'autres CSS : #infopsg-tv p#psgtv et p#psgtv ne sont pas du tout équivalents pour les navigateurs : ils diffèrent totalement, mais tu n'as simplement pas encore rencontré le cas où cette différence intervient.

En effet, ces deux sélecteurs n'ont pas la même priorité dans la cascade CSS, c'est à dire le calcul qui va donner le style finalement appliqué à ton élément :
- #infopsg-tv p#psgtv : priorité = 0201 (2 id, 0 classe, 1 élément)
- p#psgtv : priorité = 0101 (1 id, 0 classe, 1élément)

Autrement dit, le premier sélecteur a un poid nettement plus élevé que second, et "écrasera" un plus grand nombre d'autres règles concernant cet élément, situées ailleurs dans tes CSS.

Comment en tenir compte ? Disons qu'en cas de choses bizarres, c'est un détail auquel tu devras penser Smiley cligne

Pour les détails sur ce que sont la cascade, la priorité, etc : http://openweb.eu.org/articles/cascade_css/
Rea a écrit :

Merci Laurent d'avoir mis fin à mes nuits d'insomnie angoissante la sueur perlant sur mon front dans cet inextricable problème Smiley lol


A ce point, vraiment ? Smiley eek Smiley lol


Rea a écrit :

Mais l'origine de cette irrégularité est connue ?


Il me semble l'avoir vu passer sur http://www.quirksmode.org/ ou sur http://www.positioniseverything.net/

Rea a écrit :

PS : j'avoue que je n'aurais jamais pensé à ça Smiley confused Comme quoi la solution est toujours là où l'attend le moins Smiley ravi



Je n'y aurais jamais pensé non plus, pour tout te dire, devant le code de ta page.

C'est après avoir isolé la portion de HTML et de CSS minimale pour que le bug se produise que ça devient trouvable. D'où un petit conseil, en cas de bug CSS:
- supprimer, supprimer, pas à pas, tout ce qui a priori n'a aucun rapport, en vérifiant à chaque suppression que le bug se produit toujours
- une fois le code minimal établi... si rien n'apparaît évident, rendre ce code plus générique (ici, la classe unique au lieu des id, etc) et reprendre le processus d'élagage jusqu'à trouver le bout fautif Smiley cligne
Sujet clos
Aller à