18041 sujets

Questions générales et questions de débutants

[résolu]Problème avec liens sous Firefox.

Encore est toujours moi...Je vais finir par devenir un "bon" du css.
Je pense qu'une image vaut plus qu'un long discour...donc voici mon soucis; je rencontre un souci avec mon css sous Firefox...Voici les différences :

IE:
http://img528.imageshack.us/img528/3946/ieej2.jpg

Firefox :
http://img528.imageshack.us/img528/1267/firefoxln7.png

Mon code html : 
<div class="actu_principale">
	<span class="titre_home"><img src="IMG/graphisme/fleche_verte.png" width="8" height="8"> Fernando Alonso remporte la course</span><br>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="60%"><img src="IMG/supprimer/actu_home.jpg" width="312" height="200"></td>
    <td width="40%" valign="top" bgcolor="#CCD544"><a href="#" class="lien_home">Comme nous vous l&rsquo;annoncions hier, Sakon Yamamoto participera bien aux derniers Grands Prix de la saison avec Spyker F1. L&rsquo;&eacute;curie n&eacute;erlandaise vient d&rsquo;officialiser ce recrutement.<br>
  Le pilote japonais, &acirc;g&eacute; de 25 ans, a fait ses d&eacute;buts en F1 en 2005 au sein de l&rsquo;&eacute;quipe Jordan mais il n&rsquo;occupait que le poste de pilote essayeur.l&rsquo;&eacute;quipe Jordan mais il n&rsquo;occupait que le poste de pilote essayeur.</a></td>
  </tr>
</table>
	
	</div>


Mon code css pour le lien (sur le texte à fond vert) : 


a.lien_home
{
	font-family: verdana;
	font-size: 11px;
	color: black;
	text-decoration: none;
	font-style: normal;
}
a:hover.lien_home
{ 	
    color: white;
	font-family: verdana;
	font-size: 11px;
}


Merci une fois de plus pour votre aide Smiley cligne
Modifié par twin (31 Jul 2007 - 19:26)
Bonjour,

Comme tu l'auras remarqué, la différence réside principalement dans la hauteur de ligne du texte. Celle-ci peut se régler avec line-height, par exemple.

Est-ce que tu as quelque chose de ce genre dans ta feuille de style?
body {line-height: 1.3em;}


Par ailleurs, de telles différences sont rares. On peut voir la page, histoire de voir si on peut débusquer leur origine?
Merci pour ta réponse...dans ma page j'ai :
line-height: 23px ;
Mais je ne peux pas le supprimer...et même en supprimant le résultat est le même...Si sa peux aider; voici ma feuille de style : 
/*Début Menu header */
body {
  background-image: url("fond.gif" );
  background-repeat: repeat;
  background-color: #DEDBDB;
  float: right;
}
ul#menu
{
	margin: 0 ;
	padding: 0 ;
	list-style-type: none ;
	
/* Suppression du margin, du padding et des puces du <ul> */
}
.lien_menu {
	font-family: verdana;
	font-size: 13px;
	font-weight: bold;
}

ul#menu li
{
	margin: 0 0 0px 0;
	padding: 0;
	vertical-align: baseline;/* Suppression du padding du <li> et on définit une marge basse de 5px pour aérer le tout */
	float: left;
}

ul#menu li a
{
	display: block ; /* On passe les liens en éléments de type block pour leur donner des propriétés de taille */
	width: 135px ;
	line-height: 23px ;
	color: #000 ;
	text-align: center ;

	text-decoration: none ;
	background: url(IMG/graphisme/bouton_gris.jpg) no-repeat 0 0 ; /* On met une image de background, que l'on positionne à 0px du bord gauche et 0px du bord haut */
	border: 0px ;
}

ul#menu li a:hover
{
	background: url(IMG/graphisme/bouton_vert.jpg) no-repeat 0 0px ; /* Et ici on décale l'image du background de 30px vers le haut pour laisser apparaître la 2eme partie de l'image */
	border: 0px  ;
}
/*Fin Menu header */

