P'tits soucis avec IE7

[Tabouet]

Bonjour à tous,

A force de poser des questions dans tous les sens, je vais finir par passer pour un webmaster du dimanche...

Je suis un train de réaliser un petit site. J'ai testé le site sous différents OS et différents navigateurs :

Linux: Firefox 8

XP: Chrome 16, Firefox 6, Internet Explorer 8,

Seven: IE9

Tout semblait fonctionner pour le mieux dans le meilleur des mondes.

Je teste ensuite le site avec le W3C et il apparaît valide.

Je mets le site dans un sous domaine de mon site perso pour que le client puisse tester...

Et là, patatra! Le client m'envoie un mail en m'expliquant que le site apparaît tout pourri avec un mise en page digne d'un cahier de brouillon d'un CP.

J'ai donc téléchargé IE Collection afin de tester le site dans un maximum de version de IE et j'ai découvert que

sous IE7 la mise en page du dit site est un peu "farfelue".

Je dois avoué que je ne sais pas trop par où commencer pour corrigé les problèmes.

Voici le lien vers la version test, je précise que le site est loin d'être terminé. Pour l'instant je me concentre surtout

sur sa structure générale.

/>http://testimat.boitasite.com/

A bientôt,

Alexis

[Ernestine]

A force de poser des questions dans tous les sens, je vais finir par passer pour un webmaster du dimanche...

Mais non mais non voyons

Par où commencer ? Ici, c'est clairement un problème de javascript et/ou de positionnements CSS.

Déjà, tu peux tenter d'ajouter des "position:relative;" à tous les ul et tous les li : c'est une technique qui, bizarrement, résoud régulièrement beaucoup de bugs sur IE7.

Si ça ne marche pas, il faudrait procéder par ordre, en repartant de zéro, et en vérifiant, à chaque étape que ça passe bien sous IE 7:

1/ Construire le menu de base (sans les sous-menus) et vérifier que c'est bon.

2/ Construire les sous-menus, affichés normalement (pas masqués au départ : tous dépliés) et vérifier que les positionnements sont corrects sous IE7.

Si ces deux étapes sont bonnes, alors la troisième ne devrait être qu'une formalité :

3/ Ajouter le javascript du menu (qui, au fond, est un simple fadeIn / fadeOut)

[Leonick]

en fait, avec IE9 et en affichage de compatibilité, c'est vrai que le site (et surtout les menus) est en vrac

[lorem_ipsum]

Tu peux aussi émuler ie7 avec: <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />...

[Tabouet]

Bonjour,

Merci pour vos idées et conseils.

J'ai commencé les corrections, je crois que le weekend sera long...

A bientôt,

Alexis

[Dadou]

A force de poser des questions dans tous les sens, je vais finir par passer pour un webmaster du dimanche...

Mode Taquin ON : Pourquoi tu parles au futur ??

Bon sinon, tu as le problème de beaucoup d'intégrateurs : tu es atteins de divite aiguë, c'est vrai, sur aussi peu de code, cela ne se voit pas trop, mais, il y a des indices :

<div style="width:960px;text-align:center;margin-left:auto;margin-right:auto;"> <!-- header -->
<a href="index.php"><img src="images/logo-i-mat.jpg" height="164px" alt="logo"></a>
</div> <!-- fin du header -->

Quel est l'intérêt du div ici ? le style aurait pus être appliqué directement au lien, et surtout n'utilise jamais l'attribut style, externalise.

<div id="pillmenu"> 

<!-- pillmenu -->
	<ul id="menu">

        <li>
                <a href="#">Matériel<br>chantier</a>
				<ul>
					<li style="padding-left:20px;"><a href="http://testimat.boitasite.com/materiel-chantier/benne-beton.php">Benne à béton</a></li>



.........

</ul>

</div> <!-- fin du pillmenu-->	

Même punition, le div encadrant la balise ul n'a aucun intérêt tout comme tes attributs style sur tes li de second niveau.

<div class="imagegauche">
	<img src="../images/3020-podium-de-levage.jpg" width="200"/> </a>
</div>

Pareil, la classe peut être affectée directement à l'image.

Par contre, d'ou sort cette fermeture de balise a ??? cela pourrait expliquer un de tes dysfonctionnement d'affichage

Et un style convenable sur l'image t'éviterais de t'amuser à mettre un style spécifique sur le paragraphe la suivant et aussi d'oublier le div encadrant ce paragraphe

<div style="margin-left:470;padding-right:10px;padding-top:14px;">
	<p>
   		Securité et ergonomie: Ce podium garanti aux utilisateurs une sécurité maximum, 				
		en facilitantle nettoyage des bennes.				
		Matériel utilisable avec toutes les bennes qu'importe le fabricant.				
		Il est colisable pour le transport, et superpossable lors du stockage.				
		Manutention par levage ou avec un chariot élévateur. Existe en Peint ou Galva.				
	</p>

</div>

Tes tableaux, aussi n'ont pas à être encadré de div, c'est inutile, et surtout tu ne semble pas connaître la balise th, qui te permettrais de styliser correctement tes cellules de titres indépendamment des cellules de contenu.

Bon j'arrête la, si je fais toutes les pages je vais écrire un roman.

En fait, un problème de la divite aiguë te complique le code HTML, et du coup, tu as parfois du mal à te retrouver dans ta structure, simplifie au maximum ton code HTML, ce n'en sera que plus facile.

[Tabouet]

Bonjour,

Je suis donc un webmaster du dimanche

Plus sérieusement, j'admets que j'ai énormément de mal avec les DIV car j'appris à les connaitre "tout seul" car je

suis issu d'une fac qui m'a formé sur la création des sites en utilisant les frames ( ) en oubliant de nous

dire que les DIV sont beaucoup plus pratique à utiliser.

Je connais la balise <th>, c'est juste que je ne pense pas toujours à l'utiliser.

J'ai pour habitude de mettre d'abord les styles dans la page web et quand ils fonctionnent, et me donnent le résultat

que désire, je les externalise.

ajout de 12:57

Je dois avoir un gros problème avec les DIV car j'ai quelques soucis avec un de mes nouveaux sites...

A bientôt,

Alexis

Modifié 13 Décembre 2011 par Tabouet

[Kulgar]

Salutations

Si tu veux soigner ta manie des Div, je te conseille vivement de regarder la liste des balises sur le site W3School :

HTML 4

HTML 5

Cela nécessite un petit temps de recherche au départ pour trouver LA bonne balise pour chaque élément, mais tu te rends vite compte que y'a plein de balises pouvant remplacer les divs.

Il faut au maximum éviter l'utilisation des Divs (j'avoue que ce n'est pas forcément évident), car comme les "span" ce sont des balises définissant une section dans un document. Une section pouvant être ... n'importe quoi, avouons-le, un Div/Span ne peut pourra jamais être aussi bien interprété par un navigateur qu'une balise définissant un type exacte d'élément (comme la balise <button> par exemple ).

Moi aussi d'ailleurs il faudrait que je fasse quelques révisions sur mon site d'entreprise vis-à-vis des divs .