Jump to content

P'tits soucis avec IE7


Tabouet
 Share

Recommended Posts

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

Link to comment
Share on other sites

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 :whistling:

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)

Link to comment
Share on other sites

Bonjour,

Merci pour vos idées et conseils.

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

A bientôt,

Alexis

Link to comment
Share on other sites

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 ?? :whistling:

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.

Link to comment
Share on other sites

  • 2 weeks later...

Bonjour,

Je suis donc un webmaster du dimanche :wacko:

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 ( :mad2: ) 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

Edited by Tabouet
Link to comment
Share on other sites

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 ^^.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...