Mon CSS joue à cache cache avec firefox

**lodan** · 30/10/2006, 21h44

Bonsoir,

J'ai depuis un moment des problèmes avec mon CSS, voici un exemple :

Script html :

Code :

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

1
2
3
4
5
6
7
<tr class="t_titre">
      <td>Bienvenue sur</td>
   </tr>
   <tr ><td align="center"><img src="images/logo.png" alt="logo"></td></tr>
     <tr class="t_titre">
      <td>Identification</td>
   </tr>

Mon CSS :

Code :

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

1
2
3
4
5
.t_titre {
	background : url(../images/fond_menu_off.gif) repeat-x fixed top left;
	font-weight: bold; /*** Pour améliorer la lisibilité des titres ***/
	text-align: center;
}

Mon CSS s'applique très bien sur le premier class="t_titre", mais pas sur le second.

Qu'est-ce qui peu induire un tel phénomène.

Merci d'avance

**francis m** · 30/10/2006, 21h53

peut-être est-ce ta deuxième balise tr : tu y as mis en espace : <tr > au lieu de <tr>

**lodan** · 30/10/2006, 21h56

Merci, j'ai corrigé mais ce n'étais pas ça.

**lodan** · 30/10/2006, 22h01

Autre exemple d'évènement bizard

Mon script html

Code :

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

1
2
3
4
5
6
7
<div id="tabsH">
	<ul>
		<li id="current"><a><span>Annuaire Utilisateurs</span></a></li>
	</ul>
</div>
<form id="recherche" action="{$current_page}" method="post">
<div id="titreForm">Liste</div>

Mon CSS :

Code :

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

1
2
3
4
5
6
7
8
/*** Mise en forme du titre ***/
#titreForm {	/*** Mise en forme du titre et du pied de formulaire ***/
	font: bold 1.1em arial, hevetica, sans-serif;
	color: white;
	background: grey;
	margin: 0;
	padding: .5em;
}

Avec "titreForm", les lignes 5 lignes précédent mon "form" on un background grey. Je retire "titreForm", je n'ai plus de background. C'est ce que je veux d'ailleur, mais pourquoi tient-il compte des lignes précédentes ?

J'ai rien compris à CSS sûrement.

**francis m** · 30/10/2006, 22h02

j'ai essayé ton code chez moi et il fonctionne correctement

n'aurais-tu pas un id "t_titre" ailleurs ?

**lodan** · 30/10/2006, 22h41

Envoyé par francis m

j'ai essayé ton code chez moi et il fonctionne correctement

n'aurais-tu pas un id "t_titre" ailleurs ?

Voivi l'intégralité du script, c'est cours :

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
<html>
 
<head>
<title>Administration</title>
<link REL="StyleSheet" TYPE="text/css" HREF="/<?php echo("$prefixe_dossier"); ?>css/style.css">
</head>
<body>
<form name="login" id="login" method="post">
<input type="hidden" name="action" value="send">
<table border="0" align="center" cellpadding="3" cellspacing="1" >
   <tr class="t_titre">
      <td>Bienvenue sur</td>
   </tr>
   <tr><td align="center"><img src="images/logo_gestelle.png" alt="GESTELLE"></td></tr>
     <tr class="t_titre">
      <td>Identification</td>
   </tr>
   <tr valign="top">
      <td >
 
	   <table border="0" align="center">
	      <tr >
		     <td align="right"><b>Code utilisateur</b></td>
			 <td class="t_cell"><input type="text" name="user_login" size="40" onchange="javascript:this.value=this.value.toUpperCase();"></td>
		  </tr>
		  <tr>
		     <td align="right"><b>Mot de passe</b></td>
			 <td class="t_cell"><input type="password" name="user_password" size="40" autocomplete="off"></td>
		  </tr>
	   </table>
 
	   <br>
 
	   <center><input type="submit" value="Connexion"></center>
 
      </td>
   </tr>
</table>
</form>
</body>

Et dans mon CSS, je n'ai qu'un t_titre

Je suis sous firefox

**francis m** · 31/10/2006, 01h37

je suis désolé
il doit y avoir une subtilité avec firefox que je ne connais pas

