Sujet Précédent Sujet Suivant

Problème rendu Firefox 3 et IE7

0DiGy -  
Smoking bird Messages postés 911 Statut Membre -
Bonjour,

J'ai réalisé un site internet pour ma copine et je rencontre un problème récurent que je ne suis pas parvenu à résoudre malgré mes recherches sur internet et les modifications que j'ai essayé d'apporter.

Je précise que je n'ai aucunes connaissances dans ce domaine ce qui doit très certainement expliquer mon incapacité à résoudre ce soucis.

Donc voici le site en question: www.a-gilles.com

Le rendu sous IE7 est exactement ce que je veux avoir, malheureusement sous firefox 3 la hauteur du header et footer est plus importante et c'est gênant.

Sous dreamweaver le rendu correspond à celui d'IE 7 mais je ne m'explique pas les soucis sous mozilla.

Si vous avez une idée je suis preneur.

Merci d'avance.
A voir également:

4 réponses

Réponse 1 / 4
0DiGy
 
Personne n'a d'idée pour ce soucis?
0
Réponse 2 / 4
Smoking bird Messages postés 911 Statut Membre 58
 
Il nous faudrait un peu de code :) notamment tes feuilles de style css et la façon dont tes pages sont construites :) tu peux nous fournir ça s'il te plait? Sinon on pourra difficilement t'aider^^
0
0DiGy
 
Alors pour le code CSS: 

/*Cascading Style Sheet for Elizio*/
/*Mallory Mollo*/
body{
	font-family:"monotype Corsiva";
	font-size:1.5em;
	padding:0;
	margin:0;
	background:#000;
	color:#CCC;
}
a{
	color:#000;
}
a:hover{
	text-decoration:none;
	color: #CCCCCC;
}
#main{
	border-right:1px dashed #FFF;
	width:99.99%;
}
#menu{
	width:34%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	margin-top: 1em;
	float: left;
}
#menu ul{
	list-style-type:none;
	margin-bottom:5em;
}
#menu ul li{
	text-transform:uppercase;
	text-align:center;
	padding:0.5em;
	border-top-width: 0px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #cc3;
	border-right-color: #cc3;
	border-bottom-color: #cc3;
	border-left-color: #cc3;
}
#menu ul li a{
	padding:0.5em 1.5em 0.5em 1.5em;
	color:#cc3;
}
#menu ul li:hover{
	background:#cc3;
	color:#000;
}
#menu ul li:hover a{
	background:#cc3;
	color:#000;
}
#header{
	margin-bottom:0em;
	color:#006666;
	background-color: #DF200B;
	padding-top: 0em;
	padding-right: 0em;
	padding-bottom: 0em;
	padding-left: 0em;
}
#header > p{
	font-style:italic;
}
#header > p + p{
	text-align:center;
	font-style:normal;
}
#header h1{
	font-family:"monotype Corsiva";
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #000;
}
#content{
	width:64%;
	border-top-width: 1px;
	border-right-width: 1px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #cc3;
	border-right-color: #cc3;
	border-bottom-width: 1px;
	border-left-width: 1px;
	border-bottom-color: #cc3;
	border-left-color: #cc3;
	float: left;
	margin-left: 1em;
	margin-top: 0.65em;
	margin-bottom: 1em;
}
#content h2, #content h3{
	width:50%;
	color:#cc3;
	border-bottom:1px solid #cc3;
}	
#content h2{
	padding-left:1em;
}
#content h3{
	padding-left:3em;
}
#content p{
	text-indent:2em;
	border-left:1px dashed #FFF;
	padding-left:1em;
	padding-right: 1em;
}
#content h2 + p{
	font-size:26px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
#content h3 + p{
	font-size:0.9em;
}
#footer{
	clear:both;
	margin-bottom:2em;
	text-align:center;
	color:#000;
	font-size:0.8em;
	background-color: #DF200B;
	padding-top: 1em;
	padding-right: 1em;
	padding-bottom: 0.5em;
	padding-left: 1em;
}
#footer a{
}


