gros problème de décalage/alignement avec IE [résolu, nouveau prob...]

gros problème de décalage/alignement avec IE [résolu, nouveau prob...] - HTML/CSS - Programmation

Marsh Posté le 02-12-2006 à 05:02:19    

Bonjour
 
voila, encore un problème avec IE...
 
Bon j'ai un site web que j'ai créer il y a pas si longtemps, et j'y suis allé en xhtml strict et css. mon but était de ne pas utiliser de javascript pour les menus (pour les moteurs de recherche). j'y suis arrivé (ça a pas été facile d'obtenir un bon résultat qui fonctionne sous IE), mais j'ai un autre gros problème que je ne sais résoidre: sous IE, le texte est complètement mal positionné. il apparait en dessous du menu, alors qu'il devrait "couler" autour. voyez plutôt: http://jul059.atspace.com/Saveurs_saisons/index_2.htm.
 
En analysant les divs avec IETab (sous firefox), j'ai remarqué que la div du menu est très grande, et je me dis peut-être que IE ne peut tout simplement pas faire "couler" le texte autout, et n'a d'autre choix que de le positionner en dessous (puisque la div menu est trop large). Mais si tel est le cas, je ne sais pas comment résoudre le problème. Lavascript de mise en page? commentaires conditionnels? aidez-moi svp....
 
EDIT: bon voila, le problème décrit précedemment a été résolu, mais in en a créer un autre:
 
« les sous-menus (toujours sous IE) deviennent difficilement accessibles. En effet, on dirtait que les blocks de couleur représentant les liens ne sont pas tous représentés comme des liens, et on a du mal à sélectionner certains éléments »
 
donc voila. si vous avez une idée...
 
EDIT2: c'est étrange, le problème semble en effet lié... j'ai mis le site en ligne, et ma page "Nous contacter" n'a pas ce problème.... je suis vraiment déboussolé... :pt1cable:  
 
voyez plutôt:
 
http://www.auxsaveursdelasaison.co [...] ccueil.php


Message édité par Black_Knight le 14-12-2006 à 01:31:17
Reply

Marsh Posté le 02-12-2006 à 05:02:19   

Reply

Marsh Posté le 02-12-2006 à 10:08:03    

Dans ta CSS:

 

dans #content {} tu supprimes le width:7xxpx que tu as mis, tu ne mets pas de largeur, c'est inutiles de spécifier les largeurs sur des éléments de type block puisqu'on sait pertinemment qu'un type block prend toute la largeur de son conteneur.

 

Bien sur tu peux spécifier des largeurs quand tu en as besoin. Mais là, tu n'en avais pas besoin

Message cité 1 fois
Message édité par gatsu35 le 02-12-2006 à 10:13:12
Reply

Marsh Posté le 02-12-2006 à 12:13:39    

Déjà pourquoi imbriquer des <p> dans des <div> ? <p> est déjà une balise bloc.
Ensuite, ton menu doit être dans le même bloc que le texte, et tu dois mettre ton menu en flottant à gauche, le texte ensuite.

Reply

Marsh Posté le 02-12-2006 à 12:18:09    

hauhazice a écrit :

Déjà pourquoi imbriquer des <p> dans des <div> ? <p> est déjà une balise bloc.
Ensuite, ton menu doit être dans le même bloc que le texte, et tu dois mettre ton menu en flottant à gauche, le texte ensuite.


Avant de faire une intervention tu es invité à regarder attentivement le code du monsieur [:moule_bite]

 

P est peut etre une balise bloc, mais son code HTML est sémantiquement propre, il a un conteneur parent (DIV) dans lequel il peut mettre ce qu'il veut.

 

Il ne peut utiliser de P car dans un P on ne peut mettre que des éléments inline [:moule_bite]

Message cité 1 fois
Message édité par gatsu35 le 02-12-2006 à 12:18:33
Reply

Marsh Posté le 02-12-2006 à 12:27:36    

gatsu35 a écrit :

Avant de faire une intervention tu es invité à regarder attentivement le code du monsieur [:moule_bite]
 
P est peut etre une balise bloc, mais son code HTML est sémantiquement propre, il a un conteneur parent (DIV) dans lequel il peut mettre ce qu'il veut.  
 
Il ne peut utiliser de P car dans un P on ne peut mettre que des éléments inline [:moule_bite]


Avant de faire une intervention, tu es invité à lire complétement ma réponse. Faire un menu avec un tableau, j'appelle pas ça du code sémantiquement propre. Ce n'est que mon point de vue. Et il est évident qu'en plantant un <p> plus un autre <div>, ça marche pas sous IE car tout le monde sait que cet imbécile interprète mal les blocs qui sortent du flux.

Reply

Marsh Posté le 02-12-2006 à 13:13:32    

hauhazice a écrit :

Avant de faire une intervention, tu es invité à lire complétement ma réponse. Faire un menu avec un tableau, j'appelle pas ça du code sémantiquement propre. Ce n'est que mon point de vue.


 
 
Le monsieur a essayé d'utiliser la technique utilisée sur www.cssplay.co.uk pour son menu.
 
Pourquoi : le :hover ne fonctionne que sur le A sous IE
donc pour créer un menu apparation d'élément sous IE la seule méthode serait de mettre des A dans le A, mais malheureusment ce n'est pas possible sous les autres navigateurs, ni sous IE, la seule méthode est de mettre le contenu dans un tableau pour IE
 
tu trouveras cette méthode à cette page : http://www.cssplay.co.uk/menus/basic_dd.html (regarde le code source de la page).
 

hauhazice a écrit :


Et il est évident qu'en plantant un <p> plus un autre <div>, ça marche pas sous IE car tout le monde sait que cet imbécile interprète mal les blocs qui sortent du flux.


Je vois pas de quoi tu parles [:petrus75]
 
faire  

Code :
  1. <p><div>pouet</div></p>

 
n'est pas du tout conforme, c'est de ca que tu veux parler ?
 
IE interprète très bien les blocs qui sortent du flux, faut juste savoir s'en servir [:petrus75]


Message édité par gatsu35 le 02-12-2006 à 13:13:46
Reply

Marsh Posté le 02-12-2006 à 13:21:29    

Regardes ce code sous IE puis sous Moz :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>Document sans nom</title>
  6. <style type="text/css">
  7. <!--
  8. #flottant {
  9. height: 20px;
  10. width: 100px;
  11. border: 1px dashed #000000;
  12. float: left;
  13. }
  14. #non_flottant {
  15. height: 100px;
  16. width: 200px;
  17. border: 1px dashed #FF0000;
  18. }
  19. -->
  20. </style>
  21. </head>
  22. <body>
  23. <div id="flottant">&nbsp;</div>
  24. <div id="non_flottant">&nbsp;</div>
  25. </body>
  26. </html>


