[Résolu] Bug d'affichage avec float suivant IE ou Firefox

Pour commencer, meilleurs voeux pour cette année 2008.... qui commence pour moi avec la découverte de ce bug... jetez un oeil à l'affichage de cette page
http://kelkel-philippe.club.fr/3E2K08/bug.php?welcome

d'une part sous Firefox

et puis sour IE.

La page de définition des style est ici : http://kelkel-philippe.club.fr/3E2K08/css/base.css .

Pour moi le bon affichage est celui de firefox ... Quelqu'un aurrai-t il une solution à ce problème qui viens du "float:left;" pour le style sidebar... ?

Merci d'avance pour ceux qui se pencherons sur mon soucis !! et Bonne année !
Modifié par Yohann73 (08 Jan 2008 - 18:00)

Bonsoir,

ne me demande pas pourquoi, mais j'ai tenté cela:

#texte { background-image: url(../images/fond-1.jpg);
width: 75%;
margin-left:21%;
}

#menu { text-align: left;
float: left;
width: 20%;
}

et ça marche ...

J'ai essayer de faire de même j'ai toujours la même différence d'affichage sous ie et sous firefox, pour ceux qui ont la flemme de lancer les deux navigateur j'ai fait deux captures d'écran pour que vous puissiez mieux comprendre mon souci.




Sous internet explorer le cadre id="sidebar" est en float:left mais se situe au dessus du cadre id="container" ce que je ne comprend pas.

Modifié par Yohann73 (04 Jan 2008 - 23:42)

Salut,

essaie si tu as le même pb avec ce lien.
j'avais le même problème que toi, puis en adoptant ce que je t'ai noté au dessus, cela convient.

Lien

Modifié par Boubou57 (05 Jan 2008 - 13:20)

Salut,
essaie de bassier la largeur de ton header.

j'ai vu que les medure width etait en em je ne pense pas que sa soit une bonne idée. si tu veux quelquechose d'extensible faut utiliser des %.
D'autre personne connaisant mieux que moi le domaine des mesures t'eclaireront un peu plus.
Modifié par hakkou (06 Jan 2008 - 21:14)

HEllo ... j'ai diminuer la largeur du header, changer tous mes em en % ou en px essayer la modif proposée par boubou, rien n'y fait le bug d'affichage sous ie est toujours présent ... . N'y as t'il pas une gestion particulière des float sous ie ?

Bonjour,

Sans vouloir manquer de respect aux membres éminents de ce forum, tout ce qui vient d'être dit dans ce sujet ne sert pas à grand chose. Avant de tenter d'appliquer des correctifs, il faudrait que la base soit saine, et ça n'est pas le cas, pour une raison: la page n'a pas de Doctype.

On répète après moi:
- je mettrai toujours un Doctype à mes pages;
- même pour mes pages de test, je mettrai un Doctype;
- mon Doctype sera correct et complet, et pas sous une forme tronquée sans URL de la DTD;
- je vérifierai la validité de mon code HTML avant de demander de l'aide pour un problème de rendu;
- je rejèterai le mode Quirks tentateur;
- le salut de mon âme viendra du mode Standard.

Et vous me ferez trois ave et un pater.

Plus concrètement, le validateur HTML du W3C m'annonce 24 erreurs de validation pour cette page. La toute première, et la plus capitale, est l'absence de Doctype.

Pour rappel, les navigateurs (et c'est plus particulièrement flagrant avec Internet Explorer) ont deux modes de rendu:
- le mode «Quirks», à l'ancienne, où chaque navigateur tente de restituer la page «à l'ancienne» afin de rester compatible avec les vieilles pages web;
- le mode «Standard», où chaque navigateur tente de coller autant qu'il en est capable aux standards établis.
Le mécanisme utilisé pour savoir quel mode adopter dépend de la présence d'un Doctype (qui n'existait pas dans les premières versions de HTML).

On travaillera toujours, toujours, toujours avec un Doctype valide.
Ou alors on est un très bon qui sait ce qu'il fait et qui sait très exactement quelles sont les contraintes techniques particulières au projet qu'il traite qui l'obligent à utiliser le mode Quirks.

Voici une page qui permet de générer des squelettes HTML valides avec Doctype qui va bien:
http://css.alsacreations.com/outils/squelettor/index.php

Pour commencer merci pour cette réponse claire nette et précise , je ne suis pas comme qui dirais un webmaster expert mais je compte bien m'améliorer... bref pour commencer la seule vérif que j'avais faite en effet été un W3C css validation service avec laquelle je n'avais pas trouver d'erreur dans mon fichier css. De quelle façon à tu vérifier le code HTML Florent ?

Pour ce qui est du Doctype je vais essayer de comprendre un peu mieu comment cela fonctionne et voir si ça règle mes problèmes ...

Si tu as d'autres conseil je suis preneur ... !

Merci

Petite question subsidiaire, est ce que d'ajouter le fameux doctype est censé régler mon problème d'affichage sous ie ?? car avec celui que je viens d'ajouter le problème est toujours présent ...

Concernant la validation HTML je m'y met dès que possible ( http://validator.w3.org )et je vous tiens au courant une fois toutes les erreur réglées si mon problème persiste .
Modifié par Yohann73 (07 Jan 2008 - 11:49)

Yohann73 a écrit :
Petite question subsidiaire, est ce que d'ajouter le fameux doctype est censé régler mon problème d'affichage sous ie ?

