firefox ignore mon CSS sur 1 seule page...! Fermé

Question

Bonjour,

Problème :
Je suis en train d'écrire un site que j'ai à peu près réussi à configurer pour qu'il ait l'air potable sur firefox et IE seulement il y a 1 page en particulier où firefox refuse de charger ma feuille style CSS (sur IE, ca marche).

Voici la page en question : http://www.asian-graffi-tea.com/lirejaponais.html
(la particularité de cette page est de comporter des caractères japonais mais cela ne semble pas poser de problème en soi)

J'ai fait le test jigsaw.w3, il semble que pas de problème majeur sur la feuille de style.
J'ai essayé d'enlever/de remplacer toutes les parties du code html, rien ne change.
Je me suis dit que ça venait peut-être de l'en-tête :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML lang="ja">
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-language" content="ja">
<LINK rel="stylesheet" type="text/css" href="style/style.css" />
<TITLE>Asian Graffi Tea - Laeti's japanese corner</TITLE>
</HEAD>

que j'ai mis sur une autre page pour essayer mais là, la feuille CSS est quand même prise en compte...

Quand enfin, je me suis rendue compte que la seule différence entre cette page et les autres dans mon site est que je l'ai d'abord écrite sur Bloc Note (j'utilise Notepad++ pour les autres) pour pouvoir écrire en japonais (en effet sur Notepad++ c'était pas possible, pourtant bizarrement, il se met à lire les caractères japonais au bout d'un moment...?!), donc sur ce Bloc Note que j'ai sauvegardé en .html / Unicode pour pouvoir continuer à travailler avec le japonais. (Après j'ai réouvert et sauvegardé également cette page avec Notepad++). Ce qui m'a fait douter sur le bloc-note, c'est qu'après, j'ai fait une page test avec le bloc note où j'ai copié-collé les autres pages de mon site, et là firefox ne prenait plus en compte mon CSS...

Raaahhh, ça fait bien 4 heures que je me prends la tête... Je ne sais même pas si cette histoire de bloc note et probable et si oui, comment résoudre mon problème (si c'est genre une faute de frappe je me jette par la fenêtre :o) !).

Voilà sinon je vous mets quand même mon CSS si ça peut être utile. Je suis amateur et il doit bien y avoir quelques abérations dans mon code (j'avoue que j'ai essayé de bidouiller) donc n'hésitez pas à me reprendre si lieu est.

body {
height: 100%;
margin: 0;
padding: 0;
background-color: black;
text-align: center;
scrollbar-arrow-color:#feba1e;
scrollbar-base-color:#FFFFFF;
scrollbar-dark-shadow-color:#5F9F9F;
scrollbar-face-color:#FFFFFF;
scrollbar-shadow-color:#5F9F9F;
}

body#home {
background-image: url(../images/bgdtaches.jpg);
}

body#different {
background-image: url(../images/black.gif);
}

/********
**texte**
********/
.textnormal { font-size:14 ; color:#000000 ; font-family:arial, times new roman ; }
.texttitle { font-size:18 ; color:#856363; font-weight:bold ; font-family:tempus sans ITC, arial, times new roman ; font-style:italic ; }
.head { font-size:14 ; color:#545454 ; font-weight:bold ; font-family:arial; }
.cadre { font-size:14 ; color:#545454 ; font-weight:bold ; font-family:arial ; margin:2px ; padding:1px ; border-top:2px solid #313131 ; border-left:2px solid #313131 ; border-right:2px solid grey ; border-bottom:2px solid grey ; }
.textpost { font-size:12 ; font-family:arial ; color:#000000 ; }
.courier { font-size:14 ; font-family: courier new ; color:#000000 ; }
.title { font-size:18 ; color:#000000 ; font-weight:bold ; font-family:arial; }
.subtitle { font-size:12 ; color:#545454 ; font-weight:bold ; font-family:arial; }
.bigtext{ font-size:16 ; font-family:arial ; color:#000000 ; }

/********
**titre**
********/
.petittitre { font-size:22 ; color:#545454 ; font-weight:bold ; font-family:arial ; }
.grandtitre { font-size:40 ; color:#545454 ; font-family:arial ; text-align:center ; }

/*******
**lien**
*******/
a { color:#545454 ; text-decoration:none ; font-size:14 ; font-family:arial,franklin gothic book ; }
a:visited { color:#856363 ; }
a:hover { color:#856363; text-decoration:underline ; }
a:active { color:#856363 ; }

#main {
position: relative;
margin-left: auto;
margin-right: auto;
width: 900px;
height: auto !important;
min-height: 100%;
height: 100%;
background-color: white;
background-repeat: repeat;
background-image: url(../images/line.gif);
text-align:center;
}

#banner {
position: relative;
text-align:left;
margin-top: 0px;
margin-left: 15px;
}

#image {
position: relative;
margin-top: 40px;
margin-bottom: 20px;
}

#leftimage {
position: relative;
margin-top: 20px;
margin-bottom: 20px;
width: 70%;
text-align:center;
float: left;
}

#rightmenu{
position: relative;
text-align: left;
margin-top: 20px;
padding-right: 30px;
width: 25%;
float: right;
}

#menu2{
position: relative;
margin-top: 20px;
padding-left: 40px;
padding-right: 40px;
width: 95%;
text-align: left;
}

/*texte gauche avec petite image a droite*/

#menu3{
position: relative;
text-align: left;
margin-top: 20px;
padding-left: 60px;
padding-right: 20px;
width: 65%;
float: left;
}

#image3 {
position: relative;
margin-top: 20px;
width: 30%;
text-align:center;
float: left;
}

/*alignement de 4 colonnes*/
#column1{
position: relative;
margin-top: 20px;
padding-left: 20px;
width: 20%;
float: left;
text-align: left;
}

#column2 {
position: relative;
margin-top: 20px;
text-align: left;
width: 20%;
float: left;
}

#column3 {
position: relative;
margin-top: 20px;
text-align: left;
width: 20%;
float: left;
}

#column4{
position: relative;
margin-top: 20px;
text-align: left;
width: 20%;
float: left;
}

#about{
position: relative;
margin-right: 30px;
margin-top: 40px;
text-align: right;
}

#signature{
position: relative;
margin-right: 30px;
margin-top: 20px;
text-align: right;
}

/*deux colonnes alignées*/
#leftcolumn {
position: relative;
margin-top: 20px;
width: 45%;
text-align:left;
float: left;
padding-left: 60px;
padding-right: 20px;
border-right: 1px solid #856363;
}

#rightcolumn {
position: relative;
margin-top: 20px;
width: 45%;
text-align: left;
float: left;
padding-left: 20px;
padding-right: 20px;
}

