Texte qui ne prend pas la bonne couleur

**lodan** · 19/09/2006, 14h02

Bonjour,

Je demande à ce qu'un texte apparaisse en rouge et je le vois apparaître rapidement lors du chargement du formulaire puis il se met au noir.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<tr class="t_titre">
	  <td colspan="2"><b>Montant Débit/</b><font color="#FF0000"><b>Crédit</b></font></td>	  
   </tr>

Est-ce par ce que la "class" prend le pas sur le "font" ?

Merci d'avance

**trotters213** · 19/09/2006, 14h36

Normalement non puisque c'est "le dernier arrivée qui a raison".
Par contre il vaudrait peut-être mieux que tu utilises un id plutôt qu'un class et que tu mettes la couleur rouge dans ton CSS ("Quand on peut utiliser un id on l'utilise plutôt qu'un class") ça marchera à coup sur.

**lodan** · 19/09/2006, 16h29

C'est à dire faire quelque chose comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<tr class="t_titre">
<td colspan="2"><b>Montant Débit/</b><b id="red">Crédit</b></td>	    </tr>

Et dans mon css :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
td.red {
color:"#FF0000"}

**Bisûnûrs** · 19/09/2006, 16h34

C'est bizarre ...

Essaie comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<b>Montant Débit/</b><b><span style="color:#ff0000">Crédit</span></b>

**lodan** · 19/09/2006, 16h39

bisousnoursjos,

Avec ta solution, il fait comme avec la mienne, il apparaît en rouge et hop ! le voila noir.

**Bisûnûrs** · 19/09/2006, 16h45

C'est vraiment bizarre.

On peut voir ta classe t_titre ? Même si je pense que ça ne vient pas de là ..

**lodan** · 19/09/2006, 16h50

Voila t_titre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.t_titre {
	background-color: #C0C0C0;
	font-weight: bold; /*** Pour améliorer la lisibilité des titres ***/
	text-align:center;
}

**Bisûnûrs** · 19/09/2006, 16h52

Donc ce n'est pas de là que vient le problème.

Y a-t-il un endroit dans ton code où tu spécifies une couleur de texte noire ?

**lodan** · 19/09/2006, 16h59

Oui ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
body
{
background-color: #e6e6e8;
color: #000000;
font-size: 12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
}

Mais j'ai d'autres écrans ou j'ai déjà mis de la couleur comme ici par exemple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td  align="right" colspan="2"><font color="#FF0000"><b>{$mvt_ligne.mvt_bq_montant}</b></font></td>

et c'est dans le même source

**Bisûnûrs** · 19/09/2006, 17h00

Et ceux-là n'ont aucun problème ..? oÔ

**lodan** · 19/09/2006, 17h31

Non aucun problème

**trotters213** · 19/09/2006, 17h34

non je pensais plutôt à faire ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<tr id="t_titre">
	  <td colspan="2">Montant Débit &nbps; Crédit</td>
</tr>

puis dans ton CSS :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
#t_titre {
color : #ff0000;
font-weight : bold;
}

**lodan** · 19/09/2006, 17h45

Seul crédit doit être en rouge, je ne vois pas dans ton css comment il va faire la différence entre débit et crédit ?

**MasterOfChakhaL** · 19/09/2006, 18h09

je te proposerais un truc du style:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<td colspan="2">
  <b>Montant Débit/<em>Crédit</em></b>
</td>

css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

em {color:red;}

je pense que c'est une mauvaise idée de mélanger la technologie css avec des balises dépréciées comme font...
la balise em sert à mettre en emphase du texte, alors que la balise b sert à mettre en gras.

Il est conseillé d'utiliser les balises pour leur sens et non pour l'aspect qu'elles ont dans les navigateurs courants.

j'irais meme jusque là:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<td colspan="2">
  <em>Montant Débit/<em class="crucial">Crédit</em></em>
</td>

CSS:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
em {
  font-weight: bold;
}
 
em.crucial {
  color: red;
}

C'est quand même bizarre ton histoire de couleur qui change...
Même s'il y a des règles css qui se contredisent, je pense que le navigateur décide du style et l'applique sans passer par différentes étapes...
Ou alors ton css est chargé très lentement?

Y aurait-il un javascript qui manipule les propriétés css?

Si le problème vient de définitions contradictoire en css, il va falloir que tu t'interesses aux regles de priorité pour la sélection des regles

définition dans css externe, dans la balise style, en ligne via l'attribut style...
il y a ensuite des regles de priorité des selecteurs d'id, de classe, descendant...
Bref, t'en es pas encore la, mais ton histoire m'intrigue...

**lodan** · 19/09/2006, 18h31

J'ai mis ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<td colspan="2"><em>Montant Débit/<em class="crucial">Crédit</em></em></td>

et dans mon CSS cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
em {
  font-weight: bold;
}
 
