CSS line-height ne fonctionne pas sr Firefox Résolu/Fermé

Question

Bonjour,
Le code line-height ne fonctionne pas sur Firefox mais bien sur Ei.
Merci de m'apporter une précision à ce sujet.
voir différence: http://www.biereau.be/presentation.php (avec et sans)

le hollandais volant · Answer

Salut!
Le code line height marche très bien sous Firefox, je l'utilise^^"

Peux tu nous dire à quel endroit sur le site y'a le problème?

jpaul_web · Answer

Si tu regardes sur la page d'accueil, dans l'Actualité du Biéreau. 
Sur EI, les lignes sont condensées et sur Firefox, il n'y a pas de changement.
code: .petittexte_1em {
	font-size: 12px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #333333;
	line-height: 1em;
}
Merci

le hollandais volant · Answer

euh…
Je ne vois pas de différences : http://www.cijoint.fr/cj200907/cijGUfuxPv.png

jpaul_web · Answer

Voila ce que ça donne chez-moi:
http://www.biereau.be/ecran.html
JP

le hollandais volant · Answer

okok

Je vois : tu utilises la version 7 de internet explorer. Niveau compatibilité, il est le dernier de tous les navigateurs (sauf IE 6)

Suffit de voir là : http://acid3.acidtests.org/ (le test ACID-3 : une note sur 100 où 100 est la note maximale. IE 7 obtient 15 je crois. Firefox : 93).

Le plus bas de tous les navigateurs courants est firefox 3.0 : 71. (la toute derniere version de chaque navigateur (Chrome, Safari, Opera sont à 100/100. Firefox 3.5 à 93 et Internet Explorer 8 est à 25.)


Je te conseille de mettre à jour vers IE8. S'il est loin d'obtenir une note correcte au test ACID, il est un peu mieux que IE7.

Mais rassures toi, ton CSS est correcte. La faute viens de IE7. Si tu veux que la hauteur des lignes soit de sorte que les lignes de textes soient "collées", voilà le CSS : 

.petittexte_1em {
	font-size: 12px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #333333;
}

juste supprimer le "line-height". Je pense que si tu le met à zéro, les lignes seront complètement collés. Donc pas beau. Tu peux éssayer de mettre 0.8em ou 0.7em. À tester.



PS : super class ta barre en haut^^
Je vais éssayer de faire de même sous Ubuntu^^

jpaul_web · Answer

Merci pour ta réponse super détaillée....
Je me doutais que mon Ie n'était pas de tout dernière version... Je ne l'utilise que pour tester mon site! Mais une mise à jour s'impose.
Mais les line-height ne fonctionnent pas sur Firefox, je trouve que les lignes sont trop écartées...
Est-ce un problème d'entête? Mais si je la change c'est mon menu déroulant qui déconne sur Ie...
Je peux éventuellement faire un test d'explorateur, mais dans ce cas je dois passer toutes mes pages en PHP
JP

jpaul_web · Answer

Il y a peut-être un conflit dans mon CSS qui n'est pas détecté par Ie7...
Je te mets mes codes CSS à tout hasard... 
code principal: body {
	margin: 0;
	padding: 0;
	color:#000000;
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	font-size: 13pt;
	text-align: left;
	background-color: #F3FFF0;
	line-height: normal;
}

td {
	font-family: Verdana, Geneva, Arial, helvetica, sans-serif;
	font-size: 13pt;
	text-align: left;
  }

img {border: none;}

a {
	color: #35B;
	text-decoration: none;
	}
a:hover {
	color: #FF0000;
	}

#page {
	background-color:#FFF;
	border: solid 1px #CCC;
	border-top: none;
	background-color: #FFF;
	width: auto;
	margin: 0 auto 16px auto;
	border-left: 1px solid #777;
	border-right: 1px solid #777;
	padding: 0;
	text-align: left;
	}






#side {
	width: 180px;
	float: right;
	margin:0;
	padding: 5px 10px 5px 10px;
}

#main {
	width: 676px;
	float: left;
	margin:0;
	padding: 7px;
	text-align: justify;
}

#break {
	clear: both;
}