.item {
margin-left: 2px;
margin-right: 2px;
}

#footer {
position: relative;
height: 60px;
background-color: white;
background-repeat: repeat;
background-image: url(../images/line.gif);
margin-left: auto;
margin-right: auto;
width: 900px;
clear:both; /*Place le pied en element flottant*/
}

notobe · Answer

Bonjour,

Plutôt que d'utiliser un charset=Shift_JIS, tu ferais mieux d'utiliser un utf-8. Là, tu n'aurais pas de problèmes avec notepad et ça passerait tout aussi bien.

Ce qu'il y a de curieux aussi, c'est que dès qu'on utilise la webdevelopper de firefox pour voir le code CSS, plus de problèmes !

Recode ta page en utf-8 (n'oublie pas de régler notepad dans ce sens, changer le charset ne suffit pas), et passe ta page au validateur (car là, ta page est en mode quirks en plus)
http://validator.w3.org/

laetichan · Answer

....encore moi!
Juste pour dire par contre que http://validator.w3.org/ dit :

 Byte-Order Mark found in UTF-8 File.

The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported. 

Je voudrais quand même en savoir plus sur le sujet. En fait, j'avais mis shift_JIS en me basant sur d'autres pages contenant du japonais. Quelles sont les différences concrêtes ? (de même pour le format du bloc note)...

notobe · Answer

Le message sur le utf-8 n'est qu'un avertissement. Mais là, j'avoue que je ne comprends pas exactement le problème.. (mon anglais est très mauvais ;) )

Cela dit, ton doctype n'est pas parfait. Il faut mettre :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	   "http://www.w3.org/TR/html4/loose.dtd">	
Ça réglera sans doute tes petits pbs de rendu qui persistent

D'autres petites erreurs aussi révélées par le validateur :
- comme tu codes en html 4.01 les balises non fermantes n'ont pas à être fermées (donc pas de / à la fin du link)
- tu ne peux pas avoir plusieurs id identiques dans la même page, il faut donc utiliser des class

RAD ZONE · Answer

Byte-Order Mark found in UTF-8 File.

The Unicode Byte-Order Mark (BOM) in UTF-8 encoded files is known to cause problems for some text editors and older browsers. You may want to consider avoiding its use until it is better supported.

Tu as sauvegarde ta page  en UTF-8  avec BOM  sur  notepad++ !!!

resauvegarde la en UTF-8  sans BOM

laetichan · Answer

Bonjour RADZONE,

En fait sur Notepad++ je ne trouve pas cette option. J'ai juste sauvegardé en utf-8 sous blocnote. Et d'ailleurs je ne sais pas ce que c'est BOM ? et où on peut choisir cette option...

notobe · Answer

Dans notepad++ tu vas trouver ton bonheur dans le menu format

laetichan · Answer

notobe :
Oui pardon, ct une faute, c bien "id" que j'ai rempacé par "class" mais alors là c devenu la foire compète dans ma page et depuis que j'ai rajouté "http://www.w3.org/TR/html4/loose.dtd" j'ai a nouveau le fameux pb du conteneur principal qui va pas jusqu'en bas et que j'ai passé tant de temps à essayer de résoudre déjà jusque là...
j'avoue que je suis un peu paumée là. :o)


Pour BOM j'ai effectivement changé a 'sans-BOM' dans format.

notobe · Answer

hummm...
Effectivement, comme ta page était en mode quirks (à cause du doctype mal écrit), tu t'es échinée à faire fonctionner un truc qui ne peut fonctionner, en gros, que sur explorer.
C'est décourageant, je sais :\

Je essayer de regarder ce qui ne va pas.

notobe · Answer

ah, ta page en ligne est tjs l'ancienne. Tu peux mettre la nouvelle version stp ?

laetichan · Answer

Edit :
pour la mise en page qui foire, j'avais oublié de fermer une div, autant pour moi.
Seul PB qui persiste et qui commence et m'énerver sec, c'est cette histoire de conteneur principal ("main") qui va pas jusqu'en bas (et pourtant la sur la version en ligne ca marche miraculeusement, je sais pas pourkoi)

Voici mon "main" dans mon CSS :

#main {
	position: relative;
	margin-left: auto;
	margin-right: auto;
	width: 900px;
	height: auto !important;
	min-height: 100%; 	
	height: 100%; 
	background-color: white;
	background-repeat: repeat;
	background-image: url(../images/line.gif);
	text-align:center;
}