Pour le code de l'index: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<meta http-equiv="content-langage" content="fr">
	<title>Amandine Gilles - Peintre sur commande & Copiste</title>
	<meta name="description" content="Peintre et copiste spécialisée dans la peinture de la Renaissance au néo-classicisme, portraits et natures-mortes du XVIe au XVIIIe siècle">
	<meta name="keywords" content="Copiste Peintre A.Gilles Amandine Gilles Paris XVIe XVIIIe">
	<meta name="identifier-url" content="https://a-gilles.com/">
	<meta name="author" content="Amandine Gilles">
	<meta name="copyright" content="www.a-gilles.com © 2008 ">
	<meta name="robots" content="index,follow">
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="verify-v1" content="KAiANHhxIxZXI2xNBZ1ijdZ7KKagGyxok9pONEPkJGE=" />
	<style type="text/css" title="style" media="screen">
	@import "style.css";body {
	background-color: #000000;
}
    .Style2 {
	font-family: "monotype Corsiva";
	font-size: 30px;
	font-weight: bold;
}
    .Style5 {font-size: 1em}
    .Style7 {font-size: 1.2em}
    .Style9 {font-size: 16px; }
    .Style12 {font-size: 26px}
.Style19 {font-size: 60px}
    .Style20 {color: #CCCCCC}
    a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	color: #CCCCCC;
}
a:active {
	text-decoration: none;
}
.Style22 {font-size: 36px}
    .Style23 {font-size: 56px}
    </style>
</head>
<body>
<div id="main">
<div id="header">
<h1 class="Style2">A.Gilles</h1>
<p align="center" class="Style19"><strong><span class="Style23">Peintre sur commande &amp; Copiste</span><br />
  <span class="Style22">Sp&eacute;cialis&eacute;e dans la peinture de la Renaissance au  n&eacute;o-classicisme,<br />
  portraits et natures-mortes du XVIe au XVIIIe  si&egrave;cle</span></strong><img src="Frise.jpg" width="80%" height="25%" /></p>
</div>
<div class="Style9" id="menu">
	<ul>
		<li><a href="https://a-gilles.com/">Accueil</a></li>
		<li><a href="presentation.html">PrESENTatioN</a></li>
		<li><a href="commande.html">Passer une commande </a></li>
		<li><a href="Actualite.html">Actualites </a></li>
		<li><a href="mailto:questions@a-gilles.com">Contact</a></li>
    </ul>
	<ul>
		<li><a href="oeuvrespersonnelles.html">Oeuvres personnelles </a></li>
		<li><a href="oeuvrescommande.html">Oeuvres d'apres commandes </a></li>
		<li><a href="copies.html">copies</a></li>
    </ul>	
</div>
<div id="content">
  <h2 class="Style12">Bienvenue sur le site d'Amandine Gilles </h2>
  <p class="Style12">Portraits et  natures-mortes r&eacute;alis&eacute;s selon vos envies. <br />
Selon le choix&nbsp; du mod&egrave;le, de la technique, du format, je  r&eacute;alise le tableau ou le dessin que vous souhaitez.<br />
<br />
Les peintures sont  faites sur toile et les techniques utilis&eacute;es sont la peinture &agrave; l&rsquo;huile,  d&eacute;trempe (acrylique, gouache) 
  et la tempera  (peinture &agrave; l&rsquo;&oelig;uf, ayant l&rsquo;eau comme diluant, utilis&eacute;e par les ma&icirc;tres anciens  jusqu&rsquo;aux environs du XVIe si&egrave;cle).<br />
  <br />
