[Résolu] CSS taille "font" non conforme ??!! sous Firefox

Question

ThyBarth

18 Jun 2008 à 20:06

Bonsoir,

Le footer de mon site a un comportement bizarre... je m'explique sur www.trikketalk.fr, page d'accueil, la police fait une taille apparemment de 12 px, alors que sur les autres pages du site le texte du footer fait 9 px comme indiqué sur mon CSS.
Les autres pages respectent la norme de mon CSS. Bizarrement le problème est présent uniquement sous FireFox, sous IE7 et Opéra pas de problème Smiley rolleyes

Mon CSS en question:


body
{
width:800px;
height:100%;
margin-left:auto;
margin-right:auto;
background-image:url(images/fond_global.png);
background-repeat:repeat;
}

a
{ 
color:#000000;
text-decoration:none;
}

a:hover
{
text-decoration:underline;
color: #d6d70a;
}


#container
{
overflow:hidden;
width:800px;
/*min-height:800px;*/
margin-top:2px;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
position:relative;
padding:10px;
background-image:url(images/fond.png);
background-repeat:repeat;
border:1px solid #000000;
}

#header
{
width:800px;
height:120px;
top:0px;
margin-left:auto;
margin-right:auto;
background-image:url(images/header.png);
background-repeat:no-repeat;
border:1px solid #333333;
}

#barre_menu
{
width:100%;
height:50px;
position:static;
margin-top:5px;
left: 75px;
}