j'ai essayé ton code, il ne fonctionne pas avec ff, mais il fonctionne correctement avec ie

**trotters213** · 31/10/2006, 08h43

tu dois avoir un problème avec ton background parce que ceci marche comme il faut :

Code HTML :

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
<!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">
<head>
<title>Administration</title>
<style type="text/css">
.t_titre {
        background-color:#FFFFCC;
        font-weight: bold; /*** Pour améliorer la lisibilité des titres ***/
        text-align: center;
}
 
table {
border:none;
text-align:center;
padding:3px;
margin:1px;
}
 
#right {
text-align:right;
font-weight:bold;
}
</style>
</head>
 
<body>
<form name="login" id="login" method="post">
	<input type="hidden" name="action" value="send" />
	<table>
		<tr class="t_titre">
			<td>Bienvenue sur</td>
		</tr>
		<tr>
			<td align="center"><img src="images/logo_gestelle.png" alt="GESTELLE"></td>
		</tr>
		<tr class="t_titre">
			<td>Identification</td>
		</tr>
		<tr valign="top">
			<td >	
				<table>
					<tr >
						<td id="right">Code utilisateur</td>
						<td class="t_cell"><input type="text" name="user_login" size="40" onchange="javascript:this.value=this.value.toUpperCase();" /></td>
					</tr>
					<tr>
						<td id="right">Mot de passe</td>
						<td class="t_cell"><input type="password" name="user_password" size="40" autocomplete="off" /></td>
					</tr>
				</table>
				<input type="submit" value="Connexion" />
			</td>
		</tr>
	</table>
</form>
</body>
</html>

ton code n'est pas bon : tu n'as défini de DOCTYPE, tu fermes pas certaines balises (dont le </html>

), ... celui du dessus est corrigé.
Tu devrais également utiliser des fieldset pour ton cas plutôt que des tableaux (imbriqués en plus) qui sont très lourd et pas fait pour ça

Tu as essayé sinon de faire comme BisounourJos t'as dit dans un autre post :

Code CSS :

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

1
2
3
4
background-attachment:fixed;
background-image:url(../images/fond_menu_off.gif);
background-position:top left;
background-repeat:repeat-x;

**lodan** · 31/10/2006, 09h40

Oui j'ai fait ce que bisounoursJos m'avait proposé, mais pas de changement.

Je n'ai pas utilisé fieldset parceque et je viens de m'en rendre compte, mon éditeur (GoLive CS2) n'accepte pas les attributs :

Code :

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

<fieldset align="center" width="40%">

Lorsque j'écris ça, j'ai "align" et "width" en rouge, donc je lui ai fait confiance pour dire que ce n'était ce qu'il fallait faire.

Pourtant dans la doc sur fieldset, j'avais lu (souvenir) qu'on pouvait mettre des attributs, mais je n'ai pas creusé plus avant.

Bon reprenons mon problème de style.

Je suis sûrement "autiste" mais dans l'exemple que tu me présentes, j'ai perdu mon background avec une image tu fais avec une couleur.

Dans mon cas j'ai une image en background et sur mon exemple, mon problème est que le 1er t_titre à l'image, mais pas le 2ème.

**trotters213** · 31/10/2006, 10h02

Envoyé par lodan

Je n'ai pas utilisé fieldset parceque et je viens de m'en rendre compte, mon éditeur (GoLive CS2) n'accepte pas les attributs :