IE ne prend pas en compte le fait que le premier bloc sorte du flux, Moz oui. C'est exactement son problème.
A priori tu ne sais pas t'en servir  :pt1cable:


Message édité par hauhazice le 02-12-2006 à 13:23:27
Reply

Marsh Posté le 02-12-2006 à 13:24:43    

[:hahaguy] toi on voit que tu n'as jamais entendu parler du contexte de formatage [:hahaguy]
et du concept du layout (haslayout) sous IE [:hahaguy]
Dans une heure je te fais une démo, merci

Message cité 1 fois
Message édité par gatsu35 le 02-12-2006 à 13:38:06
Reply

Marsh Posté le 02-12-2006 à 13:28:58    

gatsu35 a écrit :

[:hahaguy] toi on voit que tu n'a jamais entendu parler du contexte de formatage [:hahaguy]
et du concept du layout (haslayout) sous IE [:hahaguy]
Dans une heure je te fais une démo, merci


lol

Reply

Marsh Posté le 02-12-2006 à 13:42:45    


[:petrus dei]
le fait de spécifier une hauteur sur un élément lui confère un layout sous IE
et conférer un layout sur un élément de type block, permet aussi de lui appliquer le contexte de formatage.
 
le contexte de formatage pour les autres navigateurs peux s'appliquer si on leur met l'une des propriétés suivantes.
 
overflow:hidden;  
display:table;
 
ton lol me dit que tu t'en branles éperdument, donc je ne vais pas faire l'effort de te faire une démo mais te rediriger vers deux articles qui traitent du problème
 
contexte de formatage :  
http://www.blog-and-blues.org/arti [...] _formatage
concept du haslayout sous IE :  
http://www.satzansatz.de/cssd/onhavinglayout.html (document original anglais)
http://www.test.blog-and-blues.org [...] _temp.html (fr trad)
http://www.test.blog-and-blues.org/haslayout/ (une petite serie de tests sur le sujet)
 
et sinon pour IE une liste des bugs les plus courants :  
http://www.positioniseverything.net/explorer.html
 

Reply

Marsh Posté le 02-12-2006 à 13:42:45   

Reply

Marsh Posté le 02-12-2006 à 13:47:56    