.menu4 {padding:0 0 0 1em; margin:0; list-style:none; height:35px; background:url(pro_four0.gif);}
.menu4 li {float:left;}
.menu4 li a {display:block; float:left; height:35px; line-height:33px; color:#aaa; text-decoration:none; font-family:Tahoma, verdana, sans-serif; text-align:center; padding:0 0 0 14px; cursor:pointer; font-size:11px;}
.menu4 li a b {float:left; display:block; padding:0 28px 0 14px;}
.menu4 li.current a {color:#fff; background:url(pro_four2.gif);}
.menu4 li.current a b {background:url(pro_four2.gif) no-repeat right top;}
.menu4 li a:hover {color:#fff; background: url(pro_four1.gif);}
.menu4 li a:hover b {background:url(pro_four1.gif) no-repeat right top;}
.menu4 li.current a:hover {color:#fff; background: url(pro_four2.gif); cursor:default;}
.menu4 li.current a:hover b {background:url(pro_four2.gif) no-repeat right top;}


#menu
{
width:20%;
float:left;
}

ul
{
list-style-image:url(images/3CV16.png);
}

.sous_menu
{
margin-top:20px;
background-image:url(images/case.png);
color:#000000;
border:1px solid #333333;
font-family:Tahoma, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}

h4
{
text-align:center;
}

.sous_menu2
{
margin-top:20px;
background-color:#FFFFFF;
border:1px solid #333333;
color:#000000;
padding:10px;
font-family:Tahoma, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-align:center;
}

.sous_menu3
{
margin-top:20px;
background-color:#FFFFFF;
border:1px solid #333333;
color:#000000;
padding:10px;
font-family:Tahoma, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-align:justify;
}

.sous_menu4
{
margin-top:20px;
background-image:url(images/case.png);
background-repeat:no-repeat;
border:1px solid #333333;
color:#000000;
padding:10px;
font-family:Tahoma, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-align:justify;
}

.sous_menu5
{
margin-top:20px;
width:100%;
height:100%;
font-family:Tahoma, Helvetica, sans-serif;
font-size:12px;
text-align:justify;
color:#000000;
text-align:center;
padding:0px;
}


#up_left
{
margin-top:20px;
margin-left:22%;
width:40%;
background-image:url(images/case.png);
padding:10px;
border:1px solid #000000;
font-family:Tahoma, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}

#up_left2
{
width:780px;
margin-top:20px;
margin-left:auto;
margin-right:auto;
/*width:40%;*/
background-image:url(images/case.png);
padding:10px;
border:1px solid #000000;
font-family:Tahoma, Helvetica, sans-serif;
font-size:12px;
color:#000000;
}


#corps
{
margin-left:22%;
margin-top:20px;
padding:10px;
border:1px solid #333333;
font-family:Tahoma, Helvetica, sans-serif;
font-size:12px;
color:#000000;
text-align:justify;
background-color:#FFFFFF;
}


#corps_links
{
margin-left:22%;
margin-top:20px;
padding:10px;
border:1px solid #333333;
text-align:left;
font-family:Tahoma, Helvetica, sans-serif;
font-size:12px;
color:#000000;
background-color:#FFFFFF;
}


#corps_forum
{
width:795px;
margin-left:0px;
margin-top:20px;
padding:10px;
border:1px solid #333333;
text-align:left;
font-family:Tahoma, Helvetica, sans-serif;
font-size:12px;
color:#000000;
background-color:#FFFFFF;
}

#corps_album
{
width:780px;
margin-left:0px;
margin-top:20px;
padding:10px;
border:1px solid #333333;
text-align:left;
font-family:Tahoma, Helvetica, sans-serif;
font-size:12px;
color:#000000;
background-color:#FFFFFF;
}


#compteur
{
margin-left:22%;
margin-top:20px;
padding:10px;
font-family:Tahoma, Helvetica, sans-serif;
font-size:14px;
border:1px solid #333333;
text-align:left;
background-image:url(images/case.png);
background-repeat:no-repeat;
}

#gost
{
margin-left:22%;
margin-top:20px;
width:780px;
min-height:500px;
padding:10px;
}

#footer
{
clear:both;
width:100%;
position:relative;
margin-top:5px;
padding-bottom:5px;
/*background-color:#CCCCCC;*/
padding:10px;
background-image:url(images/fond.png);
border:1px solid #333333;
font-family:Tahoma, Helvetica, sans-serif;
text-align:center;
font-size:9px;
}

...et le code de mon footer:

<div id="footer"> 
<p><a href="index.php">trikketalk.fr</a> © 2008 - Version 3.00 - ThyBarth - Official Trikke™ Affiliate</p>
<a href="http://www.xiti.com/xiti.asp?s=357313" title="WebAnalytics" target="_blank">
<script type="text/javascript">
<!--
Xt_param = 's=357313&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="http://logv145.xiti.com/g.xiti?'+Xt_param;
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>
<img width="80" height="15" src="http://logv145.xiti.com/g.xiti?s=357313&p=index" alt="WebAnalytics" />
</noscript>
</div>

Voilà, merci pour votre aide Smiley cligne

Modifié par ThyBarth (19 Jun 2008 - 19:00)

6l20

18 Jun 2008 à 21:06

Bonsoir ThyBarth,

Tu as ce petit chose qui est généré par deux fois dans ton footer (a priori uniquement sous Firefox... Smiley confuse

à confirmer...)

<font arial,="" sans-serif="" size="2" face="Tahoma,">

Je ne peux pas te dire d'où cela provient (javascript, PHP ?...) désolé Smiley decu

Cdt,
Sylvain

ThyBarth

18 Jun 2008 à 21:20

6l20 a écrit :
Bonsoir ThyBarth,

Tu as ce petit chose qui est généré par deux fois dans ton footer (a priori uniquement sous Firefox... à confirmer...)
<font arial,="" sans-serif="" size="2" face="Tahoma,">
Je ne peux pas te dire d'où cela provient (javascript, PHP ?...) désolé

Cdt,
Sylvain

Merci 6|20... je confirme "uniquement" sous FireFox 2 hier et Firefox 3 aujourd'hui Smiley cligne

Autrement j'ai fais une recherche sur mes lignes de codes, mais je n'ai pas trouvé celle indiquée ci-dessus Smiley confused

6l20

18 Jun 2008 à 22:39

ThyBarth,

Je me sers de la Web Developer Toolbar (plug-in pour Firefox) qui permet de voir le code source généré Smiley cligne

(En français ici a priori fonctionnelle sous FF3, mais je n'ai pas testé)

Si ce n'est pas ton script xiti qui génère cette mise en forme, fais-tu une inclusion php où ces paramètres traineraient ?

Cdt,
Sylvain

ThyBarth

18 Jun 2008 à 22:45

Justement j'ai également fais une recherche avec Wed Developer Toolbar (sous FF3) et je n'ai rien trouvé Smiley confused

J'ai justement supprimé l'include que j'utilisais auparavant pour mon pied de page Smiley cligne

6l20

18 Jun 2008 à 22:59

fvsch

19 Jun 2008 à 00:42

Bonjour,

Dit gentiment: le code HTML est relativement pourrave, en particulier pour tout ce qui touche les éléments FONT qui trainent dans le code (et plus largement les 93 erreurs HTML que retourne le validateur).

Il y a notamment ce genre de code:

<font face=Tahoma, Arial, Helvetica, sans-serif size=1>

qui sera interprété ainsi par le navigateur:

<font face="Tahoma," Arial,="" Helvetica,="" sans-serif="" size="1">

Il faut croire que Firefox a pris peur à force d'ignorer des attributs aussi farfelus que Arial,, Helvetica, et sans-serif. Smiley cligne

Solution: virer tous ces éléments FONT et passer par le CSS pour styler le texte. Ensuite, vérifier qu'il ne reste pas d'erreur HTML, notamment au niveau des imbrications de balises. On verra alors s'il reste un problème.

PS: le code relevé par 6l20 peut être celui donné par la Web Developer toolbar, Firebug, ou simplement la sélection de texte et clic-droit > code source de la sélection. Il ne s'agit pas du code brut de la page, mais de la manière dont il est interprété par le navigateur. Firebug et la Web Developer Toolbar ne lisent pas le code brut mais tapent directement dans le DOM.
Modifié par Florent V. (19 Jun 2008 - 00:44)

ThyBarth

19 Jun 2008 à 18:59

Bonsoir,

Bon j'ai réussi en partie à résoudre mon problème, la taille de la police du "footer" est enfin bonne... Smiley smile

il me reste encore 35 erreurs à corriger pour valider mon HTML Smiley confused

... Florent V. je vais essayer de rendre mon code HTML moins pourrave Smiley langue

Sujet clos

CSS et mise en forme, CSS3

[Résolu] CSS taille "font" non conforme ??!! sous Firefox