Bon alors pour commencer GoLive (ce qui suit n'engage que moi) c'est de la m... Passe ton site au validateur du W3C et lui il te dira si tu peux ou pas mettre ces attribut là à fieldset (align tu peux mais c'est déprécié en HTML et tu peux en XHTML je crois et width tu peux pas).

Envoyé par lodan

Je suis sûrement "autiste" mais dans l'exemple que tu me présentes, j'ai perdu mon background avec une image tu fais avec une couleur.

C'est normal j'ai fait un test avec de la couleur (vu que je n'ai pas ton image) c'est pour cela que je dis que tu as un problème avec le background surement.

Envoyé par lodan

Dans mon cas j'ai une image en background et sur mon exemple, mon problème est que le 1er t_titre à l'image, mais pas le 2ème.

Essaie en supprimant le fixed

**lodan** · 31/10/2006, 10h06

J'ai supprimé fixed et cela fonctionne.

Je vais testé sur d'autres pages.

Pour tester mes styles je viens de faire ceci :

Code :

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

1
2
3
4
5
6
7
8
table {border: 1px solid black}
tr {border: 1px dotted red}
td {border: 1px dotted gray}
div {border: 1px solid orange}
img, form {border: 1px dashed blue}
h1, h2, h3, h4, h5, h6, p {border: 1px solid yellow}
ul {border: 1px solid green}
li {border: 1px solid lightgreen}

Je mets ça en début de feuille de style et cela me permet de voir où commence et où se termine un style.

**trotters213** · 31/10/2006, 10h27

pense au tag

si ton prob' l'est

Dis nous ce qu'il en ai pour tes autres pages.

**lodan** · 31/10/2006, 10h39

J'ai ce cas là qui me pose également problème :

Envoyé par lodan

Autre exemple d'évènement bizard

Mon script html

Code :

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

1
2
3
4
5
6
7
<div id="tabsH">
	<ul>
		<li id="current"><a><span>Annuaire Utilisateurs</span></a></li>
	</ul>
</div>
<form id="recherche" action="{$current_page}" method="post">
<div id="titreForm">Liste</div>

Mon CSS :

Code :

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

1
2
3
4
5
6
7
8
/*** Mise en forme du titre ***/
#titreForm {	/*** Mise en forme du titre et du pied de formulaire ***/
	font: bold 1.1em arial, hevetica, sans-serif;
	color: white;
	background: grey;
	margin: 0;
	padding: .5em;
}

Avec "titreForm", les lignes 5 lignes précédent mon "form" on un background grey. Je retire "titreForm", je n'ai plus de background. C'est ce que je veux d'ailleur, mais pourquoi tient-il compte des lignes précédentes ?

J'ai rien compris à CSS sûrement.

Le point commun c'est que ce sont des "div", mais c'est tout, et je n'ai aucun style "div" seul.

**trotters213** · 31/10/2006, 10h45

bè j'ai fait ceci

Code HTML :

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
<!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">
<head>
<title>Administration</title>
<style type="text/css">
#titreForm {
        font: bold 1.1em arial, hevetica, sans-serif;
        color:#fff;
        background:#666;
        margin: 0;
        padding: .5em;
}
</style>
</head>
 
<body>
<div id="tabsH">
	<ul>
		<li class="current"><a>Annuaire Utilisateurs</a></li>
		<li class="current"><a>Annuaire Utilisateurs</a></li>
		<li class="current"><a>Annuaire Utilisateurs</a></li>
	</ul>
</div>
<form id="recherche" action="{$current_page}" method="post">
	<div id="titreForm">Liste</div>
</form>
</body>
</html>

et le résultat est le même sous IE, FF et Opera et seule la ligne où tu écris "Liste" à un fond gris (j'ai supprimé les span ils ne servent à rien

).

**lodan** · 31/10/2006, 11h13

Dans mon cas ça ne marche pas, j'ai sûrement un truc qui traîne quelque part.

J'ai installé Webdevelopper pour faire des tests.

**trotters213** · 31/10/2006, 11h16

tu es bien sur que tu as juste le code que je t'ai donné ou tu as autre chose ?
Si c'est le cas, poste tout comme ça on verra d'où ça peut venir.

**lodan** · 31/10/2006, 11h41

Voici le code complet :

html :

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
<!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">-->
<html>
 
	<head>
		<link href="http://127.0.0.1/gestelle/css/style.css" type="text/css" rel="StyleSheet">
		<link href="http://127.0.0.1/gestelle/css/menu.css" type="text/css" rel="stylesheet">
 
	</head>
	<body>
<div id="tabsH">
	<ul>
		<li id="current"><a><span>Exercices</span></a></li>
		<li><a href="http://127.0.0.1/gestelle/admin/onglet_admin_finances_2.php"><span>Classes</span></a></li>
		<li><a href="http://127.0.0.1/gestelle/admin/onglet_admin_finances_3.php"><span>Catégories</span></a></li>
		<li><a href="http://127.0.0.1/gestelle/admin/onglet_admin_finances_4.php"><span>Sous-Catégories</span></a></li>
		{if $ok_liste==1}
			<li><a href="http://127.0.0.1/gestelle/majeurs/onglet_admin_finances_listes.php"><span>Listes</span></a></li>
		{/if}
	</ul>
</div>
<form id="recherche" action="" method="post">
<div id="titreForm">Liste des Exercices</div>
</body>
</html>

Les css

style :

Code :

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

1
2
3
4
5
6
7
8
/*** Mise en forme du titre ***/
#titreForm {	/*** Mise en forme du titre et du pied de formulaire ***/
	font: bold 1.1em arial, hevetica, sans-serif;
	color: white;
	background: grey;
	margin: 0;
	padding: .5em;
}

