28220 sujets

CSS et mise en forme, CSS3

Bonjour,

Je me heurte à un problème avec Internet Explorer 6.
J'utilise les styles h1 et h2 avec des bordures et une couleur de fond. Impossible de les voir apparaître avec IE 6.
Le problème est visible à http://formaweb01.free.fr/main.php?chap=1
Quelqu'un a une explication ?

Merci d'avance

Roland Smiley rolleyes
Modifié par rolles (09 Sep 2005 - 18:41)
Bonjour.

Toujours Internet Explorer!

#page {
FONT-SIZE: 0.8em; MARGIN-LEFT: auto; WIDTH: 90%; 
MARGIN-RIGHT: auto; FONT-FAMILY: "Trebuchet MS", Helvetica, sans-serif; 
[b]POSITION: relative;[/b] 
BACKGROUND-COLOR: #ffffff
}


En suprimant POSITION: relative; , ça semble marcher.

Maintenant, Pourquoi? je ne sais pas.

la portion de code suivante ne s'affiche pas en local.

<UL id=menuhaut>
  <LI><A href="http://formaweb01.free.fr/changedeg.php?deg=1">
1er degré</A> 
  <LI><A href="http://formaweb01.free.fr/changedeg.php?deg=2">
2nd Degré</A> 
  <LI><A href="http://formaweb01.free.fr/main.php?chap=1#">
Contacts</A> 
  <LI><A href="http://www.se-unsa.org/page_adher.html" 
  target=_blank>
J'adhère</A> 
  <LI><A href="http://formaweb01.free.fr/main.php?chap=1#">Liens</A> </LI></UL>

Modifié par GeorgesM (09 Sep 2005 - 19:47)
Merci beaucoup

Je me croyais assez bon mais là chapeau. Comment fait-on pour détecter un bug pareil ?


Roland
dans l'ordre :

- télecharger une version en local
- ouvrir l'html et le css dans deux volets de notepad++
- ouvrir une copie avec IE
- ouvrir une copie avec FF
- encadrer tous les div (dans css, rajouter div{border:3pt solid red})
- constater le problème
- suprimer dans l'html tout ce qui ne participe pas au problème
- éliminer les règles CSS non-utilisées à ce stade
- réfléchir
- tripoter le css pour voir ce qui "répond" ou pas
- en général à ce stade ça deviens plus évident.

Bien sur, quand ce n'est pas un bug du développeur, c'est des problèmes liés au caractère
particulier du navigateur, et sa façon d'interpréter les positionnements.
Sur alsacréations, c'est du matin au soir que les visiteurs s'arrachent les cheveux pour maintenirs leurs
sites compatibles sans compromission.

Ravi que ça fonctionne.
Autre point: xhtml 1 . C'est une bonne chose d'y passer dès que possible.

<DIV class=test id=lediv>texte</DIV>

deviens :

<div class="test" id="lediv">texte</div>
balises en minuscules, attributs entre guillemets

<BR> deviens : <br/> (comme en xml)

<UL>
<LI>Première ligne
<LI>Deuxième ligne
</UL>

deviens :

<ul>
<li>Première ligne</li>
<li>Deuxième ligne</li>
</ul>

Toute balise ouverte doit être fermée.

Mais après validation xhtml (qualité), redéclarer le document en html4 pour éviter d'autres problèmes avec le navigateur.
<br /> <hr /> uniquement par soucis de compatibilité avec des navigateurs ne comprenant que html.
Cette coquêterie du w3c n'a pas une longue vie devant elle.
Bonjour,

GeorgesM a écrit :

En suprimant POSITION: relative; , ça semble marcher.

Maintenant, Pourquoi? je ne sais pas.


C'est un bug d'IE Windows portant sur les conteneurs en position relative dotés de layout (#page est doté de layout par la propriété width).

La position relative provoque un traitement en deux temps du conteneur :
- placement en flux comme s'il n'y avait pas de position relative
- re-flow (re-dessin) du conteneur tenant compte de l'éventuel déplacement relatif (ici, le déplacement est nul puisqu'aucune valeur de top, bottom, right, ou left , n'est indiquée, mais cela n'empêche pas le re-flow de se produire).

Lors de ce re-flow, IE Win "oublie" les arrières-plan et les bordures des éléments enfants qui ne sont pas eux-mêmes dotés de layout.

Solutions :
- effectivement, supprimer la position relative si elle était inutile, comme c'est apparemment le cas ici
- ou bien doter les éléments enfants concernés de layout avec les moyens habituels (hauteur fictive ou zoom:1 dans une CSS en commentaire conditionnels, etc.)
Modifié par Laurent Denis (10 Sep 2005 - 06:51)
GeorgesM a écrit :
Mais après validation xhtml (qualité), redéclarer le document en html4 pour éviter d'autres problèmes avec le navigateur.


Uh ? Smiley eek

- Choix de la syntaxe HTML => déclaration HTML

- Choix de la syntaxe XHTML => déclaration XHTML

- La "validation xhtml (qualité)" ? Un document valide est valide pour le format utilisé. Le fait d'être valide XHTML n'apporte aucun "gain" sur le fait d'être valide HTML.

XHTML1.0 ne crée aucune difficulté avec le navigateur, puisqu'il sera ici utilisé dans le mode compatible HTML.

Que de confusions.
Modifié par Laurent Denis (10 Sep 2005 - 06:58)
Rappel: XHTML1.0 doit respecter certaines règles de compatibilité avec HTML4.01. Pour éviter les 3 erreurs les plus communément commises :
- <br /> et non <br/> (espace requis)
- <hr /> et non <hr/> (idem)
- <script type="text/javascript" src="foo.js"></script> et non <script type="text/javascript" src="foo.js" />