#top h1 {
	margin: 0;
	padding: 0 0 0 10px;
	color: #FFF;
	font-size: 24px;
}
#top h2 {
	margin: 0;
	padding: 4px 0 5px 10px;
	color: #EEF;
	font-size: 90%;
}

/* Menu */
.zul {
	padding: 0;
	margin: 10px 0 0 0;
	list-style: none;
	
}
.zli1,.zli2,.zli3,.zli4 {
	background-image: url(deco/pge0.png);
	background-repeat: no-repeat;
	padding-left: 14px;
		

}
.zon {
	background-image: url(deco/pge1.png);
}
.zli1 {
	margin-left: 0px;
}
.zli2 {
	margin-left: 16px;
}
.zli3 {
	margin-left: 32px;
}
.zli4 {
	margin-left: 48px;
}

/* styles zite */
#zadmin {
	border: 1px solid #CCC;
	background-color: #EEE;
	padding: 0 2px;
	margin: 3px 0 0 0;
}
.ztable {
	border: 1px solid #CCC;
	background-color: #EEE;
	padding: 0 2px;
	margin: 5px 0;
	width: 100%;
}
.zalert {
	border: 1px solid #C00;
	background-color: #FEA;
	padding: 0 2px;
}


input { font-size:12pt; font-family:Arial; }
textarea { font-size:12pt; font-family:Arial; }
select { font-size:12pt; font-family:Arial; }


