18041 sujets

Questions générales et questions de débutants

Tuto design 2 colonnes, et notre "ami" IE....

Bonsoir,
bon, là, je craque un peu (beaucoup en fait)...
Smiley fache
Voilà, j'ai bien suivi le (TRES) bon tuto nommé ci dessus...et malgrés toute
ma bonne volonté(je crois... Smiley confused ) j'obtiens pis que ce que j'avais rencontré jusqu'à présent avec cet incroyable produit qu'est IE!
Mieux! IE6 interprete d'une manière...IE7 d'une autre..
Bon, ok IE7 semble mieux "interpreter" le png, mais envoit mon footer au diable vauvert (tout à droite..), quand à IE6, il allonge ce même footer à la dimension du <div global>.... Smiley biggol
Bon, c'est vrai qu'en plus il s'agit d'une page en php, avec form...et c'est là que je ne sais plus qui peut être responsable...
Sous IE6...impossible de saisir le moindre renseignement sur le form. passé le 1er renseignement...????
Voilà un lien, si vous avez IE6, vous comprendrez tout de suite mieux, si vous avez IE7...bhé pareil.

http://www.he-prod.info/wolff/index.php

Sinon, sur PC ou Mac, avec Safari, FF et Opera, nikel!!!!!!!!! Smiley biggrin
SVP, quelqu'un... Smiley bawling
Si vous avez une idée, un conseil, une piste...n'importe quoi, je suis preneur; si vous pensez que c'est une incompatibilité php/IE...bhé j'irai voir ailleurs.
Merci d'avance pour vos post, et encore merci au dev du tuto...
Modifié par Florent V. (02 Feb 2007 - 22:07)
Bonjour.

Je commencerais par remplacer les commentaires HTML par des commentaires CSS dans les feuilles de style : 
<!--doc css site Moto-Casse Wolff, Bayonne-->
[b]devient[/b]
/* doc css site Moto-Casse Wolff, Bayonne */
et
<!--css dediee a IE6 et anterieure-->
[b]devient[/b]
/* css dediee a IE6 et anterieure */


En passant, la feuille de style dédiée à IE ne doit contenir que les propriétés qui ont été modifiées ! Inutile de remettre la feuille complète Smiley cligne

EDIT Le commentaire HTML présent dans la feuille de style donne en fait une règle CSS assez extraordinaire : 
doc css site Moto-Casse Wolff, Bayonne-- > html, body
Quelqu'un veut la "traduire" en français ? Smiley murf
Modifié par Thomas D. (02 Feb 2007 - 22:19)
Déjà, le bloc div#contenu est trop large (il me semble), et sa marge à gauche de 10px risque de déclencher le Doubled Margin Bug d'IE6. Donc on corrige tout ça :
#contenu{
	float: left;
	width: 470px;
	min-height: 380px;
	padding-left: 10px;
	background: blue;
}

(la couleur de fond, c'est pour se rendre compte de ce qu'on fait quand on dimensionne ou positionne un élément... à virer à la fin, ou plutôt remplacer le bleu par du blanc).

Après, je corrigerais div#centrale de la manière suivante :
#centrale {
	padding-bottom: 65px;
	overflow: auto;
	width: 750px;
}

Explications :
1. On prend un padding un peu supérieur (de 10px) à la taille du pied de page, histoire de respirer un peu.
2. On attribue une largeur de 750px (on aurait aussi pu choisir 100%) au bloc div#centrale, largeur qui n'est pas nécessaire mais qui sert à attribuer le layout au bloc afin qu'il vienne contenir les flottants dans IE6 (dans les navigateurs plus récents qui le comprennent, le overflow: auto aura sensiblement le même effet).
Si on ne veut pas ajouter une instruction de largeur inutile (mais à priori pas gênante) à ce blog, on pourra se contenter de l'appliquer pour IE6 et inférieurs uniquement, via un commentaire conditionnel (plus d'infos dans la FAQ).

Enfin, le pied de page : il serait utile, à titre de précaution, de le positionner horizontalement également, pour éviter des décalages avec certains navigateurs ou dans certaines conditions. Il suffira de lui rajouter un left: 0 ou un left: 10px (à voir...) pour éviter bien des problèmes.