Pas nécessairement. Et c'est valable aussi pour la validation HTML/CSS en général. Pour résumer:

1. Travailler en mode Quirks: chaque navigateur fait ça à sa sauce, et on s'arrache les cheveux.

2. Travailler sur une page avec des erreurs de syntaxe HTML: les navigateurs tentent de «récupérer» les erreurs et d'afficher correctement le document malgré tout, et souvent ils y arrivent très bien (ils doivent lire tellement de pages mal écrites qu'une bonne partie du code des navigateurs est dédié à la gestion des erreurs de syntaxe...). Mais parfois tel ou tel navigateur n'y arrive pas bien, et un problème apparait.

3. Si on travaille en mode standard et qu'on n'a pas d'erreur de validation, il reste trois sources principales de problèmes:
- la mise en page est mal conçue (par exemple on n'a pas prévu l'extensibilité en hauteur pour un bloc ayant un contenu texte);
- la mise en page utilise des propriétés non supportées par certains navigateurs;
- la mise en page rencontre un bug d'un navigateur donné, ou un comportement non standard de ce navigateur (le champion en la matière est Internet Explorer, surtout dans sa version 6... la 7 améliore sensiblement les choses, même si ça pourrait être mieux).

Donc avec un Doctype correct et en validant son code on n'éradique pas tous les problèmes, mais on élimine deux sources de problèmes. Deux sources sur cinq éliminées à peu de frais (un peu de méthode et basta), c'est plutôt pas mal. Et il est préférable d'éliminer ces deux sources là d'abord, comme ça on peut se concentrer sur le reste lorsqu'on rencontre un problème.

En passant, là tout de suite tu as deux doctypes l'un en dessous de l'autre. Ça fait un de trop.

Et au cas où, je précise qu'à cause d'un bug d'IE il n'est pas possible de placer des caractères avant le doctype, y compris un commentaire HTML (ou un prologue XML dans le cas d'IE6). Car sinon... mode Quirks.

Merci , pour les deux doctypes, ça viens du fait que j'utilise une page php incluant elle même 2 pages Html j'avais mis un doctypes dans chaque. je vasi régler ça et me pencher sur la corrections du code html .

Merci encore pour tes conseils !

Après un peu de concentration et quelques corrections j'arrive à 21 erreurs dans le cs3 validator, les cinq premières sont bien de moi mais je n'ai aucune idée de comment les corriger ... les 16 autres sont dans le code ajouté sur mes pages par mon hébergeur (CI) donc la je ne peu rien faire ... .

http://kelkel-philippe.club.fr/3E2K08/bug.php

Ceci étant dis je suis toujours à la recherche de comment obtenir le même affichage sous IE que sous firefox avec le Float:"left" qui n'as pas l'air de fonctionner donc sous IE .

Tu fais bien de valider, vu que tu utilises des éléments HTML qui n'existent pas! Notamment les éléments fictifs p1 et p2.

Yohann73 a écrit :
les 16 autres sont dans le code ajouté sur mes pages par mon hébergeur (CI) donc la je ne peu rien faire...

Changer d'hébergeur.

Yohann73 a écrit :
Ceci étant dis je suis toujours à la recherche de comment obtenir le même affichage sous IE que sous firefox avec le Float:"left" qui n'as pas l'air de fonctionner donc sous IE

Rapidement:
- le float: left fonctionne;
- div#header a une largeur de 95% et passe donc en dessous du flottant qui le recouvre partiellement (à constater dans Firefox avec l'extension Firebug par exemple);
- div#header a au moins une dimension spécifiée (width ou height), en conséquence de quoi il est doté du layout dans Internet Explorer (5-7);
- les éléments qui ont le layout ne peuvent pas être survolés par les flottants.

Bref, dans IE div#header est «imperméable» aux flottants à cause du HasLayout (voir ce concept dans la FAQ du forum), et comme il a une largeur de 95% il ne tient plus à droite du flottant, et donc passe à la ligne.

Pour ma part, pour corriger ce problème je reverrais complètement la structure. Je ne vois pas trop pourquoi le logo est dans le bloc flottant à gauche et pas dans le header. On devrait avoir un header, puis le bloc de gauche (formulaire uniquement), puis le bloc de droite. Pour faire remonter le bloc de droite visuellement et le faire mordre sur le header, on pourra utiliser le positionnement relatif par exemple.

Bonne continuation.

Et bien j'ai encore du boulot lol ... que de conseils à appliquer ...

a écrit :
tu utilises des éléments HTML qui n'existent pas! Notamment les éléments fictifs p1 et p2.

Pour ce point, mes éléments <p1> et <p2> sont définis dans le fichier CSS base.css dont j'ai mis le lien plus haut, ils sont donc bien reconnu sous firefox mais pas sous IE ... j'imagine que tu doit savoir quoi faire dans ces cas la ??

Sauf qu'un fichier CSS ne sert pas à inventer des balises HTML...

a écrit :

j'imagine que tu doit savoir quoi faire dans ces cas la ??

Se cantonner aux balises existantes.
Modifié par jb_gfx (07 Jan 2008 - 23:11)

En ce qui concerne mon problème de Float, c'est régler il été bien du au

a écrit :
HasLayout

je vous remercie tous pour votre précieuse aide et je pense que ceci n'est que le début d'une longue série de post que je vais faire ... il faut bien s'instruire un peu pour bien faire !

Merci encore et à bientot pour de nouvelles aventures !