28173 sujets

CSS et mise en forme, CSS3

Incompatibilité IE VS Firefox

Salut a tous, alors voilà, mon probleme est que jusquà présent je ne savait pas que firefox ne voyais pas la meme chose que IE ce qui me cause beaucoup d'ennuie pour la mise en page d'un site en question qui est conforme W3C, tout est ok sous IE mais sous Firefox ouffff c la galère total.

Dans le bas de ma page j'ai une ligne blanche et mon texte peu diminuer et agrandir meme si mon css lui spécifie une grandeur fixe.

voila le code html de la page index;
[#blue]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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-Script-Type" content="text/javascript" /> 
<title>Traitement de la cellulite, pertes de poids et de l'&eacute;pilation par Silhouette &Eacute;l&eacute;gance </title> 
<link href="css/font.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="javascript/rollover.js"> 
</script> 
 
</head> 
<body> 
<table width="835" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td height="148" colspan="7"><img src="images/fond/header.jpg" alt="Traitement de la cellulite, pertes de poids et de l'épilation par Silhouette élégance" width="835" height="148" hspace="0" vspace="0" border="0" /></td> 
</tr> 
<tr> 
<td colspan="2"><img src="images/propos/bout_over.gif" width="163" height="31" alt="" /></td> 
 
<td><a href="html/cellulite.html" onmouseover="endermologie.src = 'images/endermologie/bout_over.gif';" onmouseout="endermologie.src = 'images/endermologie/bout_normal.gif';"><img src="images/endermologie/bout_normal.gif" alt="Traitement de la cellulite" name="endermologie" width="176" height="31" border="0" /></a></td> 
 
<td><a href="html/regime.html" onmouseover="regime.src = 'images/regime/bout_over.gif';" onmouseout="regime.src = 'images/regime/bout_normal.gif';"><img src="images/regime/bout_normal.gif" alt="Perte de poids" name="regime" width="159" height="31" border="0" /></a></td> 
 
<td><a href="html/epilation.html" onmouseover="epilation.src = 'images/epilation/bout_over.gif';" onmouseout="epilation.src = 'images/epilation/bout_normal.gif';"><img src="images/epilation/bout_normal.gif" alt="&Eacute;pilation par lumi&egrave;re puls&eacute;e" name="epilation" width="152" height="31" border="0" /></a></td> 
 
<td colspan="2"><a href="html/joindre.html" onmouseover="joindre.src = 'images/joindre/bout_over.gif';" onmouseout="joindre.src = 'images/joindre/bout_normal.gif';"><img src="images/joindre/bout_normal.gif" alt="Nous joindre" name="joindre" width="185" height="31" border="0" /></a></td> 
</tr> 
<tr> 
<td colspan="2"><img src="images/fond/top_vign.gif" alt="" width="163" height="36" hspace="0" vspace="0" border="0" /></td> 
 
<td colspan="4" rowspan="6" valign="middle" style="background-image:url(images/propos/fond.gif);background-repeat:no-repeat;"> 
<table width="507" border="0" align="center" cellpadding="0" cellspacing="0"> 
<tr> 
<td height="50" colspan="3"> 
<h1><img src="images/propos/Title.gif" alt="Silhouette &Eacute;l&eacute;gance" width="507" height="50" hspace="0" vspace="0" /></h1></td> 
</tr> 
<tr> 
<td colspan="3" valign="top"><span class="soustitre">TRAITEMENT DE LA CELLULITE,<br /> 
PERTES DE POIDS &amp; DE L'&Eacute;PILATION</span> 
  <p class="noir16px">Prenez votre corps en main et soyez magnifique !</p> 
<p class="noir16px">Vous serez chaleureusement accueillis par notre &eacute;quipe comp&eacute;tente<br /> 
et professionnelle dans un cadre exceptionnel &eacute; l'&eacute;coute de vos besoins<br /> 
pour vous offrir un service de qualit&eacute; et prendre soin de vous.</p> 
<p><span class="noir16px">Silhouette &eacute;l&eacute;gance vous offre un concept europ&eacute;en et l'innovation<br /> 
technologique pour vous aider &agrave; atteindre vos objectifs.</span><br /> 
</p> 
<p class="vertbold16px">Nous sommes sp&eacute;cialis&eacute;s dans :</p> 
<p class="noir16px">* Traitements de cellulite (ENDERMOLOGIE &reg;)<br /> 
* Perte de poids ( ID&Eacute;AL PROTEIN)<br /> 
* &eacute;pilation d&eacute;finitive (LUMI&Egrave;RE PULS&Eacute;E)</p></td> 
</tr> 
<tr> 
<td width="154" height="133"> 
<h2><img src="images/propos/Cellu_M6.jpg" alt="Le Cellu M6" width="154" height="133" hspace="0" vspace="0" border="0" /></h2></td> 
<td width="164" height="133"> 
<h2><img src="images/propos/Skin_Perfect_CTS.jpg" alt="Le Skin Perfect CTS" width="164" height="133" hspace="0" vspace="0" border="0" /></h2></td> 
<td width="192" height="133"> 
<h2><img src="images/propos/Regime.jpg" alt="R&eacute;gime Id&eacute;al Protein" width="189" height="133" hspace="0" vspace="0" border="0" /></h2></td> 
</tr> 
<tr> 
<td class="vertbold16px"><div align="center">Le Cellu M6&reg;</div></td> 
<td><div align="center"><span class="vertbold16px">Le Skin Perfect CTS&reg;</span></div></td> 
<td class="vertbold16px"><div align="center">R&eacute;gime Id&eacute;al Protein</div></td> 
</tr> 
</table></td> 
<td rowspan="6"><img src="images/fond/right.jpg" alt="" width="45" height="624" hspace="0" vspace="0" border="0" /></td> 
</tr> 
<tr> 
<td rowspan="5"><img src="images/fond/left.jpg" alt="" width="43" height="588" hspace="0" vspace="0" border="0" /></td> 
<td><img src="images/propos/vign_over.jpg" alt="" width="120" height="100" /></td> 
</tr> 
<tr> 
<td><a href="html/cellulite.html" onmouseover="endermologiev.src = 'images/endermologie/vign_over.jpg';" onmouseout="endermologiev.src = 'images/endermologie/vign_normal.jpg';"><img src="images/endermologie/vign_normal.jpg" alt="Traitement de la cellulite" name="endermologiev" width="120" height="106" border="0" /></a></td> 
</tr> 
<tr> 
<td><a href="html/regime.html" onmouseover="regimev.src = 'images/regime/vign_over.jpg';" onmouseout="regimev.src = 'images/regime/vign_normal.jpg';"><img src="images/regime/vign_normal.jpg" alt="Pertes de poids" name="regimev" width="120" height="106" border="0" /></a></td> 
</tr> 
<tr> 
<td><a href="html/epilation.html" onmouseover="epilationv.src = 'images/epilation/vign_over.jpg';" onmouseout="epilationv.src = 'images/epilation/vign_normal.jpg';"><img src="images/epilation/vign_normal.jpg" alt="Épilation par lumière pulsée" name="epilationv" width="120" height="100" border="0" /></a></td> 
</tr> 
<tr> 
<td><img src="images/fond/info.gif" alt="" width="120" height="176" hspace="0" vspace="0" border="0" /></td> 
</tr> 
<tr> 
<td colspan="7"><img src="images/fond/footer.gif" alt="" width="835" height="47" hspace="0" vspace="0" border="0" /></td> 
</tr> 
<tr> 
<td><img src="images/spacer.gif" width="43" height="1" alt="" /></td> 
<td><img src="images/spacer.gif" width="120" height="1" alt="" /></td> 
<td><img src="images/spacer.gif" width="176" height="1" alt="" /></td> 
<td><img src="images/spacer.gif" width="159" height="1" alt="" /></td> 
<td><img src="images/spacer.gif" width="152" height="1" alt="" /></td> 
<td><img src="images/spacer.gif" width="140" height="1" alt="" /></td> 
<td><img src="images/spacer.gif" width="45" height="1" alt="" /></td> 
</tr> 
</table> 
</body> 
</html>



voici le css

[#blue]
.soustitre {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 22px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #666633;
}
.vertbold16px {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #666633;
	text-decoration: none;
}
.noir16px {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #000000;
	text-decoration: none;
}
.arial14bold {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #7394cc;
	text-decoration: none;
}
.arial13 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #7394cc;
	text-decoration: none;
}
.arial132 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #915c35;
	text-decoration: none;
}
.arial14bold2 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #915c35;
	text-decoration: none;
}	.arial13bolditalic {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-style: italic;
	line-height: normal;
	font-weight: bold;
	font-variant: normal;
	text-transform: none;
	color: #d05319;
	text-decoration: none;
}
.arial12 {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #d57642;
	text-decoration: none;
}


