[résolu] Différents bugs d'affichage avec IE

Salut à tous,

Je suis actuellement en train de préparer un nouveau site pour le lancer dans les semaine à venir. Mon design est presque terminé mais j'ai encore quelques bugs avec IE (il est chi... ce navigateur lol).

Voici l'url : -www.mediacitoyen.fr (merci de ne pas mettre de lien cliquable, le site n'est pas encore lancé officiellement).

Comme vous pourrez le constater, j'ai un décalage important entre mon header et le debut de mon contenu. Ca fait plus d'une heire que je plante dessus...

De plus, les images de mes derniers articles ne s'affichent pas sur la page d'accueil. Sur firefox, je ne rencontre pas ce problème.

J'espere que quelqu'un saura trouver les deux solutions.

Merci d'avance
Modifié par XelNaga (25 May 2007 - 16:04)

Bonjour,
ton problème est sûrement dû au mode quirks activé par les navigateurs récents dans certains cas dont le tien
(doctype HTML4 incomplet c-a-d sans URI).
Tu dois mettre un doctype complet et valide pour basculer en mode standard, cela evite bien des surprises.

A ce sujet, je te conseil de lire cet article et celui-ci.

Autre chose, tu ne peux pas mettre 2 fois le même id dans un même document, les remplacer par des class.
La propriété z-index ne s'applique qu'aux éléments positionnés (absolue, relative et fixed)
Modifié par Hermann (18 May 2007 - 15:39)

Merci beaucoup, en effet c'etait bien du au modèle de boite. Par contre cela m'a développé un autre probleme sur ma petite case recherche en haut du site. Impossible de la remettre à la bonne taille, je commence à transpirer par cette chaleur lol

Une autre question totalement différente. Ce forum est une création Alsacréation ou non ? Car il est vraiment bien construit !
Modifié par XelNaga (18 May 2007 - 17:05)

XelNaga a écrit :
Une autre question totalement différente. Ce forum est une création Alsacréation ou non ? Car il est vraiment bien construit !

AlsacréationS.

Toi, tu n'as pas lu les Règles du forum. Ta réponse s'y trouve

D'abord désolé pour le S et ensuite, c'est vrai j'ai oublié de lire les règles. C'est donc une création de dew très sympathique par contre, même s'il explique comment installer le forum, je ne trouve pas le lien pour télécharger les scripts.

Concernant les CSS, j'ai encore essayé de jouer avec les padding mais rien n'y fait.

XelNaga a écrit :
je ne trouve pas le lien pour télécharger les scripts.

Oui c'est normal, le code du forum n'est pas (encore ?) public.

Je crois que tu as encore pas mal de chose à apprendre mais tu as choisi le bon site pour cela
Concernant ta boîte de recherche, commence déjà par corriger
les defaults d'imbrications invalides : l'élément form ne peut contenir directement que des éléments de niveau block (un <p> en général)
Les listes non-ordonnées (ul) ne peuvent directement contenir que des éléments de liste (li).
Pour en savoir plus : la FAQ

A mettre des commentaire evolutifs au niveau des script autant les mettre
aussi au niveau des style du head:

<style type="text/css" media="screen">
/*<![CDATA[*/
/*]]>*/
</style>

Toujours indiquer le media. Si tu souhaites que ta page soit imprimée
comme à l'écran mettre media="all".
Modifié par Hermann (18 May 2007 - 19:52)

Hermann a écrit :

<style type="text/css" media="screen">
/*<![CDATA[*/
/*]]>*/
</style>

Pas en text/html, please...

Laurent Denis a écrit :

Pas en text/html, please...

Bonjour Laurent,
disons que je met ces commentaires en prévision d'une hypothétique
évolutions vers XHTML 2 mais ça reste encore très incertain c'est vrai
et j'avoue que c'est un choix un peu prématuré
Modifié par Hermann (18 May 2007 - 20:06)

Bah, disons qu'à ce moment-là, il faut le faire correctement, en respectant strictement les contraintes syntaxiques en jeu et les problèmes de support des différentes générations de navigateurs:

<style type="text/css">
<!--/*--><![CDATA[/*><!--*/

/*]]>*/-->
</style>

Mais bon...
Modifié par Laurent Denis (18 May 2007 - 20:10)

En quoi est-il dangereux d'utiliser la syntaxe proposée au départ par Hermann (si l'on évite d'avoir les caractères "</" dans le contenu de l'élément) ?