Et tant qu'à faire, remplacer ceci : 
html{
	background: #ddd url(imag/fd-body.jpg);
}
par ceci : 
background {
	background: #ddd url(imag/fd-body.jpg);
}

Si mon souvenir est bon, certains navigateurs n'apprécient pas beaucoup les images de fond appliquées à l'élément html.
Merci Thomas...en plus, je crois que tu es l'auteur du tuto...doublement merci donc..
MAIS...(je vais poser certainement une bête question Smiley confused )...si IE(6 en l'occurence) suit la css qui lui dédiée...comment va-t-il chercher les infos manquantes sur l'autre css...???je ne saisi pas très bien...
Pour le reste, merci je corrige...et l'"innacessibilité" au "form" en php??? PB de m'sieur IE, ou incompatibilité IE/CSS/Php , d'aprés toi?
Ah oui, et je plussoie Thomas pour toutes ces corrections.

Et IE ne va pas chercher les infos manquantes dans l'autres CSS. Il appliquera les deux feuilles de style, dans l'ordre où elles sont appelées. Si on appelle d'abord la feuille de style générale, il l'appliquera d'abord, puis appliquera la feuille de style appelée via les commentaires conditionnels.

Bref, c'est cumulatif. D'où le problème si on répète les mêmes choses : on risque de se planter, de modifier à un endroit et pas dans l'autre, etc.

La feuille de style spécifique pour IE6 et inférieurs ne devrait contenir que des correctifs (maximum une dizaine, souvent beaucoup moins).
Merci Florent.V
Heu..excusez moi, mais avec quelle version d'IE avez vous vu le lien??? Car comme je le disais dans mon 1er post, le resultat n'est pas le même si IE6 ou 7...juste pour info, car je ne dispose pas de la version 7, que j'ai pu observer à l'oeuvre...chez mon boss........ Smiley decu ..ça craint, non? Smiley cligne
D'avance merci pour tout
boro64 a écrit :
Pour le reste, merci je corrige...et l'"innacessibilité" au "form" en php??? PB de m'sieur IE, ou incompatibilité IE/CSS/Php , d'aprés toi?

IE et les autres navigateurs se fichent du PHP comme de leur première balise <html>, vu qu'ils n'en verront jamais la couleur. Affiche le code source reçu par le navigateur, tu verras qu'il n'y reste pas une seule trace de PHP (ou alors il y a un grave problème...).

Si le formulaire est inactif, ça peut être qu'il est recouvert par un élément à fond transparent, par exemple (chevauchement de blocs), ou d'autres choses encore. Mais comme tu as pas mal de choses à corriger, commence par ça : il est très très très probable que ton problème avec le formulaire soit lié d'une manière ou d'une autre à ces erreurs.
boro64 a écrit :
Heu..excusez moi, mais avec quelle version d'IE avez vous vu le lien???

Avec aucune pour l'instant. J'ai travaillé avec Firefox et les extensions Webdevelopper et Firebug pour comprendre la structure HTML et les styles CSS utilisés, détecter les sources d'erreur potentielles, etc.

Edit : je viens de regarder avec IE7, et il me semble que j'avais vu juste pour le pied de page qu'il faut positionner également en horizontal avec un left: 0 (ou left: 10px).

Par contre, le rendu sous IE7 est très sympathique, j'aime beaucoup. Smiley biggol
Modifié par Florent V. (02 Feb 2007 - 22:36)
Merci..Ok je corrige puis je reviendrai vous raconter ça...Mille mercis encore à vous
A pluche
Tchô
P.S: je ne mets pas [Résolu] dans la mesure ou j'attends de tester les correctifs...OK??
boro64 a écrit :
P.S: je ne mets pas [Résolu] dans la mesure ou j'attends de tester les correctifs...OK??

No problem.

Pour tester avec IE7, il existe des versions dites « standalone » de ce navigateur. Par exemple celle-ci :
http://tredosoft.com/IE7_standalone
Par contre, je suppose que ça demande d'avoir Windows XP SP2...

Dernière chose : il faut absolument que tu assassine joyeusement (comprendre : virer sans autre forme de procès) le prologue XML qui précède ton doctype. Pour info, le suspect à liquider ressemble à ça :
<?xml version="1.0" encoding="iso-8859-1"?>

Non seulement il n'est pas nécessaire ici (ta page XHTML est servie comme du simple HTML, pas en tant que langage XML), mais en plus il fait buguer Internet Explorer 6 (pour être précis : il le fait passer en mode Quirks, mode dans lequel IE interprète le positionnement des éléments et tout un tas de choses à sa guise... et c'est pas une bonne chose).
Florent V. a écrit :