em.crucial {
  color: red;
}

Et j'ai toujours l'affichage rouge qui disparaît au profit du noir.

**Bisûnûrs** · 19/09/2006, 18h38

Elle est étrange ton affaire.

Tu veux pas mettre ton code généré (sans code serveur, que le code source coté navigateur) en zip qu'on teste de notre côté ?

**lodan** · 19/09/2006, 19h06

Pour pouvoir envoyer mon code source exécutable, j'ai commencé par copié ma page source html générée et ensuite par supprimer petit à petit les script qui n'aurait pas fonctionné pour les tests et en en supprimant un le rouge est apparu.

Voila le coupable, c'est mon script de tri de mes colonnes de tableau :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
addEvent(window, "load", sortables_init);
 
var SORT_COLUMN_INDEX;
 
function sortables_init() {
    // Find all tables with class sortable and make them sortable
    if (!document.getElementsByTagName) return;
    tbls = document.getElementsByTagName("table");
    for (ti=0;ti<tbls.length;ti++) {
        thisTbl = tbls[ti];
        if (((' '+thisTbl.className+' ').indexOf("sortable") != -1) && (thisTbl.id)) {
            //initTable(thisTbl.id);
            ts_makeSortable(thisTbl);
        }
    }
}
 
function ts_makeSortable(table) {
    if (table.rows && table.rows.length > 0) {
        var firstRow = table.rows[0];
    }
    if (!firstRow) return;
 
    // We have a first row: assume it's the header, and make its contents clickable links
    for (var i=0;i<firstRow.cells.length;i++) {
        var cell = firstRow.cells[i];
        var txt = ts_getInnerText(cell);
        cell.innerHTML = '<a href="#" class="sortheader" '+ 
        'onclick="ts_resortTable(this, '+i+');return false;">' + 
        txt+'<span class="sortarrow">&nbsp;&nbsp;&nbsp;</span></a>';
    }
}
 
function ts_getInnerText(el) {
	if (typeof el == "string") return el;
	if (typeof el == "undefined") { return el };
	if (el.innerText) return el.innerText;	//Not needed but it is faster
	var str = "";
 
	var cs = el.childNodes;
	var l = cs.length;
	for (var i = 0; i < l; i++) {
		switch (cs[i].nodeType) {
			case 1: //ELEMENT_NODE
				str += ts_getInnerText(cs[i]);
				break;
			case 3:	//TEXT_NODE
				str += cs[i].nodeValue;
				break;
		}
	}
	return str;
}
 
function ts_resortTable(lnk,clid) {
    // get the span
    var span;
    for (var ci=0;ci<lnk.childNodes.length;ci++) {
        if (lnk.childNodes[ci].tagName && lnk.childNodes[ci].tagName.toLowerCase() == 'span') span = lnk.childNodes[ci];
    }
    var spantext = ts_getInnerText(span);
    var td = lnk.parentNode;
    var column = clid || td.cellIndex;
    var table = getParent(td,'TABLE');
 
    // Work out a type for the column
    if (table.rows.length <= 1) return;
    var itm = ts_getInnerText(table.rows[1].cells[column]);
    sortfn = ts_sort_caseinsensitive;
    if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d\d\d$/)) sortfn = ts_sort_date;
    if (itm.match(/^\d\d[\/-]\d\d[\/-]\d\d$/)) sortfn = ts_sort_date;
    if (itm.match(/^[£$]/)) sortfn = ts_sort_currency;
    if (itm.match(/^[\d\.]+$/)) sortfn = ts_sort_numeric;
    SORT_COLUMN_INDEX = column;
    var firstRow = new Array();
    var newRows = new Array();
    for (i=0;i<table.rows[0].length;i++) { firstRow[i] = table.rows[0][i]; }
    for (j=1;j<table.rows.length;j++) { newRows[j-1] = table.rows[j]; }
 
    newRows.sort(sortfn);
 
    if (span.getAttribute("sortdir") == 'down') {
        ARROW = '&nbsp;&nbsp;&uarr;';
        newRows.reverse();
        span.setAttribute('sortdir','up');
    } else {
        ARROW = '&nbsp;&nbsp;&darr;';
        span.setAttribute('sortdir','down');
    }
 
    // We appendChild rows that already exist to the tbody, so it moves them rather than creating new ones
    // don't do sortbottom rows
    for (i=0;i<newRows.length;i++) { if (!newRows[i].className || (newRows[i].className && (newRows[i].className.indexOf('sortbottom') == -1))) table.tBodies[0].appendChild(newRows[i]);}
    // do sortbottom rows only
    for (i=0;i<newRows.length;i++) { if (newRows[i].className && (newRows[i].className.indexOf('sortbottom') != -1)) table.tBodies[0].appendChild(newRows[i]);}
 
    // Delete any other arrows there may be showing
    var allspans = document.getElementsByTagName("span");
    for (var ci=0;ci<allspans.length;ci++) {
        if (allspans[ci].className == 'sortarrow') {
            if (getParent(allspans[ci],"table") == getParent(lnk,"table")) { // in the same table as us?
                allspans[ci].innerHTML = '&nbsp;&nbsp;&nbsp;';
            }
        }
    }
 
    span.innerHTML = ARROW;
}
 