mais si ca se trouve ca n'a rien a voir...

laetichan · Answer

Nouvelle version en ligne...
(merci de ta patience notobe !!)

RAD ZONE · Answer

??? avec ce html et css ca vas bien en bas ?? html Asian Graffi Tea - Laeti's japanese corner

クリスマス – Noël

☆

12月25日は、フランスでも、日本でも、…そう！クリスマスです。
フランスでは、昔からクリスマスを祝いますが、日本では、２０世紀からクリスマスが人気になりました。
フランスのクリスマスは、教会、プレゼント、サンタなどのイメージがありますが、日本のクリスマスは、カップルとロマンスのイメージがあります。24日、イブは、恋人と一緒に過ごします。一緒においしいレストランで食べて、プレゼントも交換します。
ロマンチックですね！
でも、恋人がいない人は、かわいそうですよね…

Noël est aussi la saison des illuminations, qui ont un succès fou. L'illumination Tokyo Millenario en 2005.

Vocabulaire

～でも même (moi), même en (France)
昔（むかし）autrefois
祝う（祝う）célébrer
世紀（せいき）siècle
～から depuis
人気（にんき）populaire, avoir du succès
なる devenir (s’utilise avec に)
教会（きょうかい）l’église
プレゼント cadeau
サンタ le Père Noël (de l’anglais « Santa Claus »)
など etc., entre autres
イメージ l’image
～が mais, bien que
カップル couple
イブ la veille de noël (de l’anglais « Eve »)
恋人（こいびと）amoureux, petit copain, copine
と一緒に（といっしょに）avec (quelqu’un)
おいしい bon (à manger)
交換する échanger
かわいそう mon pauvre, les pauvres !