GeorgesM a écrit :
<br /> <hr /> uniquement par soucis de compatibilité avec des navigateurs ne comprenant que html.
Cette coquêterie du w3c n'a pas une longue vie devant elle.


Qualifier de coqueterie une règle d'interopérabilité totalement anodine, clairement exprimée par les spécifications XHTML et XML, qui ne pose aucune difficulté, qui ne soulève pas la moindre question de validité ou de conformité... Quel est l'intérêt de s'acharner au choix de la syntaxe problématique ? D'inventer une question là où il n'y en a pas ? Purisme de codage mal placé ?

D'autre part, parier sur la pérennité de l'une ou l'autre syntaxe est totalement aventureux.

En tous cas, le seul résultat probant de ces remarques recommandant <br> au lieu de <br /> est de créer de la confusion là où il n'y en a pas. Au détriment de ceux qui découvrent la syntaxe XHTML1.0, à qui tu rends un très mauvais service. Et en faisant perdre du temps à ceux qui doivent rectifier à chaque fois.
Modifié par Laurent Denis (10 Sep 2005 - 08:22)
Bonjour.

Je te remercie, Laurent pour cet excellent post:

C'est un bug d'IE Windows portant sur les conteneurs en position relative dotés de layout 
(#page est doté de layout par la propriété width)....
....
Solutions :
- effectivement, supprimer la position relative si elle était inutile, 
comme c'est apparemment le cas ici
- ou bien doter les éléments enfants concernés de layout avec les moyens habituels 
(hauteur fictive ou zoom:1 dans une CSS en commentaire conditionnels, etc.) 

très éclairant et constructif. On aime bien comprendre.

Concernant le post suivant, j'ai tout de même quelques remarques.
J'ose espérer que l'excellent niveau du forum d'Alsacréations est le résultat d'une approche critique et
raisonnée de la chose html.
... Ainsi que d'une certaine rigueur intellectuelle.

Quand une personne vous dit:
a écrit :
<br /> <hr /> uniquement par soucis de compatibilité avec des navigateurs ne comprenant que html.
Cette coquêterie du w3c n'a pas une longue vie devant elle.


et que tu répond :

En tous cas, le seul résultat probant de ces remarques recommandant <br> au lieu de <br /> 
est de créer de la confusion là où il n'y en a pas. 
Au détriment de ceux qui découvrent la syntaxe XHTML1.0, 
à qui tu rends un très mauvais service. Et en faisant perdre du temps 
à ceux qui doivent rectifier à chaque fois. 


... ma première réaction est de me culpabiliser.
Donc je m'excuse auprès de ceux à qui je fais perdre du temps.

... ma deuxième réaction est de me remettre en question et de chercher où je fais l'erreur.

Que de confusion, que de confusion, c'est excessif.
Si l'évolution naturelle va vers xhtml 1 pour des raisons de qualité, au sens qualiticien du terme,
le passage transitional et ses recommandations sont là par soucis de compatibilité. Pas pour altérer notre bon sens.
J'ai donc refait le test validant suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>test validation</title>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   </head>
   <body>
       
<h1>
test<br />
Retest <br/>    <!-- regarder içi -->
</h1>
<div><a href="http://validator.w3.org/check?uri=referer">
Alors ?
</a>
</div>
			
</body>
</html>


Pour obtenir logiquement:
This Page Is Valid XHTML 1.1!



C'est valide parce que c'est XML, et que xhtml est du XML, et qu'en
XML, on peut l'écrire comme çà.
Ce genre d'aventure, je la connais depuis 1988, et mon premier PC,
et a encouragé une vision pragmatique de la chose binaire. ça marche
quand c'est bien écrit.

Sinon pour conclure:

Promis, j'écrirais <br />

Mais j'ai plus tellement envie d'écrire <br />

Merci encore à tous, et bon week-end.




Modifié par GeorgesM (10 Sep 2005 - 09:57)
Oui, que de confusions.

Sur l'approche qualitative, qui ne justement pas s'arrêter à un constat de validité du code ou à un modèle supposé (et futur) de "bon code", mais qui va privilégier, entre deux codes également valides, celui qui apporte un gain d'interopérabilité.

Sur XHTML : nous ne parlons pas ici d'XHTML1.1 (indépendamment du fait que cet espace est simplement optionnel en XML), mais d'XHTML1.0, traité en tant que HTML, ce qui est actuellement l'essentiel de la production de code concernée par les conseils donnés dans ce forum. Ce sont donc les règles de compatibilité HTML qu'il faut mettre en avant. Pas l'évolution potentielle vers XHTML1.1 ou au-delà, de codes qui n'en ont pas le besoin.

Je précise qu'il ne s'agit pas de tomber dans les simplissmes du type XHTML1.1, c'est inutile. Il s'agit de choisir un format de contenu dans un cadre donné. Dans d'autres cadres, XHTML1.1, et surtout l'extensibilité XHTMLrépondent effectivement à des besoins.

Enfin, oui, perte de temps. Mais s'il m'arrive de manifester parfois un certain agacement dans ce cas, c'est aussi en prenant le temps d'expliquer les choses. Ici, ou depuis longtemps déjà dans http://blog-and-blues.org/weblog/2005/01/09/371-fermeture-elements-vides-xhtml
Modifié par Laurent Denis (10 Sep 2005 - 10:26)