Les dessins sont  r&eacute;alis&eacute;s sur papier appropri&eacute;, au fusain, aux crayons ou aux&nbsp; pastels (secs ou &agrave; l&rsquo;huile)<br />
<br />
Les tarifs varient en  fonction du format, de la technique utilis&eacute;e et du sujet.<br />
<br />
Pour le  choix des sujets (peintures, photographies), ils doivent relever de votre  propri&eacute;t&eacute; ou du domaine public (leur cr&eacute;ation date de plus de 70 ans) ou sont  exploit&eacute;s avec l&rsquo;accord de l&rsquo;artiste lui-m&ecirc;me.<br />
<br />
  <u>N&deg; de SIRET : 508-567-914-00017<br />
  TVA non applicable, article 293 B du Code g&eacute;n&eacute;ral des imp&ocirc;ts</u></p>
  <h2 class="Style12">Actualit&eacute;s</h2>
  <p class="Style12">Jeudi 09/10/2008: Mise en vente de certaines oeuvres (<a href="Actualites/Actualite 09-10-2008.html" class="Style20">en savoir plus</a>).<br />
    Lundi 22/09/2008: Mise en ligne du site d&eacute;finitif <a href="Actualites/Actualite 22-09-2008.html" class="Style20">(en savoir plus).</a></p>
</div>
<div id="footer">
<p>
  <span class="Style5"><span class="Style7"><a href="https://a-gilles.com/">Accueil</a>
|
<a href="presentation.html">Pr&eacute;sentation</a>
|
<a href="commande.html">Passer une commande<a href="commande.html">|</a><a href="Actualite.html"> Actualit&eacute;s</a><a href="commande.html"> </a> |
<a href="mailto:questions@a-gilles.com">Contact</a> </span></span></p>
<p class="Style7">  <a href="oeuvrespersonnelles.html">Oeuvres personnelles </a>
|
<a href="oeuvrescommande.html">Oeuvres d'apr&egrave;s commandes </a>
|
<a href="copies.html">Copies</a></p>
<p class="Style7">- www.a-gilles.com &copy; 2008 <a href="index.html"></a> | Designed by <a href="http://blog.sweetpeople.org">Mallory Mollo</a> -</p>
<p class="Style7"><span class="Style9">En cas de probl&egrave;me de navigation veuillez contacter <a href="mailto:administrateur@a-gilles.com">l'administrateur</a></span></p>
<a href="http://www.xiti.com?xtor=AD-1----%5B386571%5D" title="WebAnalytics" target="_top">
<script type="text/javascript">
<!--
Xt_param = 's=386571&p=Index';
try {Xt_r = top.document.referrer;}
catch(e) {Xt_r = document.referrer; }
Xt_h = new Date();
Xt_i = '<img width="80" height="15" border="0" alt="" ';
Xt_i += 'src="https://logv9.xiti.com/rcg.xiti?fh=1&%27+Xt_param;&Rdt=On
Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
if(parseFloat(navigator.appVersion)>=4)
{Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Internet Audience">');
//-->
</script>
<noscript>
Mesure d'audience ROI statistique webanalytics par <img width="80" height="15" src="https://logv9.xiti.com/rcg.xiti?fh=1&s=386571&p=Index&Rdt=On" alt="WebAnalytics" />
</noscript></a>
</div>
</div>
</body>
</html>


J'imagine qu'il y a beaucoup d'optimisations dans le code à faire mais je ne pense pas que ce soit à l'origine des problèmes que je rencontre
0
Réponse 3 / 4
Smoking bird Messages postés 911 Statut Membre 58
 
Avant de me plonger dans tout ça y'a un truc qui me choque

Sous mozilla ça a l'air de fonctionner comme il faut, mais sous IE, les images sont vachement étirées en hauteur... et ton cadre rouge en est 4 fois plus grand que sous firefox.

Je vais jeter un oeil demain, ça fait pas mal de lecture, et j'vais commencer par le purifier de tout ce que colle dreamweaver d'office, ça pollue vachement le code pour pas grand chose :s

Donc plus de news demain :) ce soir repos^^
0
Réponse 4 / 4
Smoking bird Messages postés 911 Statut Membre 58
 
