Problème de div superposée sous IE...

Bonjour,

Tout d'abord, je me permets de vous souhaiter une BONNE ANNEE 2007 !!!

Ensuite... étant nouveau mais ayant à de nombreuses reprises consulter les tutos du site, je vous transmets à tous mes félicitations pour ce boôo site/forum...

J'ai une page composée comme suit :
- div pour le Header
- div pour la page courante
- dic pour le Footer
Jusque là, rien d'anormal !!!

- Test avec FF 2 :
Lorsque je vais sur la page d'accueil, tout s'affiche normalement...
Lorsque je vais sur la page Biographie, tout s'affiche normalement...
:)

- Test avec IE6 sp2 :
Lorsque je vais sur la page d'accueil, tout s'affiche normalement...
Mais lorsque je me rends sur la page Biographie, le Footer se retrouve sous la page courante. Et je ne sais pas à quoi cela est dû ?


Est-ce un problème de CSS pur ? Une mauvaise utilisation d'un attribut ?? Que sais-je !

Si vous avez une idée, n'hésitez pas !!!

Voici l'url du site de tests : http://www.fightburst.fr/tests/

Merci d'avance !!!

Bonjour jordel et bienvenue sur ce forum,

À vue de nez, tu as déjà un gros problème d'utilisation abusive de flottants. À priori, pour cette maquette, on devrait pouvoir n'utiliser qu'un seul flottant, et pas une quinzaine par pages !

Merci pour ta réponse !

Mince je suis démasqué en tant que noobz au niveau CSS

1 seul flottant... faut que je teste tout cela... pourtant je n'ai fait que suivre les tutos et ça m'a paru logique de mettre des float !!!

J'vais revoir cela pour commencer !!!

Je viens d'épurer mon code... mais toujours the same shiiit

Y'a t il une bonne ame pour m'indiquer le droit chemin ???

jordel a écrit :
Y'a t il une bonne ame pour m'indiquer le droit chemin ???

Le problème c'est que j'ai du mal à m'y retrouver dans ton code. C'est conçu selon une logique qui m'est étrangère...
C'est moi où il n'y avait pas tous ces tableaux il y a quelques heures ? Ou bien ils sont là depuis le début ?

En tout cas, à vue de nez toujours (parce que si j'y plonge plus que le nez je me noie ), tu as non seulement des types de positionnement pas super opportuns (flottants -- toujours trop --, tableaux et... oh pitain, une tripotée d'éléments positionnés en relatif, y en a partout, mayday mayday !)... mais surtout tu as plein d'éléments qui ne servent à rien.

Il serait utile, plutôt que de placer des bouts de span ou div (ou cellules de tableau ou quoi que ce soit) à des fins purement décoratives, de penser à utiliser les possibilités des images de fond et de leur positionnement.

Si on regarde l'en-tête par exemple : pourquoi s'agit-il de plein de morceaux dans tous les sens, alors qu'il pourrait s'agir d'une seule image qui prendrait toute la largeur de l'en-tête ? ou bien d'une unique image de fond pour les photos, et d'une image de contenu pour le logo.

Plus généralement, il y a pas mal d'erreurs de syntaxe XHTML dans la page. Un validateur (cf. http://validator.w3.org ) te donnerais quelques indications (ou en l'occurrence une bonne centaine, vu le nombre d'erreurs). Avoir un code valide, ça aide : on évite les problèmes d'interprétation dus à une erreur de code, pour pouvoir se concentrer sur les problèmes d'interprétation dus à des différences entre les navigateurs (oh joie !).

Hello,

Merci pour ta réponse... J'étais en train de bosser sur "l'enlevage" des positions relatives Cela devrait le faire plus maintenant

Sinon pour le code de l'entête... je ne vois pas ce qui dérange vraiment !!!
Il s'agit d'un tableau avec 2 lignes et 2 colonnes :

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%" height="136">
<tr>
<td valign=top height=105 align=center><img src=logo.gif border=0 width=318></td>
<td valign=top align=center><img src=bandeau.jpg border=0 width=432></td>
</tr>
<tr>
<td colspan=2 valign=middle align=center class=texte_menu>
    <a href="" class=lien_menu>ACCUEIL</a> |
    <a href="" class=lien_menu>BIOGRAPHIE</a> |
    <a href="" class=lien_menu>DISCOGRAPHIE</a> |
    <a href="" class=lien_menu>CONCERTS</a> |
    <a href="" class=lien_menu>PHOTOS</a> |
    <a href="" class=lien_menu>ZONE MP3</a> |
    <a href="" class=lien_menu>CONTACTS</a> |
    <a href="" class=lien_menu>LIENS</a>
</td>
</tr>
</table>

Ailleurs, je ne dis pas qu'il n'y a pas des éléments en trop

Je viens de mettre à jour mes 2 pages d'exemples... mais gros bordel entre IE6 et FF2...

jordel a écrit :
Sinon pour le code de l'entête... je ne vois pas ce qui dérange vraiment !!!

Bon, vite fait, je te fais la même chose en plus light et surtout en plus accessible (et puis au passage en respectant la syntaxe XHTML, tant qu'à faire) :

<div id="entete">
	<h1><img src="logo.gif" alt="Fight Burst" /></h1>
	<ul id="menu">
		<li><a href="">Accueil</a> |</li>
		<li><a href="">Biographie</a> |</li>
		<li><a href="">Discographie</a> |</li>
		<li><a href="">Concerts</a> |</li>
		<li><a href="">Photos</a> |</li>
		<li><a href="">Zone MP3</a> |</li>
		<li><a href="">Contacts</a> |</li>
		<li><a href="">Liens</a></li>
	</ul>
</div><!-- fin de div#entete -->

Je sais pas, moi je trouve ça plus simple et plus lisible.
Au passage, le texte du menu peut être mis en majuscules via une propriété CSS (mais l'information brute, elle, reste claire, avec une écriture standard).

Quant à l'image de la cellule de droite, elle aurait plutôt sa place en image de fond de div#entete ou de div#entete h1.

Bonjour !!!

Depuis le dernier post dans ce message, j'ai travaillé un peu sur le contenu de mon fichier CSS et je l'ai allégé...

Par contre, y'a t il un moyen autre qu'en utilisant FLOAT pour aligner les 2 div : pour que les box avec les infos soient à coté du texte.

De plus, j'ai toujours une différence énorme d'affichage entre IE et FF !!! J'utilise certainement des combo d'attributs qui ne plaisent ni à l'un, ni à l'autre des navigateurs !!!

Merci d'avance !!!