Grammaire

* Particules de fin de phrase :
- ね Exclamation, s’attend à l’accord de l’interlocuteur 「-ひどいね！-ね！」 « - Qu’est-ce qu’il est moche (ce tableau) ! - Ouais ! »
- よ Exclamation, met en valeur mon point de vue par rapport à celui de l’interlocuteur「-ひどいよ！-え？」 « -C’est moche ce truc ! (c’est moi qui te le dis) – Ah bon… ? »
- よねDemande de confirmation de mon point de vue par l’interlocteur 「-ひどいよね！-ひどい！」 « - Qu’est-ce qu’il est moche (ce tableau) ! (il n’y a que moi qui pense ça ?) – Ah oui, c’est moche ! »
* 食べてLiasion de verbe, continuité de la phrase 食べてプレゼントを交換します。 On mange et on échange des cadeaux. S’utilise avec la forme verbale en る.
* とet や : や est plus général, signifie que la liste pourrait se continuer.

横浜 - Yokohama

☆☆☆

横浜は関東地方、東京の南にあります。
実は、けっこう新しい町です。2009年は横浜開港の150周年記念年でした。
元々、横浜は主に貿易のための町でした。浜辺に面して、町の形は長細かったから「横浜」と呼ばれました。
今、横浜はとても活発的な町です。横浜の主な観光スポットは、中華料理のレストランが並ぶ「中華街」と、遊園地もモダンなデパートもある「みなと未来」です。
ぜひ、横浜を訪れてみてください。

Minato mirai vu de la Landmark Tower, la tour la plus haute du Japon.

Vocabulaire

関東地方（かんとうちほう）La région du Kantô
実は（じつは）En fait, en réalité
けっこう assez (récent)
開港（かいこう) l’ouverture du port
港（みなと）le port
周年（しゅねん）Xième année
記念年（きねんどし）l’année commémorative de
元々（もともと）à l’origine, au départ
主に（おもに）principalement (adv.)　主な（おもな）principal (adj.)
貿易（ぼうえき）l’import-export
浜辺（はまべ）la plage
に面する（にめんする）en face de
形（かたち）la forme
長細い（ながほそい）long et fin
呼ぶ（よぶ）appeler
活発的な（かっぱつてきな）énergique

観光スポット（かんこうすぽっと）lieu touristique, coin à visiter
中華料理（ちゅうかりょうり）cuisine chinoise
並ぶ（ならぶ）s’aligner, (ici : « sont nombreux »)
中華街（ちゅうかがい）le quartier chinois
遊園地（ゆうえんち）un parc d’attraction
モダン moderne
デパート un centre commercial
未来（みらい）le futur
ぜひ n’hésitez pas à…, je vous recommende fortement de…
訪れる（おとずれる）visiter (une ville)

Grammaire

呼ばれる→forme passive
呼ぶappeler, 呼ばれる être appelé
食べる manger, 食べられる être mangé
する faire, される être fait