J'ai jeté un oeil, et fais quelques premières modifications:

Ca c'est pour l'index 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
	<meta http-equiv="content-langage" content="fr">
	<title>Amandine Gilles - Peintre sur commande & Copiste</title>
	<meta name="description" content="Peintre et copiste spécialisée dans la peinture de la Renaissance au néo-classicisme, portraits et natures-mortes du XVIe au XVIIIe siècle">
	<meta name="keywords" content="Copiste Peintre A.Gilles Amandine Gilles Paris XVIe XVIIIe">
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<meta name="verify-v1" content="KAiANHhxIxZXI2xNBZ1ijdZ7KKagGyxok9pONEPkJGE=" />
	<link href='style.css' rel='stylesheet' type='text/css' />
	<style type="text/css" title="style" media="screen">
	@import "style.css";body {
	background-color: #000000;
}
    .Style2 {
	font-family: "monotype Corsiva";
	font-size: 30px;
	font-weight: bold;
}
    .Style5 {font-size: 1em}
    .Style7 {font-size: 1.2em}
    .Style9 {font-size: 16px; }
    .Style12 {font-size: 26px}
.Style19 {font-size: 60px}
    .Style20 {color: #CCCCCC}
    a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	color: #CCCCCC;
}
a:active {
	text-decoration: none;
}
.Style22 {font-size: 36px}
    .Style23 {font-size: 56px}
    </style>
</head>
<body>
<div id="main">
<div id="header">
<h1 class="Style2">A.Gilles</h1>
<p align="center" class="Style19"><strong><span class="Style23">Peintre sur commande &amp; Copiste</span><br />
  <span class="Style22">Sp&eacute;cialis&eacute;e dans la peinture de la Renaissance au  n&eacute;o-classicisme,<br />
  portraits et natures-mortes du XVIe au XVIIIe  si&egrave;cle</span></strong><img src="Frise.jpg" width="80%" height="25%" /></p>
</div>
<div class="Style9" id="menu">
	<ul>
		<li><a href="https://a-gilles.com/">Accueil</a></li>
		<li><a href="presentation.html">PrESENTatioN</a></li>
		<li><a href="commande.html">Passer une commande </a></li>
		<li><a href="Actualite.html">Actualites </a></li>
		<li><a href="mailto:questions@a-gilles.com">Contact</a></li>
    </ul>
	<ul>
		<li><a href="oeuvrespersonnelles.html">Oeuvres personnelles </a></li>
		<li><a href="oeuvrescommande.html">Oeuvres d'apres commandes </a></li>
		<li><a href="copies.html">copies</a></li>
    </ul>	
</div>
<div id="content">
  <h2 class="Style12">Bienvenue sur le site d'Amandine Gilles </h2>
  <p class="Style12">Portraits et  natures-mortes r&eacute;alis&eacute;s selon vos envies. <br />
Selon le choix&nbsp; du mod&egrave;le, de la technique, du format, je  r&eacute;alise le tableau ou le dessin que vous souhaitez.<br />
<br />
Les peintures sont  faites sur toile et les techniques utilis&eacute;es sont la peinture &agrave; l&rsquo;huile,  d&eacute;trempe (acrylique, gouache) 
  et la tempera  (peinture &agrave; l&rsquo;&oelig;uf, ayant l&rsquo;eau comme diluant, utilis&eacute;e par les ma&icirc;tres anciens  jusqu&rsquo;aux environs du XVIe si&egrave;cle).<br />
  <br />