function getParent(el, pTagName) {
	if (el == null) return null;
	else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())	// Gecko bug, supposed to be uppercase
		return el;
	else
		return getParent(el.parentNode, pTagName);
}
function ts_sort_date(a,b) {
    // y2k notes: two digit years less than 50 are treated as 20XX, greater than 50 are treated as 19XX
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
    if (aa.length == 10) {
        dt1 = aa.substr(6,4)+aa.substr(3,2)+aa.substr(0,2);
    } else {
        yr = aa.substr(6,2);
        if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
        dt1 = yr+aa.substr(3,2)+aa.substr(0,2);
    }
    if (bb.length == 10) {
        dt2 = bb.substr(6,4)+bb.substr(3,2)+bb.substr(0,2);
    } else {
        yr = bb.substr(6,2);
        if (parseInt(yr) < 50) { yr = '20'+yr; } else { yr = '19'+yr; }
        dt2 = yr+bb.substr(3,2)+bb.substr(0,2);
    }
    if (dt1==dt2) return 0;
    if (dt1<dt2) return -1;
    return 1;
}
 
function ts_sort_currency(a,b) { 
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).replace(/[^0-9.]/g,'');
    return parseFloat(aa) - parseFloat(bb);
}
 
function ts_sort_numeric(a,b) { 
    aa = parseFloat(ts_getInnerText(a.cells[SORT_COLUMN_INDEX]));
    if (isNaN(aa)) aa = 0;
    bb = parseFloat(ts_getInnerText(b.cells[SORT_COLUMN_INDEX])); 
    if (isNaN(bb)) bb = 0;
    return aa-bb;
}
 
function ts_sort_caseinsensitive(a,b) {
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]).toLowerCase();
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]).toLowerCase();
    if (aa==bb) return 0;
    if (aa<bb) return -1;
    return 1;
}
 
function ts_sort_default(a,b) {
    aa = ts_getInnerText(a.cells[SORT_COLUMN_INDEX]);
    bb = ts_getInnerText(b.cells[SORT_COLUMN_INDEX]);
    if (aa==bb) return 0;
    if (aa<bb) return -1;
    return 1;
}
 
 
function addEvent(elm, evType, fn, useCapture)
// addEvent and removeEvent
// cross-browser event handling for IE5+,  NS6 and Mozilla
// By Scott Andrew
{
  if (elm.addEventListener){
    elm.addEventListener(evType, fn, useCapture);
    return true;
  } else if (elm.attachEvent){
    var r = elm.attachEvent("on"+evType, fn);
    return r;
  } else {
    alert("Handler could not be removed");
  }
}

Il a un impact sur les entêtes de colonne.

**MasterOfChakhaL** · 19/09/2006, 19h42

je n'ai pas bien parcouru ton code, mais si celui ci ajoute des noms de classes (et n'enleve pas celles prédéfinies), tu peux tenter ca:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
em {
  font-weight: bold;
}

em.crucial {
  color: red !important;
}

**lodan** · 19/09/2006, 20h35

J'ai tenté, mais j'ai toujours la même chose.

Je vais me résigner parceque je ne peux pas changer le script pour cela, il est utiliser partout dès qu'il y a un tableau à trier.

Merci beaucoup pour votre aide.

**MasterOfChakhaL** · 19/09/2006, 20h46

J'ai un peu regardé ton code.
J'ai l'impression que ton problème pourrait avoir une solution mais je te laisse faire les tests:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function ts_getInnerText(el) {
	if (typeof el == "string") return el;
	if (typeof el == "undefined") { return el };
	if (el.innerText) return el.innerText;	//Not needed but it is faster
	var str = "";
	
	var cs = el.childNodes;
	var l = cs.length;
	for (var i = 0; i < l; i++) {
		switch (cs[i].nodeType) {
			case 1: //ELEMENT_NODE
				// ancienne ligne
				//str += ts_getInnerText(cs[i]);
				// remplacé par...
				str += '<' + cs[i].tagName + ' class="' + cs[i].calssName + '">' + ts_getInnerText(cs[i]) + '</' + cs[i].tagName + '>';
				break;
			case 3:	//TEXT_NODE
				str += cs[i].nodeValue;
				break;
		}
	}
	return str;
}

ton code zape les éléments, si tu vérifies avec un explorateur DOM (dispo avec mozilla firefox), tu devrais voir que les em disparaissent...

Texte qui ne prend pas la bonne couleur

CSS

Discussions similaires

Partager

Partager