CSS body { height: 100%; background-color: #000; text-align: center; scrollbar-arrow-color: #feba1e; scrollbar-base-color: #FFF; scrollbar-dark-shadow-color: #5F9F9F; scrollbar-face-color: #FFF; scrollbar-shadow-color: #5F9F9F; margin: 0; padding: 0; } body#home { background-image: url(../images/bgdtaches.jpg); } body#different { background-image: url(../images/black.html); } .textnormal { font-size: 14px; color: #000; font-family: arial, times new roman; } .texttitle { font-size: 18px; color: #856363; font-weight: 700; font-family: tempus sans ITC, arial, times new roman; font-style: italic; } .head { font-size: 14px; color: #545454; font-weight: 700; font-family: arial; } .cadre { font-size: 14px; color: #545454; font-weight: 700; font-family: arial; border-top: 2px solid #313131; border-left: 2px solid #313131; border-right: 2px gray; border-bottom: 2px gray; margin: 2px; padding: 1px; } .textpost { font-size: 12px; font-family: arial; color: #000; } .courier { font-size: 14px; font-family: courier new; color: #000; } .title { font-size: 18px; color: #000; font-weight: 700; font-family: arial; } .subtitle { font-size: 12px; color: #545454; font-weight: 700; font-family: arial; } .bigtext { font-size: 16px; font-family: arial; color: #000; } .petittitre { font-size: 22px; color: #545454; font-weight: 700; font-family: arial; } .grandtitre { font-size: 40px; color: #545454; font-family: arial; text-align: center; } a { color: #545454; text-decoration: none; font-size: 14px; font-family: arial, franklin gothic book; } a:hover { color: #856363; text-decoration: underline; } #main { position: relative; margin-left: auto; margin-right: auto; width: 900px; height:auto!important; min-height: 100%; background-color: #FFF; background-repeat: repeat; background-image: url(../images/line.gif); text-align: center; } #banner { position: relative; text-align: left; margin-top: 0; margin-left: 15px; } #image { position: relative; margin-top: 40px; margin-bottom: 20px; } #leftimage { position: relative; margin-top: 20px; margin-bottom: 20px; width: 70%; text-align: center; float: left; } #rightmenu { position: relative; text-align: left; margin-top: 20px; padding-right: 30px; width: 25%; float: right; } .menu2 { position: relative; margin-top: 20px; padding-left: 40px; padding-right: 40px; width: 95%; text-align: left; } .menu3 { position: relative; text-align: left; margin-top: 20px; padding-left: 60px; padding-right: 20px; width: 65%; float: left; } .image3 { position: relative; margin-top: 20px; width: 30%; text-align: center; float: left; } #column1 { position: relative; margin-top: 20px; padding-left: 20px; width: 20%; float: left; text-align: left; } #about { position: relative; margin-right: 30px; margin-top: 40px; text-align: right; } #signature { position: relative; margin-right: 30px; margin-top: 20px; text-align: right; } .leftcolumn { position: relative; margin-top: 20px; width: 45%; text-align: left; float: left; padding-left: 60px; padding-right: 20px; border-right: 1px solid #856363; } .rightcolumn { position: relative; margin-top: 20px; width: 45%; text-align: left; float: left; padding-left: 20px; padding-right: 20px; } .item { margin-left: 2px; margin-right: 2px; } #footer { position: relative; height: 60px; background-color: #FFF; background-repeat: repeat; background-image: url(../images/line.gif); margin-left: auto; margin-right: auto; width: 900px; clear: both; } a:visited, a:active { color: #856363; } #column2,#column3,#column4 { position: relative; margin-top: 20px; text-align: left; width: 20%; float: left; } ces lignes ne sont reconue que par IE et ne sont pas valide CSS 2 scrollbar-arrow-color: #feba1e; scrollbar-base-color: #FFF; scrollbar-dark-shadow-color: #5F9F9F; scrollbar-face-color: #FFF; scrollbar-shadow-color: #5F9F9F;

notobe · Answer

Justement, j'allais t'en parler ;)

Tu as un height:auto, puis un height:100%. Seul le dernier sera pris en compte. 
Pour le reste, il faut mettre les mains dedans.

Sinon, tu n'as donné aucune unité à tes tailles de polices... Je ne sais même pas comment le navigateur comprends ça ;)
Il faut que tu mettes des % ou des em. Mets des guillemets aussi quand les noms de polices sont en plusieurs mots.
Et ça ne sert à rien de les répéter 36000 fois dans tes class. Mets celle que tu utilises le plus (arial apparemment) dans la déclaration de ton body. Tout le reste va en hériter. Ne mets des class que lorsque tu veux en changer.
Tiens, vas voir là pour toutes les subtilités
http://css.mammouthland.net/font-css-polices-caracteres.php

