Pb CSS

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Répondre
O.rey

Pb CSS

Message par O.rey »

Bonjour,

Je suis en train de construire une page avec CSS, et trés bizarrement, tout marche quand je teste avec IE (6) mais pas avec Mozille (VF 1.3.1) !!!

Pour résumer, dans la feuille de style j'ai mis un sélecteur .menu (en plus des formats généraux pour tout le site) , et dans la page HTML quand je passe un <P class="menu"> IE prend les formats décrits dans la CSS mais pas Mozilla, qui ne prend que les formats généraux.

Bizarre, non ?
Lemm
Arias
Messages : 18
Inscription : 28 juil. 2003, 16:05

Message par Lemm »

A ta place j'aurai plutôt utilisé ceci comme syntaxe :

Code : Tout sélectionner

<p><span class="menu"> . . . . . </span></p>
Comme c'est conseillé ici
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message par Benoit »

Et moi à ta place j'aurais posté dans Développement web ;)
J'ai déplacé le sujet.

Je ne suis pas d'accord pour l'ajout d'un span dans ce cas-ci, je verrais plutôt un div autour (un menu est un bloc en général).

Mais ça n'explique pas pourquoi ton style ne fonctionne pas, vérifie que tu n'as aucun message d'erreur dans la console JavaScript (comme par exemple un mauvais type MIME pour le fichier CSS) et de préférence donne-nous le code source complet ou un lien vers la page, sinon c'est difficile de deviner ce qui ne va pas.
Invité

Message par Invité »

Benoit a écrit :
Je ne suis pas d'accord pour l'ajout d'un span dans ce cas-ci, je verrais plutôt un div autour (un menu est un bloc en général).

Mais ça n'explique pas pourquoi ton style ne fonctionne pas, vérifie que tu n'as aucun message d'erreur dans la console JavaScript (comme par exemple un mauvais type MIME pour le fichier CSS) et de préférence donne-nous le code source complet ou un lien vers la page, sinon c'est difficile de deviner ce qui ne va pas.
Je vais venir au DIV, mais là, j'en profitais pour ré-apprendre le CSS pas à pas (en suivant les exemples openweb) .

Le fichier CSS donne cela :
BODY {color: #5B5B5B ;
font-family : "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
} ;

.menu { margin-left: 15% ; margin-right: 15% ;
font-weight: bolder } ;
et la page HTML :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>

<head>
<title>Sans Titre</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="generator" content="HAPedit 2.6">
<LINK rel="stylesheet" href="vienne.css" type="text/css">
</head>
<body bgcolor="#FFFFFF">

<p class=menu>
Vivre Vienne </p>


</body>
</html>
Bobe
Iguane
Messages : 742
Inscription : 28 juil. 2003, 21:29

Message par Bobe »

Lemm a écrit :A ta place j'aurai plutôt utilisé ceci comme syntaxe :

Code : Tout sélectionner

<p><span class="menu"> . . . . . </span></p>
Comme c'est conseillé ici
On doit pas lire la même chose.. où est ce conseillé ?
« La vie d’un geek est un combat perpétuel contre l’imperfection »
Lemm
Arias
Messages : 18
Inscription : 28 juil. 2003, 16:05

Message par Lemm »