Les dessins sont  r&eacute;alis&eacute;s sur papier appropri&eacute;, au fusain, aux crayons ou aux&nbsp; pastels (secs ou &agrave; l&rsquo;huile)<br />
<br />
Les tarifs varient en  fonction du format, de la technique utilis&eacute;e et du sujet.<br />
<br />
Pour le  choix des sujets (peintures, photographies), ils doivent relever de votre  propri&eacute;t&eacute; ou du domaine public (leur cr&eacute;ation date de plus de 70 ans) ou sont  exploit&eacute;s avec l&rsquo;accord de l&rsquo;artiste lui-m&ecirc;me.<br />
<br />
  <u>N&deg; de SIRET : 508-567-914-00017<br />
  TVA non applicable, article 293 B du Code g&eacute;n&eacute;ral des imp&ocirc;ts</u></p>
  <h2 class="Style12">Actualit&eacute;s</h2>
  <p class="Style12">Jeudi 09/10/2008: Mise en vente de certaines oeuvres (<a href="Actualites/Actualite 09-10-2008.html" class="Style20">en savoir plus</a>).<br />
    Lundi 22/09/2008: Mise en ligne du site d&eacute;finitif <a href="Actualites/Actualite 22-09-2008.html" class="Style20">(en savoir plus).</a></p>
</div>
<div id="footer">
<p>
  <span class="Style5"><span class="Style7"><a href="https://a-gilles.com/">Accueil</a>
|
<a href="presentation.html">Pr&eacute;sentation</a>
|
<a href="commande.html">Passer une commande<a href="commande.html">|</a><a href="Actualite.html"> Actualit&eacute;s</a><a href="commande.html"> </a> |
<a href="mailto:questions@a-gilles.com">Contact</a> </span></span></p>
<p class="Style7">  <a href="oeuvrespersonnelles.html">Oeuvres personnelles </a>
|
<a href="oeuvrescommande.html">Oeuvres d'apr&egrave;s commandes </a>
|
<a href="copies.html">Copies</a></p>
<p class="Style7">- www.a-gilles.com &copy; 2008 <a href="index.html"></a> | Designed by <a href="http://blog.sweetpeople.org">Mallory Mollo</a> -</p>
<p class="Style7"><span class="Style9">En cas de probl&egrave;me de navigation veuillez contacter <a href="mailto:administrateur@a-gilles.com">l'administrateur</a></span></p>
<a href="http://www.xiti.com?xtor=AD-1----%5B386571%5D" title="WebAnalytics" target="_top">
<script type="text/javascript">
<!--
Xt_param = 's=386571&p=Index';
try {Xt_r = top.document.referrer;}
catch(e) {Xt_r = document.referrer; }
Xt_h = new Date();
Xt_i = '<img width="80" height="15" border="0" alt="" ';
Xt_i += 'src="https://logv9.xiti.com/rcg.xiti?fh=1&%27+Xt_param;&Rdt=On
Xt_i += '&hl='+Xt_h.getHours()+'x'+Xt_h.getMinutes()+'x'+Xt_h.getSeconds();
if(parseFloat(navigator.appVersion)>=4)
{Xt_s=screen;Xt_i+='&r='+Xt_s.width+'x'+Xt_s.height+'x'+Xt_s.pixelDepth+'x'+Xt_s.colorDepth;}
document.write(Xt_i+'&ref='+Xt_r.replace(/[<>"]/g, '').replace(/&/g, '$')+'" title="Internet Audience">');
//-->
</script>
<noscript>
Mesure d'audience ROI statistique webanalytics par <img width="80" height="15" src="https://logv9.xiti.com/rcg.xiti?fh=1&s=386571&p=Index&Rdt=On" alt="WebAnalytics" />
</noscript></a>
</div>
</div>
</body>
</html>


Ca, c'est un fichier que tu devras impérativement appeller style.css 

body{
	font-family:"monotype Corsiva"; font-size:1.5em;
	padding:0px; margin:0px;
	background:#000; color:#CCC;
}
a{
	color:#000;
}
	a:hover{
		text-decoration:none;
		color: #CCCCCC;
	}
#main{
	border-right:1px dashed #FFF;
	width:99.99%;
}
#menu{
	width:34%; float: left;
	border:0px none white;
	margin-top: 1em;
}
	#menu ul{
		list-style-type:none;
		margin-bottom:5em;
	}
		#menu ul li{
			text-transform:uppercase; text-align:center;
			padding:0px.5em;
			border:1px solid #cc3; border-top:0px;

		}
			#menu ul li a{
				padding:0px.5em 1.5em 0.5em 1.5em;
				color:#cc3;
			}
				#menu ul li:hover{
					background:#cc3;
					color:#000;
				}
					#menu ul li:hover a{
						background:#cc3;
						color:#000;
					}