et voici le fichier .js

[#blue]
// JavaScript Document
<script language="JavaScript">
<!-- Begin

//rollover des boutons du haut

propos = new Image();
propos.src = "images/propos/bout_over.gif";

endermologie = new Image();
endermologie.src = "images/endermologie/bout_over.gif";

regime = new Image();
regime.src = "images/regime/bout_over.gif";

epilation = new Image();
epilation.src = "images/epilation/bout_over.gif";

joindre = new Image();
joindre.src = "images/joindre/bout_over.gif";

//rollover des vignette sur le coté

proposv = new Image();
proposv.src = "images/propos/vign_over.gif";

endermologiev = new Image();
endermologiev.src = "images/endermologie/vign_over.gif";

regimev = new Image();
regimev.src = "images/regime/vign_over.gif";

epilationv = new Image();
epilationv.src = "images/epilation/vign_over.gif";

end -->
</script>


l'adresse
silhouette-elegance

esperont avoir été asser clair

merci
Modifié par youpi0077 (19 Sep 2007 - 05:15)
Salut,

Pour favoriser l'accessibilité des site, il ne faut pas utiliser de tailles de texte en pixel, empêchant son redimensionnement sur Internet explorer.
Pour certains utilisateurs souffrant de handicaps, ou tout simplement qui ont les yeux fatigués, il est une nécessité de pouvoir agrandir le texte. Il ne faut pas les en priver !
Et pour un site commercial, empêcher le redimensionnement risque de faire fuir des clients potentiels !

L'idéal serait que ton site soit extensible en hauteur, le bloc blanc à coin arrondi s'allongeant vers le bas, pour accueillir tout son contenu sans qu'il déborde. Bien sûr cela va t'impliquer de revoir certaines choses dans ton site.

Sinon la solution de simplicité, mais qui présente un défaut d'ergonomie, c'est d'appliquer la propriété CSS sur le bloc blanc du contenu :
overflow: scroll;

Seulement, le défilement ne se fera plus que dans cette zone et non dans la totalité de la fenêtre du navigateur si ton site est fluide et s'allonge en fonction de la taille du contenu.
Sujet clos
Aller à