Je poursuis le décodage... je reviens ;)

notobe · Answer

Ah mais c'est avec IE qu'il ne va pas jusqu'en bas !!  C'est le petit bord noir qui dépasse c'est ça ? Rahhhh explorer... ;)

Sinon, autre chose : ton footer, mets des alt dans tes images qui indique le texte de ton image (question d'accessibilité, si les images ne sont pas chargées, au moins, on a le texte de remplacement)

notobe · Answer

rajoute un 

html {
margin:0;
padding:0
}

dans ton code CSS pour voir...

laetichan · Answer

(de retour)
Merci, mes chers, lecteurs, de votre patience, vous êtes admirables !

Alors, pour le pb du conteneur qui va pas jusken bas, moi ca faisait le pb dans les 2 browsers.
J'ai essayé de changer l'ordre du 'height', 'min-height', 'auto' mais ca ne change rien (tu dis qu'il faut mettres dans quel ordre ?)

j'ai essayé de rajouter
html {
margin:0;
padding:0;
}
mais rien ne change...
aaahhhh, dire que ca marchait avant (mais pkoi, mystère ??)

laetichan · Answer

Je m'approche mais piétine quand même...
Ajouter :
html { 
margin:0; 
padding:0; 
} 

ne marche pas MAIS, mettre :
html,body {
	height:100%;
	margin:0;
	padding:0;
	background-color: black;
	text-align: center;
	font-family:arial
	scrollbar-arrow-color:#feba1e;
	scrollbar-base-color:#FFFFFF;
	scrollbar-dark-shadow-color:#5F9F9F;
	scrollbar-face-color:#FFFFFF;
	scrollbar-shadow-color:#5F9F9F;
}

MARCHE !! pour ce qui est que le conteneur aille jusqu'en bas MAIS..... la pour le coup c mon bg image qui ne descend plus pour les pages a ascenseurs..... raaaahhhh je vais m'arracher les cheveux. Y'atil une solution intermédiaire ? 
(par ailleurs, je vois bien que ff veut pas de mes décorations scrollbar, mais si je veux en mettre quand meme, il y a des options ?)

notobe · Answer

Ce soir je n'ai pas trop le temps de regarder ça, demain ça ira ?

Pour les scrollbar, comme te l'as dit RAD ZONE, ce sont des propriétés qui fonctionnent uniquement avec internet explorer : elles ne font pas partie des normes du W3C. Elles ne sont donc reconnues ni par FF, ni par Opera, ni par Safari, ni Chrome etc.
Tu peux les laisser si tu veux, mais c'est du m$ uniquement.

Cela dit, avant de te laisser : quelle version de FF as-tu ? Car je peux t'assurer que ton conteneur allait bien jusqu'en bas chez moi (j'ai FF 3.5)

notobe · Answer

Donc, je confirme : c'est nickel avec FF 3.5, seamonkey 1.1, Safari 4 et Opera 9
C'est bon aussi avec IE7, mais pas avec IE8 !

laetichan · Answer

Salut !
Merci pour tous les tests avec tous ces browsers !
Moi aussi j'ai FF 3.5.2.

Finallement je suis restée avec la solution 

html,body {
height:100%;
margin:0;
padding:0;
etc...


car chez moi c la seule qui faisait aller le conteneur jusqu'en bas. Par contre j'ai du renoncer à mettre deux bgd image differentes (car dans ce cas l'image de fond ne descendait pas dans les pages avec ascenseurs) mais bon, de toutes facon, j'ai pas des tres bons retours sur mon bgd image (trop 'flash' ?!) donc je changerai plus tard.

En tout cas, je suis contente que le pb du conteneur et de la page en japonais soient résolus, je vais enfin pouvoir me concentrer sur le contenu !!

Encore merci de toute cette aide !!!

Firefox ignore mon CSS sur 1 seule page...!

20 réponses

Discussions similaires