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.

**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

).

**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** · 02/11/2006, 10h33

c'est à dire que tu n'expliques pas bien ton problème et qu'en plus tu dérives complètement du sujet de base.
Si ton problème de base est réolu, ferme ce post, crées en un autre et explique correctement ton souhait (quitte à faire un dessin).

**lodan** · 02/11/2006, 10h55

Je fermes et je fais autrement.

Moi j'avais compris qu'il fallait que je fasse évoluer mon CSS et mes scripts pour que l'ensemble tienne. Donc évidemment, une fois la 1ère partie ok, le reste ne tenait plus la route.

Comme je pensais aussi que les css pouvait être dépendant les un des autres, je continuais sur ce post.

Merci pour ta patience.