28172 sujets

CSS et mise en forme, CSS3

Comportement étrange d'un paragraphe gras sous IE6

Hello,

Encore un problème étrange dont la solution doit exister quelque part. En fait, on le constate à l'accueil de mon site.

http://www.pepes.ca/

Sous IE7 et Firefox, tout est nickel. Cependant, sous IE6, la bordure à droite au niveau du contenu (résultats/babillard) est décalée de quelques pixels. C'est la seule page où on note cela et après de nombreux tests, j'ai découvert que la suppression de toutes les balises <b> et <i> corrigeait le problème. Mais justement, je ne désire pas supprimer toute la mise en forme de mon texte (ça va de soi), alors je me demandais pourquoi ça fait ça.

Le code est un peu compliqué si on l'analyse dans son ensemble. Voici le code du <div> qui comprend le contenu et celui des paragraphes au niveau CSS :

div#center {
	padding: 2em 1em;
	border-style: solid;
	border-width: 1px;
	border-color: #005500;
	border-bottom: 0;
	border-top: 0;
}

p {
	text-align: justify;
	margin-bottom: 1em;
}


J'ai aussi remarqué que je devais enlever les paragraphes de ce type :

p.quote {
	margin-left: 5em;
	font-weight: bold;
	font-style: italic;
}

p.citation {
	font-style: italic;
	margin-right: 1em;
	text-align: right;
	color: #0000FF;
	font-weight: bold;
}


Après seulement la bordure sous IE6 redevient à sa place, à égalité avec celles du haut et du bas.

Merci d'avance !
Daniel
Salut Daniel,

si ton sujet précédent est [Résolu], merci de l'indiquer Smiley cligne .

Pour ce qui est de ta question, je n'avais encore jamais vu une telle chose
<!--[if IE]>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<![ endif]-->
<html>
	<head>
mais c'est assurément une très mauvaise idée Smiley langue !

Si tu souhaites avoir le même rendu quel que soit le navigateur il te faut absolument un DOCTYPE et sans cela il va être impossible de te venir en aide Smiley rolleyes ...

Le mieux serait sûrement de reprendre les choses au début. Un petit tour sur cet article : comment débuter et trouver l'information ?, ainsi que dans les Tutoriels et dans la FAQ devrait déjà bien t'informer sur les standards du web et la manière de faire un site conforme.

Bonne continuation Smiley smile .
Modifié par Heyoan (29 Jun 2008 - 02:32)
C'est que le doctype change apparemment la façon dont le navigateur réagit et c'est le seul moyen actuellement que j'ai trouvé pour que tous les éléments en place fonctionnent. Je vais regarder ça de plus près, merci.
Voilà, en enlevant le doctype sous IE6 ça fonctionne. Je sais que c'est un peu étrange tout cela et que c'est loin d'être conforme mais l'important était que... ça fonctionne ?

C'est un peu surprenant. Le problème c'est qu'en ajoutant le doctype ça crée un comportement étrange sous IE6 avec les balises de mise en forme du texte tandis que ça fait dérailler le header sous Firefox. Néanmoins, n'en mettre aucun crée d'autres trucs étranges mais cette fois sous IE7 (remarquons que c'est toujours les produits Microsoft qui ont des comportements à part des autres).

Probablement qu'il y aurait d'autres solutions mais il faudra utiliser un tas de hacks et ça me prendra encore des heures. La solution que j'utilise me paraît de loin plus simple et a le mérite de fonctionner maintenant.

Autrement, merci beaucoup, ça a réglé le problème (sans que je ne puisse vraiment comprendre pourquoi, disons que la nature du problème en soi était étrange).
Le dernier bug serait l'étrange scrollbar de déplacement de 5-6px horizontal qui se crée sous IE6 et IE7 en 800x600 ou plutôt lorsque le site est exactement à la largeur du menu. Autre étrangeté brevetée de Microsoft...
D@n!eL_ a écrit :
Voilà, en enlevant le doctype sous IE6 ça fonctionne. Je sais que c'est un peu étrange tout cela et que c'est loin d'être conforme mais l'important était que... ça fonctionne ?
Ce n'est pas mon opinion... mais chacun est libre Smiley murf !

Tu pourrais malgré tout lire cet article qui t'en dira plus Smiley cligne !
J'ai lu l'article, c'est pas mal intéressant mais comme je disais, je ne suis pas disposé à tout recommencer à zéro, je n'ai hélas pas le loisir de ce temps. Lorsqu'IE8 sortira, je ferai les mises à jour qui s'imposent. Autrement, en rendu Strict sous IE7 ça fonctionne bien, sous Firefox avec rien ça fonctionne bien également. Je ne crois pas que les prochaines versions de ces deux navigateurs viennent modifier grandement le rendement de ma page, et avant qu'un autre navigateur prenne une place plus importante dans ce marché, j'ai probablement le temps de refaire le site une dizaine de fois .

Dans les bugs qu'il me reste, il y a la scrollbar horizontale sous IE lorsque le site est redimensionné à la largeur du menu, l'affichage du nom des équipes lors du survol des buts du terrains de baseball sous IE6 et finalement, sous IE6 encore (dire que je n'ai pas testé le 5.5), le menu bug lorsqu'on redimensionne le site à sa largeur. C'est mineur (sauf pour le nom des équipes) et personne ne peut le voir à part moi mais je tiens quand même à "solutionner" (je ne sais plus trop si je peux employer ce terme ?) ces quelques problèmes pour le moins transparent.
D@n!eL_ a écrit :
C'est mineur (sauf pour le nom des équipes) et personne ne peut le voir à part moi mais je tiens quand même à "solutionner" (je ne sais plus trop si je peux employer ce terme ?) ces quelques problèmes pour le moins transparent.

«Solutionner» est un barbarisme plutôt laid. On peut dire «trouver une solution à», «régler», «corriger», etc.

Quant aux problèmes en question... eh bien, sur Alsacréations on prône une méthodologie exigeante qui passe par le respect des Standards du Web, ce qui impose de ne pas travailler en Mode Quirks (donc pages en mode Standard uniquement). Beaucoup de membres de ce forum (moi le premier) refuseront de mettre le nez dans une page en mode Quirks. Pas par idéologie, mais tout simplement parce que les comportements des navigateurs en mode Quirks sont trop saugrenus pour qu'on veuille apprendre à les connaitre en détail. Smiley cligne
Modifié par Florent V. (29 Jun 2008 - 11:03)
Sujet clos
Aller à