Mon CSS joue à cache cache avec firefox

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonsoir,

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

Script html :
Code:

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:

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

30/10/2006, 21h53
francis m

peut-être est-ce ta deuxième balise tr : tu y as mis en espace : <tr > au lieu de <tr>
30/10/2006, 21h56
lodan

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

Autre exemple d'évènement bizard

Mon script html
Code:

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:

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.

30/10/2006, 22h02
francis m

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

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

Citation:

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:

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

31/10/2006, 01h37
francis m

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

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

Code:

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:

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

31/10/2006, 09h40
lodan

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:

<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.
31/10/2006, 10h02
trotters213

Citation:

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).

Citation:

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.

Citation:

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

J'ai supprimé fixed et cela fonctionne.

Je vais testé sur d'autres pages.

Pour tester mes styles je viens de faire ceci :
Code:

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.

31/10/2006, 10h27
trotters213

pense au tag :resolu: si ton prob' l'est ;)
Dis nous ce qu'il en ai pour tes autres pages.

J'ai ce cas là qui me pose également problème :
Citation:
Envoyé par lodan
Autre exemple d'évènement bizard

Mon script html
Code:

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:

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.

bè j'ai fait ceci

Code:

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 ;) ).

31/10/2006, 11h13
lodan

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.
31/10/2006, 11h16
trotters213

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.

Voici le code complet :

html :

Code:

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:

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:

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 :

http://127.0.0.1/gestelle/images/fond_menu_off.gif

Tu dois tout avoir

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

Code:

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;
}

Code:

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;
}

Même rendu sous IE, FF et Opera :

Code:

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>

Si ce n'est pas le rendu que tu voulais, fais un dessin sous paint histoire qu'on voit ce que tu veux ;)

31/10/2006, 14h23
Joe-La-Boule

Oublie pas de faire :resolu: et j'espere qu'on a pu te permettre de resoudre ton probleme ;)

Voir 40 message(s) de cette discussion en une page