Mon lol voulait simplement dire que ce n'était pas la peine d'étaler ta science pour te donner de l'importance. Je t'ai juste montré que IE était faché avec les flux. Et comme on dit, la culture, c'est comme la confiture, moins on en a, plus on l'étale.

Reply

Marsh Posté le 02-12-2006 à 14:00:39    

hauhazice a écrit :

Mon lol voulait simplement dire que ce n'était pas la peine d'étaler ta science pour te donner de l'importance.


Je ne l'étale pas, mais l'exemple que tu montres en disant que IE est faché avec les flux, n'a pas de sens. Tu montres quelque chose sans en connaitre le sens.
 

hauhazice a écrit :


 Je t'ai juste montré que IE était faché avec les flux. Et comme on dit, la culture, c'est comme la confiture, moins on en a, plus on l'étale.


Moi je t'ai montré que IE n'est pas faché avec les flux mais qu'il a un concept un peu stupide qu'il faut absolument connaitre.
Et découle de ce concept un autre concept (context de formatage) qui s'avère bien utile pour des mises en page en positionnement flottant

Reply

Marsh Posté le 02-12-2006 à 14:48:33    

gatsu35 a écrit :

Je ne l'étale pas, mais l'exemple que tu montres en disant que IE est faché avec les flux, n'a pas de sens. Tu montres quelque chose sans en connaitre le sens.


 :heink:  
Moi je pense que ce que tu dis n'a pas de sens

Reply

Marsh Posté le 02-12-2006 à 15:02:37    

hauhazice a écrit :

:heink:  
Moi je pense que ce que tu dis n'a pas de sens


Ah vi [:petrus75]
Pour résumer :  Tu dis que IE est faché avec les flux, en fait nan ce n'est pas vrai il n'est pas faché avec les flux. Ce que tu dis est faux. C'est juste un concept pourri du haslayout.
 
Bon va lire :o

Reply

Marsh Posté le 02-12-2006 à 16:42:19    

gatsu35 a écrit :

Dans ta CSS:
 
dans #content {} tu supprimes le width:7xxpx que tu as mis, tu ne mets pas de largeur, c'est inutiles de spécifier les largeurs sur des éléments de type block puisqu'on sait pertinemment qu'un type block prend toute la largeur de son conteneur.
 
Bien sur tu peux spécifier des largeurs quand tu en as besoin. Mais là, tu n'en avais pas besoin


 
ahhh!! merci. L'alignement se corrige bel et bien, mais un autre problème apparament non relié apparait: les sous-menus (toujours sous IE) deviennent difficilement accessibles. En effet, on dirtait que les blocks de couleur représentant les liens ne sont pas tous représentés comme des liens, et on a du mal à sélectionner certains éléments (j'ai mis à jour le site). Si vous avez une idée, je suis preneur.....
 
Aussi, je n'ai pas trop compris votre argumentation, mais j'imagine que ce n'est pas trop grave...
 
Et vous en pensez quoi de mon site? au niveau du code et aussi du design?

Reply

Marsh Posté le 02-12-2006 à 20:35:39    

gatsu35 a écrit :

Ah vi [:petrus75]
Pour résumer :  Tu dis que IE est faché avec les flux, en fait nan ce n'est pas vrai il n'est pas faché avec les flux. Ce que tu dis est faux. C'est juste un concept pourri du haslayout.
 
Bon va lire :o


Ce que j'ai dis est juste, je te l'ai même montré avec un exemple. C'est vrai que si tu ajoutes ça, puis ça et encore ça pour qu'IE se comporte comme le prévoit les normes, on peut aller loin.

Reply

Marsh Posté le 13-12-2006 à 05:22:30    

Black_Knight a écrit :

ahhh!! merci. L'alignement se corrige bel et bien, mais un autre problème apparament non relié apparait: les sous-menus (toujours sous IE) deviennent difficilement accessibles. En effet, on dirtait que les blocks de couleur représentant les liens ne sont pas tous représentés comme des liens, et on a du mal à sélectionner certains éléments (j'ai mis à jour le site). Si vous avez une idée, je suis preneur.....
 
Aussi, je n'ai pas trop compris votre argumentation, mais j'imagine que ce n'est pas trop grave...
 
Et vous en pensez quoi de mon site? au niveau du code et aussi du design?


 
donc si il y en a parmis vous qui aurait des idées concernant mon « nouveau » problème, je suis évidemment preneur...
 
EDIT: j'ai mis de nouvelles infos dans le premier post.


Message édité par Black_Knight le 14-12-2006 à 01:32:11
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed