Encore un problème IE :-)

LaurentR · 7 Août 2006

Bonjour,

Voici un problème d'affichage que je rencontre sous IE. Cette page s'affiche correctement sous Opera 9 et sous Firefox, mais pas sous IE 6 où elle apparait décalée vers la gauche :

http://www.babeth.fr

Je n'arrive plus à savoir ce qu'il faut faire, malgré mes recherches sur Google.

Le code de la page :


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
  <title>La galerie de Babeth</title>
  <meta name="GENERATOR" content="Quanta Plus">
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="stylesheet" type="text/css" href="style.css"/>
  <!--[if lt IE 7.]>
  <script defer type="text/javascript" src="correctpng.js"></script>
  <![endif]-->
</head>

<body>

<div id="conteneur">
	<div>
		<img src="image/lagalerie.gif" border="0">
	</div>

	<div id="contact">
		<a href="mailto:babethatbabeth.fr"></a>
	</div>

	<div id="liens">
			<a href="liens.html"></a>
	</div>


	<div id="galeries">
		<div id="peintures">
			<a href="PEINTURES/" class="peinture"></a>
		</div>
		<div id="photos">
			<a href="PHOTOS/" class="photos"></a>
		</div>
	</div>


</div>

<div id="wrap">
	<div id="livredor">
		<a href="http://www.babeth.fr/livredor/" class="livredor"></a>
	</div>


	<div id="credit">
		<img src="image/Babeth-et-Lolo.gif">
	</div>
</div>


<!-- phpmyvisites -->
<a href="http://www.phpmyvisites.net/" title="phpMyVisites | Open source web analytics"
onclick="window.open(this.href);return(false);">
<script type="text/javascript">
<!--
var a_vars = Array();
var pagename='';

var phpmyvisitesSite = 2;
var phpmyvisitesURL = "http://thamms.org/pmv2/phpmyvisites.php";
//-->
</script>
<script language=javascript src="http://thamms.org/pmv2/phpmyvisites.js" type="text/javascript"></script>
<noscript>
<p>phpMyVisites | Open source web analytics
<img src="http://thamms.org/pmv2/phpmyvisites.php" alt="phpMyVisites" style="border:0" />
</p>
</noscript>
</a>
<!-- /phpmyvisites -->


</body>
</html>

Et le code du CSS :


a.peinture {
		display: block;
		background: url(image/peintures.gif) no-repeat;
		width: 100px;
	height: 146px;
}

a.peinture:hover {
	background-image:url(image/peintures1.gif);
}

a.photos {
		display: block;
		background: url(image/photos.gif) no-repeat;
		width: 200px;
	height: 141px;
}

a.photos:hover {
	background-image:url(image/photos1.gif);
}

a.livredor {
		display: block;
		background: url(image/livredor.gif) no-repeat;
		width: 146px;
	height: 100px;
}

a.livredor:hover {
	background-image:url(image/livredor1.gif);
}

body {
	background-image:url("image/Papiermouchte.jpg");
	background-repeat: repeat;

}

#conteneur {
	width: 780px;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	background-color:#ffffff;
}

#corps {
	position: relative;
	top: 20px;
	left: 390px;
	width: 600px;
	text-align:center;	
}


#contact {
	position: relative;
	top : 5px;
}

#contact a {
	display: block;
		background: url(image/contact.gif) no-repeat;
	height: 42px;
	width:200px;
	margin-left:10px;
	voice-family: "\"}\"";
	voice-family:inherit;
	margin:auto;
	width: 141px;
}



#contact a:hover {
	background-image:url(image/contact1.gif);
}

#liens {
	position: relative;
	top : 5px;
}

#liens a {
	display: block;
		background: url(image/liens.gif) no-repeat;
		width: 144px;
	height: 42px;
	margin:auto;
}



#liens a:hover {
	background-image:url(image/liens1.gif);
}	


#galeries {
	position: relative;
	top: 80px;
	width:650px;
	padding-right:300px;
	voice-family: "\"}\"";
	voice-family:inherit;
	margin-left:100px;
	width:600px;
}

#peintures {
	float: left;
	margin-left: 50px;
}

#photos {
	float: left;
	margin-left: 200px;
}

#wrap{
	position: absolute;
	top:360px;
	width: 600px; 
	margin: 0 auto;
}

#livredor {
	position: relative;
	top: 100px;
	right:-550px;
	text-align: left;
}

#credit {
	position: relative;
	top: 120px;
	right: -530px;

}

Merci,

yhugo · 7 Août 2006

Salut ...

Essait juste de mettre un

text-align: center;

à ton body ...

Fait attention tu as un scroll horizontal qui n'est pas nécessaire ... Met des borders autour de tes DIVS pour voir leurs tailles et leurs positions ... ça aide à comprendre comment est interprété ta charpante ... ensuite tu les virres quand tout est bien structuré ...

http://css.alsacreations.com/Modeles-de-mise-en-page-en-CSS

Modifié 7 Août 2006 par yhugo

v4np13 · 7 Août 2006

Pour t'aider, tu peux aussi utiliser l'extension WebDeveloper, il te montre en un clic la taille de tes blocs,...

ghost · 7 Août 2006

Bonjour,

Regarde tes parités entre <div> et </div>, il me semble que ça cloche.

Et il me semble que tu as un bloc #corps qui ne sert à rien.

Passe au validateur, ça t'aidera

LaurentR · 9 Août 2006

Bonjour,

Après plusieurs essais, je n'arrive toujours pas à afficher ma page correctement dans tous les navigateurs. Opera y met aussi du sien en décalant les éléments photos et peintures vers la droite. Sous IE, c'est toujours catastrophique. Sous Firefox 1.5, c'est bon. En dehors du script de PhpMyVisit, la page passe le test du validateur en XHTML 1.0 Transitional. Sous Amaya, c'est pire que tout, puisque tout la page est calée à gauche. J'ai :

- Enlevé le #conteneur

- Remplacé les dimensions de l'argument left par des pourcentages pour que la page s'affiche correctement sur mon portable.

- Diminué les tailles des boites.

- Essayé :

voice-family: "\"}\"";

voice-family:inherit;

mais je ne sais pas m'en servir.

À priori, il n'y a plus de scrolling horizontal ( si j'ai bien compris )

Voilà,

Merci d'avance...

yhugo · 9 Août 2006

Salut ...

Regarde l'hyperlien que je t'ai donné l'autre jour ... Choisi un type de mise en page et étudit sa composition. Ils sont dépouillés c'est plus aisé pour observer le fonctionnement ...

Essait de revenir à la base dans ta structure, soit :

body
en-tête
conteneur
menu (gauche ou droite ou top, c'est selon)
contenu (zone principal)
pied de page

Au pire, fait toi un deuxième template et quand cela fonctionnera bien dans IE6/IE5/FireFox tu auras juste à y ajouter ton contenu.

Voilà ...

Bon courage

yhugo

PS : http://pompage.net/pompe/cssdezero-14/

Modifié 9 Août 2006 par yhugo

PotatoesJunky · 9 Août 2006

Y a aussi la solution de créer 2 feuilles de style (1 pour IE, l'autre pour les autres navigateurs), le tout pour le même template, en rajoutant simplement (entre <head> et </head>, juste après la déclaration de ta feuille CSS) le code suivant :

<!--[if IE]>
<link rel="stylesheet" type="text/css" media="screen" href="style_ie.css">
<![endif]-->

Et tu crées donc une feuille style.css pour FF et compagnie et une feuille style_ie.css pour IE...

Dudu · 10 Août 2006

Salut

Il n'y a pas qu'avec IE que tu vas avoir des problèmes: avec des navigateurs textes comme Lynx.. ou tout simplement avec Googlebot, Slurp, et autres

Faire du <div> à l'envi en ne mettant que des images, en CSS ou en HTML, n'est pas véritablement conseillé: il n'y a pour ainsi dire aucun texte sur ta page. Je te conseille plutôt d'écrire 'en dur' le texte, puis de le remplacer par des images en CSS. De plus ça te donnera l'occasion de placer tes textes dans des balises moins vides de sens que des simples <div> pas terribles: par exemple des <h1>/<h2> etc.. bref un peu de sémantique dans ce monde de brutes.

Ah je n'ai pas répondu à ta question: pratiquement tous tes <div> sont positionnés. Soit en relative, soit en absolute. Il y a de fortes chances pour que cela bloque des directives d'affichages telles qu'un "text-align: center"

Personnellement, j'utilise le positionnement CSS avec beaucoup de précaution: c'est bien plus traître que ça n'en a l'air.

LaurentR · 10 Août 2006

Merci pour vos réponses. J'ai finalement utilisé la proposition de PotatoesJunky. Je suis arrivé à un résultat correct, en tous cas au vue de mes compétences actuelles .

Dudu : Je me préoccupe peu des navigateurs texte, l'intégralité du site étant consacré à la présentation d'oeuvres graphiques. Pour le reste, j'ai noté ce que tu as écrit et je vais l'étudier, car la sémantique, c'est bien mystérieux pour moi .

Bonne soirée à tous...

yhugo · 10 Août 2006

Penses aussi à ceux qui ont du matériel pas tout à fait jeune ... les gens n'ont pas toujours les dernières versions logiciels

Bonne continuation

y.

Dudu · 11 Août 2006

Dudu : Je me préoccupe peu des navigateurs texte, l'intégralité du site étant consacré à la présentation d'oeuvres graphiques. Pour le reste, j'ai noté ce que tu as écrit et je vais l'étudier, car la sémantique, c'est bien mystérieux pour moi .

Et c'est bien dommage.

Quand je navigue en 56k j'ai l'habitude de demander à mon navigateur de ne pas afficher les images pour éviter que ça ne me prenne trop de bande passante.

Je me passerais de ton site.

Pas mal d'internautes ont des problèmes de vision et naviguent sur le web, non pas avec internet-explorer-sur-windows-xp-pro mais avec des configurations plus étranges: plages brailles, lecteurs vocaux, etc..

Ils se passeront de ton site.

Googlebot, le robot de Google; Slurp, le robot de Yahoo; et les autres ne lisent que le texte.

Ils se passeront de ton site: les moteurs de recherche c'est juste 80% du trafic normal d'un site, tu te prives de beaucoup de monde.

Mais bon, tu fais comme tu veux. Bon courage, A+

LaurentR · 14 Août 2006

Et c'est bien dommage.
Quand je navigue en 56k j'ai l'habitude de demander à mon navigateur de ne pas afficher les images pour éviter que ça ne me prenne trop de bande passante.

Je me passerais de ton site.

De toute façon, comme je l'ai bien précisé, ce site est destiné à présenté le travail en peinture et photo d'une artiste. Je vois donc mal comment il pourra t'intéresser sans images :whistling:

Pas mal d'internautes ont des problèmes de vision et naviguent sur le web, non pas avec internet-explorer-sur-windows-xp-pro mais avec des configurations plus étranges: plages brailles, lecteurs vocaux, etc..
Ils se passeront de ton site.

Tu connais beaucoup de personnes ayant des problèmes de vision qui s'intéressent à la peinture et à la photo ?

Googlebot, le robot de Google; Slurp, le robot de Yahoo; et les autres ne lisent que le texte.
Ils se passeront de ton site: les moteurs de recherche c'est juste 80% du trafic normal d'un site, tu te prives de beaucoup de monde.

Touché . Il y a certainement du travail à faire au niveau des meta et des alt. Du moins je suppose. Je suis loin d'être un fin connaisseur en la matière. Je voulais par exemple chercher à savoir ce que tu veux dire par :

Je te conseille plutôt d'écrire 'en dur' le texte, puis de le remplacer par des images en CSS. De plus ça te donnera l'occasion de placer tes textes dans des balises moins vides de sens que des simples <div> pas terribles: par exemple des <h1>/<h2> etc.. bref un peu de sémantique dans ce monde de brutes.

Mais bon, tu fais comme tu veux. Bon courage, A+

De même///

Connexion

Encore un problème IE :-)

Sujets conseillés

LaurentR

yhugo

v4np13

ghost

LaurentR

yhugo

PotatoesJunky

Dudu

LaurentR

yhugo

Dudu

LaurentR

Veuillez vous connecter pour commenter

Parcourir

Activité