Le contenu de l'élément sera affiché dans les navigateurs les plus anciens. Ce n'est pas "dangereux", juste inélégant pour le principe.

Mais le fond de l'idée est que ces syntaxes application/xhtml+xml sont ridicules en text/html. Lors d'un passage en application/xhtml+xml, modifier et gérer les syntaxes d'échappement de contenu de <style> est un détail facile à régler, face aux autres problèmes que l'on a lors à régler...

Laurent Denis a écrit :
Mais le fond de l'idée est que ces syntaxes application/xhtml+xml sont ridicules en text/html.

Elles sont utiles en ce qui concerne la validation, non ? D'autant plus que si l'on utilise les commentaires, on ne peut pas y placer les caractères "--".

En tout cas, il faudrait un peu préciser l'article d'OpenWeb à ce sujet.

En ce qui concerne ce code :

<!--/*--><![CDATA[/*><!--*/

Qu'est-ce qui empêchera les navigateurs les plus anciens d'afficher "<![CDATA[/*>" ? Considèrent-il que c'est une balise inconnue ?

<![CDATA[/*> étant invalide en css doit être échappé avec /* qui doit à son tour être masqué via le commentaire HTML pour éviter l'affichage lorsque l'élément style n'est pas supporté.

En fait je connaissais cette syntaxe (voir cet article dont on a déja parlé ici je crois)
J'ai chois la version plus courte car je ne prends pas en compte les anciens navigateurs (version4 et antèrieures?).
Ceci dit je crois que je vais revenir sur des commentaires simples

<!-- -->

En cas de conversion vers le type mime application/xhtml+xml,
un remplacement massif et hop, terminé.
Modifié par Hermann (18 May 2007 - 21:14)

Hermann a écrit :
Concernant ta boîte de recherche, commence déjà par corriger les defaults d'imbrications invalides : l'élément form ne peut contenir directement que des éléments de niveau block (un <p> en général)
Les listes non-ordonnées (ul) ne peuvent directement contenir que des éléments de liste (li).

Je ne comprend pas vraiment. Quand je regarde ce code :

<ul id="nav" class="nopads">		
	<li>
		<div class="loupe"><img src="../templates/temp/images/debutrecherche.gif" alt=""></div>
		</li>
		<!-- debut RECHERCHE -->	 
		<form  method="get" action="../recherche/liste.php">
		<input type="hidden" name="moduless" value="siterech">
		<input type="hidden" name="hl" value="fr"></input>
		<li>
			<input type="text" id="recherchechamps" name="motsclef" value="Votre Recherche" onFocus="this.value='';" class="moteur" />
		</li>
		<li>
			<input type="image" src="../templates/temp/images/btn_rechercher_ok.gif" class="formulairebouton" />
		 </li>
		</form>
		<!-- fin RECHERCHE -->
		</div>
</ul>

Je ne vois d'élément niveau bloc. les balises li s'adaptent très bien dans les form.

J'ai réussi à régler mon problème en faisant un design plus simple (et donc moins beau...).

Par contre, pour le menu qui s'affiche derrière mon cadre edito, j'ai essayé d'utiliser la définition visibility (http://zonecss.free.fr/style_css/feuille_css_visibility.html) mais ça ne veux toujours pas prendre le dessus .

Vous avez une idée ?

Hello,
si je te donne quelques conseils sur ce qu'il est possible ou pas de faire au
niveau des imbrications, c'est qu'il y a une raison.
Ne pas tenir compte des critères d'imbrication possible (validité du code) est la porte
ouverte à toute sorte d'incohérence d'affichage selon le navigateur, donc
c'est un choix un peu risqué.

XelNaga a écrit :

J'ai réussi à régler mon problème en faisant un design plus simple (et donc moins beau...).

Simplicité n'est pas synonyme de laideur XelNaga. Tu peux très bien
obtenir un résultat très beau avec un contenu minimaliste.
Modifié par Hermann (22 May 2007 - 18:41)

En fait, je n'ai pas bien compris ce que tu voulais me dire. Tu m'as parlé de l'imbrication concernant la case recherche alors que ce problème est résolu.

Ce qui me pose problème à l'heure actuelle, c'est le menu deroulant qui s'affiche derrière la photo edito (seulement sous IE).

Je suis désolé de ne pas être au niveau Hermann mais j'apprend petit à petit...