Rechercher : dans
Par :

CSS line-height ne fonctionne pas sr Firefox

Dernière réponse le 26 jui 2009 à 23:13:49 jpaul_web, le 24 jui 2009 à 16:02:37 
 Signaler ce message aux modérateurs

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 (avec et sans)

Configuration: Windows XP
Firefox 3.0.12

Meilleures réponses pour « CSS line height ne fonctionne pas sr Firefox » dans :
Linux - Ubuntu - Installer Firefox 3.5 Voir Ubuntu 9.04 est fourni avec Firefox 3.0.x. Canonical n'envisage pas de mettre automatiquement Firefox 3.5. Cependant, il est facile de profiter de Firefox 3.5: Il est en effet présent dans les dépôts. NB: Il semble que les dépôts officiels...
Installer Flash (SWF) dans Firefox VoirPar défaut, Firefox n'est pas fourni avec le plugin Flash, ce qui est gênant pour voir certains sites (comme YouTube par exemple). Voici comment procéder: Installation automatique Ouvrez un terminal (Menu Applications > Accessoires > Terminal) et...
[Pratique] Gérer les profils Firefox, Thunderbird, Seamonkey VoirGérer les profils de Firefox, Thunderbird, Seamonkey 1 - Gestionnaire de profils 1.1 - Windows 1.2 - Linux 2 - Les fichiers récupérables 2.1 - Où les trouver ? 2.2 - Quels fichiers sont intéressants ? 3 - Compléments...
Les profils de Firefox VoirVoilà une astuce très intéressante qui permet de gérer les profils de Firefox. Dès l'installation de Firefox sur votre PC (peu importe le système d'exploitation), ce dernier créera automatiquement un profil Par défaut pour votre...
Déclaration d'une feuille de style (CSS) VoirDéclaration d'une feuille de style Les feuilles de style sont un sur-ensemble du langage HTML, cela signifie qu'elle ne sont pas intégrées directement dans les recommandations HTML du W3C. Ainsi, il est nécessaire de renseigner le code HTML avec...
Les feuilles de style VoirPropriétés de polices Propriété Valeur Description font-family Police précise (Arial, Times, Verdana) Famille (serif, sans-serif, fantasy, monospace, cursive) Définit un ou plusieurs nom de polices ou de familles de...
Feuilles de style - CSS VoirPrésentation des feuilles de style Le concept de feuilles de style est apparu en 1996 avec la publication par le W3C d'une nouvelle recommandation intitulée « Cascading StyleSheets » (feuilles de style en cascade), notée CSS. Le principe des...

1

le hollandais volant, le 24 jui 2009 à 16:07:00

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? Windows : il y a mieux... mais c'est moins cher.

Répondre à le hollandais volant

2

jpaul_web, le 25 jui 2009 à 10:20:38

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

Répondre à jpaul_web

3

le hollandais volant, le 25 jui 2009 à 13:59:01
  • +1

Euh…
Je ne vois pas de différences : http://www.cijoint.fr/cj200907/cijGUfuxPv.png
Windows : il y a mieux... mais c'est moins cher.

Répondre à le hollandais volant

4

jpaul_web, le 25 jui 2009 à 14:26:48

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

Répondre à jpaul_web

5

le hollandais volant, le 25 jui 2009 à 15:12:14
  • +1

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^^ Windows : il y a mieux... mais c'est moins cher.

Répondre à le hollandais volant

6

jpaul_web, le 26 jui 2009 à 09:29:54

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

Répondre à jpaul_web

7

jpaul_web, le 26 jui 2009 à 11:40:31

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

Répondre à jpaul_web

8

le hollandais volant, le 26 jui 2009 à 13:58:04

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
<!--[if lte IE 7]> bla bla bla <![endif]-->


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 : "<!--[if IE]> … <![endif]-->"

Il existe tout un tas d'options : (voir )

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 "<head>" tu met
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="indexIE.css" />
 <![endif]-->
pour une feuille CSS spéciale IE

et
<!--[if !IE]> <-->
<link rel="stylesheet" type="text/css" href="index.css" />
<!--><![endif]-->

pour une feuille CSS "normale"
Windows : il y a mieux... mais c'est moins cher.

Répondre à le hollandais volant

9

jpaul_web, le 26 jui 2009 à 22:11:48

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 <div>??? qui elle varie sous Firefox...
JP

Répondre à jpaul_web

10

le hollandais volant, le 26 jui 2009 à 22:19:16

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… Windows : il y a mieux... mais c'est moins cher.

Répondre à le hollandais volant

11

jpaul_web, le 26 jui 2009 à 22:54:08

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

<!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">

Merci

Répondre à jpaul_web

12

 le hollandais volant, le 26 jui 2009 à 23:13:49

Ok!

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

Derien^^ Windows : il y a mieux... mais c'est moins cher.

Répondre à le hollandais volant