/*Debut menu gauche*/
.lien_menu_gauche {
	font-family: verdana;
	font-size: 11px;
	font-weight: bold;
	text-align: center;
	color:#000;
	text-transform: uppercase;
}
#navlist li
{
display: inline;
/* for IE5 and IE6 */
}

#navlist
{

width: 135px;
/* to display the list horizontaly */
font-family: verdana;
margin: 0 0 0 0em;
padding: 0;
}
.lien_menu_g {
	font-family: verdana;
	font-size: 12px;
}

#navlist a
{
/* extend the sensible area to the maximum with IE5 */
padding:2px;
display: block;
border-bottom: 1px #999 solid;
text-align: left;
text-decoration: none;
color: #000;
}

#navlist a:hover { background-color: #CCD544; }
#navlist a:visited { color: #000; }

/*Fin menu gauche*/

/*Début menu droite*/
.cat_droite {
	font-family: verdana;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	font-variant: small-caps;
}
.jour {
	font-family: verdana;
	font-size: 12px;
	font-style: italic;
	font-weight: bold;
	font-variant: small-caps;
}
.liste_essais {
	font-family: verdana;
	font-size: 10px;
}
/*Fin menu droite*/
/*Début Lien images*/
a img {
 border:0px;
}
a:hover img {
 border:0px;
}
/*Fin Lien images*/
/*Copyright*/
copyright {
	font-family: verdana;
	font-size: 9px;
	color: #666666;
}
/*Contenu accueil*/
.actu_principale {
	width: 98%; /* Nos images de fond auront 220px de largeur */
	background-position: center bottom;
	border: solid 1px #000000; /* Pour voir les limites du bloc */
}
.titre_home {
	font-family: verdana;
	font-size: 14px;
	font-style: italic;
	font-weight: bold;
	font-variant: small-caps;
	color: #CCD544;
}

a.lien_home {
	font-family: verdana;
	font-size: 11px;
	color: black;
	text-decoration: none;
	font-style: normal;
}
a:hover.lien_home {
    color: white;
	font-family: verdana;
	font-size: 11px;
}
C'est juste la nouvelle version de ToileF1 sur laquel je travail...
Mais je ne comprend pas pourquoi tu es tombé la dessus, car pour ma nouvelle feuille de style, je suis repartie de rien...

Enfin bref...trouve toujours pas ;'(
Modifié par twin (31 Jul 2007 - 13:02)
twin a écrit :
Merci pour ta réponse...dans ma page j'ai :
line-height: 23px ;

Uniquement pour les liens du menu. Pas pour toute la page (via body), ni pour le texte des tableaux, ni celui des paragraphes, etc.

Par ailleurs, tu as un body flottant, c'est normal? Smiley sweatdrop
Ouais, c'est normal...mais je vais surement directement ajouter une image de fond...
Mais d'ou peut venir mon problème ? Je ne cesse de regarder sur Google; mais sans aucune réponse. J'ai "retourné" mon code css & html; et toujours aucun changement. Je ne suis pas certains de tous comprendre...
twin a écrit :
Ouais, c'est normal...

Ah... Smiley sweatdrop
Je suis perplexe. Smiley confuse

twin a écrit :
Je ne suis pas certains de tous comprendre...

Ben tu n'as toujours pas essayé d'appliquer un line-height, si?

Par ailleurs, deux questions:
1 - ton code HTML est valide?
2 - on peut voir la page en ligne?
Justement je fais en sorte que le code html soit valide...
Je viens d'appliquer :
line-height: 0.8em; (et la le texte se place comme je veux sous Firefox et IE); mais sa décale une grosse partie de ma page...et les textes se retrouve tous très proche...
Et si j'applique cela uniquement à mon lien, cela ne fonctionne pas.

Y a-t-il une autre solution ?