menu :

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
/* Menu horizontal*/
#tabsH {
      float:left;
      width:100%;
      font-size:93%;
      line-height:normal;
      margin:0;
      padding:0;
      font: bold 11px/1.5em Verdana;
}
 
#tabsH ul {
        margin:0;
        padding:10px 10px 30px 0;
        list-style:none;
}
#tabsH li {
      display:inline;
      margin:0;
      padding:0;
}
    #tabsH a {
      float:left;
      /*background:url("../images/tableftH.gif") no-repeat left top;*/
      background: url("../images/fond_menu_off.gif") repeat-x top left;
      margin:1;
      padding:0 0 0 4px;
      text-decoration:none;
      }
    #tabsH a span {
      float:left;
      display:block;
      padding:5px 15px 4px 6px;
      color:grey;
      }
    #tabsH a span {float:none;}
    /* End IE5-Mac hack */
    #tabsH a:hover span {
      color:#FFF;
      }
    #tabsH a:hover {
      background-position:0% -42px;
      }
    #tabsH a:hover span {
      background-position:100% -42px;
      }
 
        #tabsH #current a {
                background-position:0% -42px;
        }
        #tabsH #current a span {
                background-position:100% -42px;
                color:#FFF;
        }

Les images :

Tu dois tout avoir

**lodan** · 31/10/2006, 12h27

D'après mes tests le cache-cache est entre :

Code :

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

1
2
3
4
5
6
7
8
9
#tabsH {
      float:left;
      width:100%;
      font-size:93%;
      line-height:normal;
      margin:0;
      padding:0;
      font: bold 11px/1.5em Verdana;
}

et

Code :

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

1
2
3
4
5
6
7
#titreForm {	/*** Mise en forme du titre et du pied de formulaire ***/
	font: bold 1.1em arial, hevetica, sans-serif;
	color: white;
	background: grey;
	margin: 0;
	padding: .5em;
}

**trotters213** · 31/10/2006, 13h43

Même rendu sous IE, FF et Opera :

Code HTML :

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
<!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" xml:lang="fr" lang="fr">
 
<head>
<style type="text/css">
* {
margin:0px;
padding:0px;
}
 
body {
background:none;
}
 
#titreForm {
font:bold 1.1em arial, hevetica, sans-serif;
color:#fff;
background:#777;
padding:0.5em;
}
 
#tabsH {
width:100%;
font-size:93%;
line-height:normal;
font:bold 11px/1.5em Verdana;
}
 
#tabsH ul {
padding:10px 10px 30px 0;
list-style:none;
}
 
#tabsH li {
display:inline;
}
 
#tabsH a {
float:left;
background: url("fond_menu_off.gif") repeat-x top left;
margin:1;
display:block;
padding:5px 15px 4px 6px;
color:#777;
text-decoration:none;
}
 
#tabsH a:hover {
color:#fff;
background-position:-42px;
}
 
#tabsH #current a  {
background:none;
color:#777;
}
</style>
</head>
<body>
  <div id="tabsH">
    <ul>
      <li id="current"><a>Exercices</a></li>
      <li><a href="...">Classes</a></li>
      <li><a href="...">Catégories</a></li>
      <li><a href="...">Sous-Catégories</a></li>
      <li><a href="...">Listes</a></li>
    </ul>
  <div>
  <form id="recherche" action="" method="post">
    <div id="titreForm">Liste des Exercices</div>
  </form>
</body>
</html>