Anonymous a écrit :Le fichier CSS donne cela :(...)
Essayes comme ça (je sais pas pourquoi ça marche pas dans l'autre sens) :

Code : Tout sélectionner

.menu {
	font-weight: bolder;
	margin-left: 15% ; 
	margin-right: 15% ;
} ;
body {color: #5B5B5B ;
font-family : "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
} ; 
et

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Sans Titre</title>
  <meta http-equiv="content-type"
 content="text/html; charset=iso-8859-1">
  <meta name="generator" content="HAPedit 2.6">
  <link href="viennes.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="menu">
Vivre Vienne</p>
</body>
</html>
PS: Merci Bobe d'avoir trouver une super solution au problème... tss tss tss
Invité

Message par Invité »

Essayes comme ça (je sais pas pourquoi ça marche pas dans l'autre sens) :

Code : Tout sélectionner

.menu {
	font-weight: bolder;
	margin-left: 15% ; 
	margin-right: 15% ;
} ;
body {color: #5B5B5B ;
font-family : "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
} ; 
et

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <title>Sans Titre</title>
  <meta http-equiv="content-type"
 content="text/html; charset=iso-8859-1">
  <meta name="generator" content="HAPedit 2.6">
  <link href="viennes.css" rel="stylesheet" type="text/css">
</head>
<body>
<p class="menu">
Vivre Vienne</p>
</body>
</html>
PS: Merci Bobe d'avoir trouver une super solution au problème... tss tss tss[/quote]


Merci de l'effort. Cela fonctionne mais partiellement : les spécifications du Body sont ignorées (du moins la couleur à premier vue).
Tout se passe comme si Mozilla ne prenait que le premier sélecteur en ignorant les autres.
En tout cas, c'est embêtant conceptutellement, même si pratiquement, on peut s'en tirer en faisant plusieurs fichiers CSS.
Je suis néophyte en la matière, mais il faudrait qu'un pro identifie le problème quand même, car cela fait tâche que Mozilla soit moins cool qu'IE avec les spécifications CSS ...
olab
Varan
Messages : 1254
Inscription : 30 juil. 2003, 20:20

Message par olab »

Anonymous a écrit : Merci de l'effort. Cela fonctionne mais partiellement : les spécifications du Body sont ignorées (du moins la couleur à premier vue).
Tout se passe comme si Mozilla ne prenait que le premier sélecteur en ignorant les autres.
En tout cas, c'est embêtant conceptutellement, même si pratiquement, on peut s'en tirer en faisant plusieurs fichiers CSS.
Je suis néophyte en la matière, mais il faudrait qu'un pro identifie le problème quand même, car cela fait tâche que Mozilla soit moins cool qu'IE avec les spécifications CSS ...
Hello,

je viens de tester avec ça (pareil que le code qu'on t'a donné) :

Code : Tout sélectionner

.menu {
   font-weight: bolder;
   margin-left: 15%;
   margin-right: 15%;
}
body {
	color:#5B5B5B;
	font-family : "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
}
Sous moz1.5a et Fb0.6.1+ et ça marche (tout)
Par contre regarde bien, tu fais un <link href="viennes.css" rel="stylesheet" type="text/css">
Vérifie que c'est pas vienne.css et pas viennes.css ...

Olivier
Lemm
Arias
Messages : 18
Inscription : 28 juil. 2003, 16:05

Message par Lemm »

Anonymous a écrit :Merci de l'effort. Cela fonctionne mais partiellement : les spécifications du Body sont ignorées (du moins la couleur à premier vue).
Tout se passe comme si Mozilla ne prenait que le premier sélecteur en ignorant les autres.
En tout cas, c'est embêtant conceptutellement, même si pratiquement, on peut s'en tirer en faisant plusieurs fichiers CSS.
Je suis néophyte en la matière, mais il faudrait qu'un pro identifie le problème quand même, car cela fait tâche que Mozilla soit moins cool qu'IE avec les spécifications CSS ...
Voilà, il semble qu'il soit obligatoire de spécifier background-color: quand on met color: et l'inverse aussi!

Code : Tout sélectionner

.menu {
	font-weight: bolder;
	margin-left: 15%;
	margin-right: 15%;

}

body {
	background-color: #ffffff;
	color: #5B5B5B;
	font-family: "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
}
Et ça marche :-)
Bobe
Iguane
Messages : 742
Inscription : 28 juil. 2003, 21:29

Message par Bobe »

Lemm a écrit : PS: Merci Bobe d'avoir trouver une super solution au problème... tss tss tss
quoi ? tu dis quelque chose de faux, il me semble normal de pointer du doigt l'erreur.

Pour le css qui foirait, je viens de m'en rendre compte, ça vient des ; qui suivaient les fermetures d'accolades (alors qu'il ne devrait pas y en avoir) ce qui a dù occasionner ces comportements étranges
.menu {
font-weight: bolder;
margin-left: 15% ;
margin-right: 15% ;
} ;
body {color: #5B5B5B ;
font-family : "Trebuchet MS", Verdana, Geneva, Arial, Helvetica, sans-serif;
} ;
lemm a écrit : Voilà, il semble qu'il soit obligatoire de spécifier background-color: quand on met color: et l'inverse aussi!
pas obligatoire, mais conseillé
« La vie d’un geek est un combat perpétuel contre l’imperfection »
Invité

Message par Invité »

Pour le css qui foirait, je viens de m'en rendre compte, ça vient des ; qui suivaient les fermetures d'accolades (alors qu'il ne devrait pas y en avoir) ce qui a dù occasionner ces comportements étranges
Ouiiiii !

Voilà la solution qui marche !

Et vous savez pourquoi je mettais ces points-virgules ?

Une raison bête : à force d'écrire du PHP.

Une raison plus gênante : par assimiliation auxexemples présentées par Laurent Denis sur Open Web
http://openweb.eu.org/articles/initiation_css/ .... :oops:
Benoit
Administrateur
Messages : 4894
Inscription : 19 juil. 2003, 10:59

Message par Benoit »

Anonymous a écrit :Une raison plus gênante : par assimiliation auxexemples présentées par Laurent Denis sur Open Web
http://openweb.eu.org/articles/initiation_css/ .... :oops:
Tu pourrais peut-être écrire à l'auteur pour signaler la confusion possible.

Quoique j'ai écrit il y a plus d'un mois à l'auteur de XHTML en une heure pour lui signaler que ses exemples sur l'utilisation de l'attribut alt étaient un peu douteux et que ça a toujours pas été fait :)
fredchat
Lézard à collerette
Messages : 286
Inscription : 15 juil. 2003, 18:04

Message par fredchat »

Bobe a écrit :ce qui a dù occasionner ces comportements étranges
Comportement standard de Mozilla, comportement bogué (qui a dit normal ?) de ie.
Bobe
Iguane
Messages : 742
Inscription : 28 juil. 2003, 21:29

Message par Bobe »

Anonymous a écrit : Une raison bête : à force d'écrire du PHP.
même en php, y a pas de point virgule après une accolade ;)
Comportement standard de Mozilla, comportement bogué (qui a dit normal ?) de ie.
oui, je suis d'accord. Ma phrase signifiait plutot "résultat différent du résultat attendu"
« La vie d’un geek est un combat perpétuel contre l’imperfection »
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 6 invités