Pour la page html, je suis en local et avec spip, donc pas évident de la mettre en ligne. Je peux toujours te donner le code de la page; mais il y a plusieurs include dedans...

#CACHE{7200}
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html dir="#LANG_DIR" lang="#LANG">
<head>
<title>ToileF1.com : Vivez votre passion au quotidien !</title>
[<meta name="description" content="(#DESCRIPTIF_SITE_SPIP|couper{150}|textebrut)" />]
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="945" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="4"><INCLURE{fond=header}{style}></td>
  </tr>

  <tr>
    <td width="135" valign="top" bgcolor="#ECECEA"><INCLURE{fond=menu_gauche}{style}></td>
    <td colspan="2" valign="top" bgcolor="#FFFFFF">
	<!--Début Info principale-->
	
	<div class="actu_principale">
	<span class="titre_home"><img src="IMG/graphisme/fleche_verte.png" width="8" height="8"> Fernando Alonso remporte la course</span><br>
	<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="60%"><img src="IMG/supprimer/actu_home.jpg" width="312" height="200"></td>
    <td width="40%" valign="top" bgcolor="#CCD544"><a href="#" class="lien_home">Comme nous vous l&rsquo;annoncions hier, Sakon Yamamoto participera bien aux derniers Grands Prix de la saison avec Spyker F1. L&rsquo;&eacute;curie n&eacute;erlandaise vient d&rsquo;officialiser ce recrutement.<br>
  Le pilote japonais, &acirc;g&eacute; de 25 ans, a fait ses d&eacute;buts en F1 en 2005 au sein de l&rsquo;&eacute;quipe Jordan mais il n&rsquo;occupait que le poste de pilote essayeur.l&rsquo;&eacute;quipe Jordan mais il n&rsquo;occupait que le poste de pilote essayeur.</a></td>
  </tr>
</table>
	
	</div>
	<!--Fin Info principale-->
	<!--Fin Infos sous principale-->
	<div class="actu_principale">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="3%" bgcolor="#CCD544">&nbsp;<img src="IMG/graphisme/md_fleche_noir.png" width="5" height="8"></td>
    <td width="97%" bgcolor="#CCD544"  class="jour"> La scuderia Ferrari am&eacute;liore ses pneumatiques </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td> <a href="#" class="sslien_home">Comme nous vous l&rsquo;annoncions hier, Sakon Yamamoto participera bien aux derniers Grands Prix de la saison avec Spyker F1. L&rsquo;&eacute;curie n&eacute;erlandaise vient d&rsquo;officialiser ce recrutement.
    </a></td>
  </tr>
</table>

	</div>
	<!--Fin Infos sous principale-->
	</td>
    <td width="300" valign="top" bgcolor="#ECECEA"><INCLURE{fond=menu_droite}{style}></td>
  </tr>
  <tr>
    <td bgcolor="#ECECEA">&nbsp;</td>
    <td width="469" bgcolor="#ECECEA">&nbsp;</td>
    <td width="41" bgcolor="#ECECEA">&nbsp;</td>
    <td bgcolor="#ECECEA">&nbsp;</td>
  </tr>
</table>
</body>
</html>
edit :

J'ai trouvé, j'ai ajouté
line-height: 0.8em;
dans .actu_principale Smiley cligne

Merci à vous !

.actu_principale {
width: 99%; /* Nos images de fond auront 220px de largeur */
background-position: center bottom;
border: solid 1px #000000; /* Pour voir les limites du bloc */
line-height: 0.8em;
}
Modifié par twin (31 Jul 2007 - 19:10)
bonjour,

en même temps, il est étrange que tu spécifies la taille de tes caractères en "px" et le line-height en "em", ce qui risque de poser ensuite des problèmes de rendu suivant l'utilisateur.
Voila c'est mis...
Mince, je ne savais pas que sa pouvais poser des soucis.
Comment convertir la taille en pixel à em ?
Car si j'essaye de retrouver les mêmes tailles, je risque de rencontrer certains décalage...
Sujet clos
Aller à