#header{
	margin-bottom:0em; padding:0em;
	color:#006666;
	background-color: #DF200B;
}
	#header > p{
		font-style:italic;
	}
		#header > p + p{
			text-align:center;
			font-style:normal;
		}
			#header h1{
				font-family:"monotype Corsiva";
				border-bottom-width: 1px;
				border-bottom-style: solid;
				border-bottom-color: #000;
			}
#content{
	width:64%;
	border: 1px solid #cc3;
	float: left;
	margin-left: 1em;
	margin-top: 0.65em;
	margin-bottom: 1em;
}
	#content h2, #content h3{
		width:50%;
		color:#cc3;
		border-bottom:1px solid #cc3;
	}	
		#content h2{
			padding-left:1em;
		}
			#content h3{
				padding-left:3em;
			}
				#content p{
					text-indent:2em;
					border-left:1px dashed #FFF;
					padding-left:1em;
					padding-right: 1em;
				}
					#content h2 + p{
						font-size:26px;
						border-style: none;
					}
						#content h3 + p{
							font-size:0.9em;
						}
#footer{
	clear:both;
	margin-bottom:2em;
	text-align:center;
	color:#000;
	font-size:0.8em;
	background-color: #DF200B;
	padding-top: 1em 1em 0.5em 1em;
}


J'ai fait quelques modifications: j'ai rendu ton code plus lisible et je l'ai simplifié là où ça pouvait l'être et où ça rend la tâche plus facile. Maintenant, dans ta définition des styles, et en particulier dans ta nomination des classes, il faut que tu sois plus explicite. Tu as beaucoup de classes "Style[chiffre]", ce n'est pas très compréhensible, et est-ce vraiment utile à ton site d'en avoir autant? Le plus simple c'est, le mieux ce sera. On pourra mieux contrôler et mieux debugger ton site.

Ensuite, j'aurais besoin d'avoir des captures d'écran me montrant précisément comment tu veux que ça soit, et ce à quoi tu ne veux surtout pas que ça ressemble. On ne voit pas exactement la même chose sur tous les ordinateurs, et là j'ai l'impression de pas pouvoir cerner exactement tes objectifs graphiques.

J'ai aussi viré quelques trucs made in dreamweaver.

Bon, je t'avouerais que la tâche va être ardue, et vu le matériel de base, chercher à le rendre compatible et respectueux des normes W3C ça va être une bonne galère. Je ne pense pas que ça vaille le coup de se casser le crâne dessus, compte tenu du fait que ce n'est même pas un site dynamique (ce n'est pas une attaque hein, c'est un constat^^ j'ai bien compris que c'était pas ton domaine^^). Pour être franc, je prépare le lancement de ma boîte, et je cherche quelques sites à faire que j'pourrais éventuellement proposer en référence. Si ça vous intéresse, je pourrais à coût bien allégé vous préparer quelque chose de dynamique et de probablement plus proche de ce qui pourrait vous intéresser côté graphique. Voici mon mail, si tu veux des détails sur mon activité ou si tu veux discuter de ma proposition^^ :)

thesmileofclaudia@hotmail.fr

Bonne soirée et à bientôt^^
0

Discussions similaires

Ca veut dire quoi :3
Moi -
Adraen -

3 réponses
Méssage Firefox ''Couldn't load XPCOM''
pistouri -
pistouri -

0 réponse
signification "<3" dans un sms
lecogno -
Utilisateur anonyme -

3 réponses
Signification de :3
blanchecanelle -
Adraen -

6 réponses