28173 sujets

CSS et mise en forme, CSS3

[RESOLU] Site très peu visible sous ie6 grrrr

Bonjour,
grande débutante j'ai créé un site web avec les tutoriaux en ligne et en particulier ceux de alsacréation. Mon site s'affiche sous firefox, netscape 7.1 mais pas ie6. Malgré mes recherches sur le net, je n'y arrive pas. J'ai pourtant intégré une page de style spéciale avec :
<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="images/ie.css" media="screen" />
<![endif]-->

dans ma page index.html et avec 
#global {
	height: 100%;
	}
#content {
	display: inline;
	}
#center {
	overflow: visible;
	height: 1%;
	}
#content, #sidebar {
	margin-top: 15px;
	}
global {
	background: none;
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="css/img/global.png", sizingMethod="scale");
	}
#global {
	position: static;
	}
a, pre {
	position: relative;
	}
body {
	position: relative;
	}
dans ma feuille destyle spéciale ie.
Mais en fait il me semble que c'est le bloc center qui pose pb puisque tout est réduit à une fenêtre de hauteur tellement réduite qu'il est impossible de voir quoi que ce soit. upload/12275-mauvais.jpg .
Merci de me donner quelques indications pour mon pb.
J'ai validé le code html, trop contente, par contre la validation css me renvoie le code d'erreur suivant:"Servlet has thrown exception:javax.servlet.ServletException: Timed out"
Merci pour votre aide.
Modifié par lulu31 (15 May 2007 - 17:03)
Salut,

j'ai l'impression qu'il y a un problème dans le chemin de la feuille de style réservée à IE6 : 
<!--[if lte IE 6]>
   <link rel="stylesheet" type="text/css" href="[b]css/ie.css[/b]" media="screen" />
<![_endif]-->
ce serait l'explication la plus logique Smiley smile

Sinon, l'idéal serati un exemple de ta page en ligne, ou au moins le code html complet, ainsi que la feuille de style ...
Modifié par Thomas D. (11 May 2007 - 01:33)
Bonjour,

Si c'est l'url indiquée dans ta capture d'écran, tu as juste un problème de non interprétation de min-height par ie6 et de centrage ,margin: auto il n'aime pas non plus.

Pas besoin de css particuliere, juste un commentaire conditionnel pour ie6 du style:

<!--[if lt IE 7]>
<style type="text/css">
div#global {
	height: 100%;
        text-align: center
}
</style>
<![endif]-->


A placer après l'appel à ta css (entre <head> et </head>)
Puis rectifier aussi le text-align: center pour chaque bloc si nécessaire (text_align: left) pour que ton texte soit correctement positionné.
Thomas D. a écrit :
Salut,

j'ai l'impression qu'il y a un problème dans le chemin de la feuille de style réservée à IE6 : 
<!--[if lte IE 6]>
   <link rel="stylesheet" type="text/css" href="[b]css/ie.css[/b]" media="screen" />
<![_endif]-->
ce serait l'explication la plus logique Smiley smile

Sinon, l'idéal serati un exemple de ta page en ligne, ou au moins le code html complet, ainsi que la feuille de style ...

Merci pour ta réponse, mais non il n'y a pas de pb de chemin dans mon code.
Merci quand même.
ghost a écrit :
Bonjour,

Si c'est l'url indiquée dans ta capture d'écran, tu as juste un problème de non interprétation de min-height par ie6 et de centrage ,margin: auto il n'aime pas non plus.

Pas besoin de css particuliere, juste un commentaire conditionnel pour ie6 du style:[

Trop fort! Un grand merci. Car ça marche nickel.
Bonne journée.
ghost a écrit :
margin: auto il n'aime pas non plus.

La technique du centrage horizontal avec les marges automatiques marche parfaitement dans IE6, du moment que la page est rendue en mode standard, et pas en mode Quirks.

L'astuce présentée est par contre effectivement nécessaire pour le centrage dans Internet Explorer 5.x.
Bon en fait mon site est bien visible MAIS tout s'affiche à gauche et le footer est décalé sur la droite par rapport au reste (#center)
J'ai bien écrit 
<!--[if lt IE 7]>

<style type="text/css">

div#global {
	height: 100%;
        text-align: center
}

</style>
<![endif]-->

Dans le head de mon index.html
Ma feuille de style pour ie6 est la suivante :
#global {
	height: 100%;
	text-align: center
	}
#content {
	display: inline;
	text-align: center
	}
#center {
	text-align: center
	overflow: visible;
	height: 100%;
	}
#content, #sidebar {
	margin-top: 15px;
	}
global {
	background: none;
	}
#global {
	position: static;
	}
a, pre {
	position: relative;
	}
body {
	position: relative;
	}

Sauf pour la page de contact qui est bien centrée avec le pied de page décalé vers la droite, et le menu vertical qui se déplace vers le bas lorsque l'on va en bas de la page. Mais le fond de couleur kaki reste en haut de la page. ci-joint la photo de la page de contact.
Merci pour votre aide. upload/12275-contact.jpeg
Il faut supprimer le prologue XML qui :
- est inadapté ici, vu que ta page est servie en tant que HTML (type MIME "text/html") et non pas en tant que XML (type MIME "application/xhtml+xml") ;
- fait passer Internet Explorer 6 en mode Quirks (mode de rendu « ancien », non standard).

Le deuxième point explique sans doute une partie des problèmes rencontrés avec Internet Explorer 6.
OK merci Florent.
J'ai supprimé le prologue xml : c'est centré.
Mais, le menu de navigation descend avec la scrolbarre (j'aimerai qu'il soit fixe) et il faut que je remonte le curseur pour pouvoir cliquer sur le lien du menu avec effet, sinon l'affichage s'efface et le lien vers la page sélectionné ne fonctionne pas. Une idée? parce que moi je sèche lamentablement.
Par contre, je ne sais pas passer ie6 en mode quirks. J'ai beau chercher dans les menus je ne trouve pas.
Merci pour ton aide.
Salut.

Pour que le menu de navigation ne suive pas le défilement de la page, il faut utiliser un positionnement particulier, "fixed" : 
#menu {
   position: fixed;
   ...
}
Evidemment, IE ne gère pas ce positionnement avant la version 7. Tu trouveras quelques solutions possibles dans la FAQ, si tu ne peux pas accepter que le menu bouge sous IE6.
bonjour,
merci pour votre aide. cela fonctionne comme je le souhaite sous firefox, netscape et ie7. sous ie6 le menu descend avec la page. Le suel pb est que si on le survole avec la souris, la ligne du menu survolée s'efface!
pour pouvoir sélectionner les ligne du menu il faut revenir en haut de la page pour que le menu reprenne sa place initiale.
Bon, je vais en rester là. en espérant que le public visé (les + de 55ans) aient tous des navigateurs récents.
Je considère ce pb comme résolu.
Bonne journée.
Sujet clos
Aller à