Dernière chose : il faut absolument que tu assassine joyeusement (comprendre : virer sans autre forme de procès) le prologue XML qui précède ton doctype. Pour info, le suspect à liquider ressemble à ça :
<?xml version="1.0" encoding="iso-8859-1"?>

Non seulement il n'est pas nécessaire ici (ta page XHTML est servie comme du simple HTML, pas en tant que langage XML), mais en plus il fait buguer Internet Explorer 6 (pour être précis : il le fait passer en mode Quirks


Tiens, un truc amusant, en passant:

<!--[if !IE]> <-->
   <?xml version="1.0" encoding="iso-8859-1"?>
<!--> <![endif]-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


Smiley biggol
Florent: essaie... Smiley cligne

<edit>Mais ne surtout pas s'en servir en vrai, hein ?</>
Modifié par Laurent Denis (02 Feb 2007 - 23:21)
Bon...alors, j'ai appliqués vos conseils..et ça va BEAUCOUP BEAUCOUP mieux...sauf que IE6...fait disparaître le footer!!!!et que le texte (du moins les 2 derniers termes) dans celui ci se retrouvent...dans une partie de la page....???? Smiley biggol
Sinon, c'est effectivement plus propre; ainsi (mais ce n'est qu'un exemple) le site est ENFIN centré et sans marge "top"...par contre mon form n'est toujours pas accessible...sauf la 1ere ligne..???????? Smiley decu
Merci de vos conseils, je continus à chercher..Merci à vous Florent et Thomas...heu je viens de voir le post de Laurent...Heu je fais quoilà, du coup??? Smiley rolleyes
Tu oublies mon post. Définitivement.

C'est une chose horrible et à ne pas faire. Je la citais à Florent juste pour son côté inattendu et amusant. Smiley ravi
Merci à tous...J'avance..mais pas IE...de drôle de choses se passent mais là, je vais faire reposer mes yeux et mon neurone Smiley biggrin
Merci pour les liens, je comprends un peu mieux. Pour info, IE6 et 7 (pour l'instant! Smiley cligne ) balance mon footer à droite...Demain je commence..par contre,pour le form....pareil que plus haut: inaccessible sous iE6...IE7 définit comme pop-up mes listes deroulantes (<select>)..déroutantes certainement pour lui..
Merci pour votre patience, vos conseils, tutaux, et pistes.
Tchô
#footer {left: 10px;}


C'est moi ou je parle dans le vide ???


Pour rappel :
Florent V. a écrit :

Enfin, le pied de page : il serait utile, à titre de précaution, de le positionner horizontalement également, pour éviter des décalages avec certains navigateurs ou dans certaines conditions. Il suffira de lui rajouter un left: 0 ou un left: 10px (à voir...) pour éviter bien des problèmes.

et aussi :
Florent V. a écrit :
Edit : je viens de regarder avec IE7, et il me semble que j'avais vu juste pour le pied de page qu'il faut positionner également en horizontal avec un left: 0 (ou left: 10px).


Allo Houston ?
Modifié par Florent V. (03 Feb 2007 - 12:48)
Bonsoir,
Pardon Florent. Non tu ne parle pas dans le vide, mais j'étais absent et ne rentre que maintenant.
Héla, ni 0 ni 10px ne positionne correctement le footer. De plus, IE 6 et 7 interprete differement. IE6 positionne completement à gauche (à 0 ou 10px du bord...de l'écran) et IE7 positionne à 0 ou 10px...de la <div>"barnav" (ma colonne de droite)...!!! Smiley biggol Smiley biggol Smiley biggol
Bon, je m'y remets...peut être à plus tard...de toute façon, je repasse donner ici la solution que j'aurai trouvée...Merci encore à toutes et tous
Tchô
Sujet clos
Aller à