h1 {font-size:25pt; font-weight:bold; font-family: Verdana, Arial, Helvetica, sans-serif ; color:#33CC00; text-align: center; }

h2 {
	font-size:20pt;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	color:#66FF99;
	margin-left:30px;
}

h3 {font-size:15pt; font-weight:bold; font-family:Arial, Helvetica, sans-serif; color:#000000; text-indent:0.5cm;}

h5 {font-size:8pt; font-weight:normal; font-family:Arial, Helvetica, sans-serif; color:#999999; text-align: center;}

h6 {
	font-size:15pt;
	font-weight:normal;
	font-family:Arial, Helvetica, sans-serif;
	color:#33CC00;
	text-align:justify;
	margin-left:80px;
	font-style: italic;
	line-height: 1.5em;
}
.minitexte {
	font-size: 9px;
	line-height: 1em;
	color: #999999;
}
.info1erepage {
	background-color: #FFFFFF;
	width: 258px;
	border: thin outset #CCCCCC;
	padding: 1;
	
}

.petittexte {
	font-size: 12px;
	font-family: Arial, Helvetica, sans-serif;
	color: #333333;
	line-height: 1em;
}
.Textemoyen {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
}

.date {
	font-size: 15px;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-style: italic;
	color: #66FF99;
}
.miseajour {
	font-size: 8px;
	line-height: 1em;
	color: #999999;
}
.petittitre-vert {
	font-size: 19px;
	font-family: Arial, Helvetica, sans-serif;
	color: #b8f9ac;
	font-weight: bolder;
	letter-spacing: 1%;
	margin-top: 1px;
}
.petittexte_1em {
	font-size: 12px;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	color: #333333;
	line-height: 1em;
}
.Titre_1ere_page {
	font-size: 20px;
	font-family: Arial, Helvetica, sans-serif;
	color: #33FF99;
	font-weight: bolder;
	text-shadow: 1 em;
	text-align: center;
}

Code du Menu : .menu{
	
	position:absolute;
	display:block;
	margin:0;
	padding:0;
	width:auto;
	left: auto;
	right: auto;
	vertical-align: middle;
	height: auto;
	font:Arial, Helvetica, sans-serif
	font-size:13pt;


    }

.menu ul{
    position:absolute;
    display:block;
    width:500px;
    /*margin:0;*/
    padding:0;
    font:Arial, Helvetica, sans-serif
	font-size:13pt;

	}
    
.menu li ul{
    visibility:hidden;
    }

.menu li li ul{
    position:absolute;
    margin-left:124px;
    margin-top:-23px;
    }
    
.menu li{
    list-style:none;
    width:124px;
    height:auto;
    display:inline;
    display/**/:block;
    float:none;
    float/**/:left;
    margin:0;
    padding:0;
    }
    
.menu li li{
	display:block;
	float:none;
	background-color: #CCCCCC;

    }
    
/* correct a little IE bug */
* html .menu li li{
	display:inline;

    }

.menu a{
    text-align:center;
    background-color: #33FF66;
    border:1px #666 solid;
    color:#000;
    display:block;
    width:120px;
    text-decoration:none;
    padding:2px 0;
    margin:1px;
    font:Arial, Helvetica, sans-serif
	font-size:13pt;
}
    
.menu a:hover{
    background-color: #eee;
    border:1px #aaa solid;
    font:Arial, Helvetica, sans-serif
	font-size:13pt;
}
    
.menu a:focus{
    background-color: #0066FF;
}

a.linkOver{
	background-color: #33FF66;
	background-image: none;

    }
entete {
	background-color: #CC0033;
}
Merci

le hollandais volant · Answer

Oulà… J'ai pas pris le temps de tout regarder, mais deux choses : à un moment, tu met ça : input { font-size:12pt; font-family:Arial; } textarea { font-size:12pt; font-family:Arial; } select { font-size:12pt; font-family:Arial; } tu peux le remplacer par :input, textarea, select { font-size:12pt; font-family:Arial; }C'est la même chose. Ensuite, pas la peine d'un test navigateur. Il se trouve depuis toujours, il y deux types de navigateurs. -Ceux qui respectent les standard : Tous sauf IE. -Et ceux qui ne les respectent pas : IE. Évidement, tout le monde utilise IE, donc on ne peut pas le négliger dans les fabrications de sites web… (Perso j'ai eu d'énormes problèmes pour mon site (menu css, positionnement, bordures, etc). Mais à l'époque où IE était encore pire que aujourd'hui (si si!) Microsoft à mis en place les commentaires conditionnels. C'est quoi? Dans un langage de programmation, les commentaires sont là pour aider l'utilisateur. Ils ne sont pas utilisé par le programme. Dans le HTML, les commentaires ne sont pas interprétés par le navigateur. Les commentaires conditionnels sont des commentaires comme un autre pour tous les navigateurs… Sauf pour IE! Qui lui seul les affichent!! Ainsi On peut mettre du code HTML entre commentaires conditionnels pour qu'il soit interprété par IE et pas les autres, ou au contraire permettre à tous de les afficher et pas IE. les commentaires conditionnels sont de la forme par exemple, le "blablabla" sera affiché par aucun navigateur mis à part IE 7 et les versions antérieurs (lt : "little" (petit) ; "e" (dans "lte" signifie "equal" donc "lte" est "plus petit ou égal" ; IE7 est la version.) Si tu veux faire un commentaire pour les versions plus récentes que IE5.5 : "gt IE 5.5" (plus récentes strictement, donc IE5.5 exclu) Pour faire in commentaire conditionnel pour tous les IE : "" Il existe tout un tas d'options : (voir là) J'en utilises quelques une sur mon site (voir lien dans mon profil) par exemple, affiches le site avec Firefox, puis avec IE7. Tu verra 2 différences : -un petit mot pour demander de laisser tomber IE et de mettre à jour ou changer. -dans firefox, il s'affichera une citation en haut à droite. Par ce que IE8 ne l'affichait pas correctement, je le cache aux utilisateurs de IE. Tu peux librement regarder dans les codes sources. Un dernier truc : les commentaires conditionnels ne s'appliquer qu'a du HTML, donc pas aux CSS!! mais y'a un moyen très simple. Dans le "" tu metpour une feuille CSS spéciale IE et pour une feuille CSS "normale"

jpaul_web · Answer

Merci pour toutes les infos... J'ai encore essayé... Mais rien à faire, j'ai beau changer mes valeurs, elles ne change que sur EI. sauf une mise entre des

??? qui elle varie sous Firefox... JP

le hollandais volant · Answer

Ce qui est étrange, chez moi les lignes sont de même taille sous Firefox que sous IE 7 et IE8…

Ma page est en XHTML 1.0 transitionnal…

jpaul_web · Answer

Merci pour l'info.. J'ai corrigé mon entête et sa fonctionne Merci

le hollandais volant · Answer

Ok!

Donc en HTML à marche pô, mais en xHTML si^^"

Derien^^

CSS line-height ne fonctionne pas sr Firefox

12 réponses

Discussions similaires