28220 sujets

CSS et mise en forme, CSS3

[Résolu] Un display:none dont FireFox se moque

Bonne année, monde entier Smiley biggol Et que 2006 soit l'année du CSS3 Smiley lol

Mais plus sérieusement, je viens de tomber sur un os et j'aurais besoin d'un peu d'aide... Smiley smile
Car dans mon histoire la bizarrerie c'est FireFox - mon navigateur préféré - qui n'écoute pas ce que j'écris pour présenter joliement ma page (dont la source est copiée-collée ci-dessous). Alors pour faire simple, je vous ai aussi pris une courte sélection (ça évite de perdre du temps) du fameux CSS (qui pourtant est respecté par Opéra et IE6).

Mais vous allez me demander quel est ce problème (j'en étais sûr :d) ?
Eh bien il s'avere que je souhaite masquer quelques informations entre balises <ul>. Les voici :

<ul>
<li><a href="index.php?numero_salon=35&amp;numero_action=1">Liste compl&egrave;te</a></li>
<li><a href="index.php?numero_salon=35&amp;numero_action=2">Nouveau salon</a></li>
</ul>


Cependant, FireFox qui ne le veut pas affiche ce bloc de données... Si vous aussi vous trouvez ça étonnant (voire même un peu magique), je vous invite à copier tout le code en bas dans un petit fichier i.htm et à l'ouvrir avec Panda Smiley smile

Bon début de semaine.



<style>
#bloc_path ul {
	display:none;
}
}
</style>


<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<script type="text/javascript" src="./include/js/function.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>i</title>
</head>
<body>
<div id="bloc_top">
<h1 id="top"><a href="#">i</a></h1>
<h2>ii</h2>
</div>
<hr />
<address id="bloc_path">
<a href="index.php?numero_rubrique=2" title="rubrique">Administration</a> / 
<a href="index.php?numero_theme=42" title="theme">Forum</a> /
<a href="index.php?numero_salon=35" title="salon"><a href="index.php?numero_salon=35">&Agrave; propos des salons</a>







<ul>
<li><a href="index.php?numero_salon=35&amp;numero_action=1">Liste compl&egrave;te</a></li>
<li><a href="index.php?numero_salon=35&amp;numero_action=2">Nouveau salon</a></li>
</ul>







</address>
<hr />
<p id="bloc_session">
&Eacute;tat : root connect&eacute; - <a href="index.php?numero_rubrique=2">Mon compte</a> - <a href="index.php?deconnexion=TRUE">D&eacute;connexion</a>

</p>
<hr />
<dl id="bloc_link">
<dt><a href="/Mes site web/stage/portail/elisa/index.php?numero_rubrique=1">Forum</a></dt>
<dd>
<ul>
<li><a href="/Mes site web/stage/portail/elisa/index.php?numero_rubrique=1&amp;numero_theme=40">T&eacute;moignages</a></li></ul>
</dd>
<dt><a href="/Mes site web/stage/portail/elisa/index.php?numero_rubrique=2">Administration</a></dt>
<dd>
<ul>
<li><a href="/Mes site web/stage/portail/elisa/index.php?numero_rubrique=2&amp;numero_theme=41">Compte</a></li><li><a href="/Mes site web/stage/portail/elisa/index.php?numero_rubrique=2&amp;numero_theme=42">Forum</a></li><li><a href="/Mes site web/stage/portail/elisa/index.php?numero_rubrique=2&amp;numero_theme=43">Site</a></li></ul>

</dd>
<dt><a href="#">Calendrier</a></dt>
<dd>
<table id="bar_cal">
<caption><a href="?mois=12&amp;annee=2005">&laquo;</a> Janvier 2006 <a href="?mois=2&amp;annee=2006">&raquo;</a></caption>
<thead>
<tr>
<th><abbr xml:lang="fr" title="lundi">L</abbr></th>
<th><abbr xml:lang="fr" title="mardi">M</abbr></th>
<th><abbr xml:lang="fr" title="mercredi">M</abbr></th>
<th><abbr xml:lang="fr" title="jeudi">J</abbr></th>

<th><abbr xml:lang="fr" title="vendredi">V</abbr></th>
<th><abbr xml:lang="fr" title="samedi">S</abbr></th>
<th><abbr xml:lang="fr" title="dimanche">D</abbr></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td class="weekend"><a href="/Mes site web/stage/portail/elisa/index.php?numero_rubrique=2&amp;numero_theme=42&amp;jour=01&amp;mois=01&amp;annee=2006"><span title="Dimanche 1 janvier 2006">1</span></a></td>

</tr>
<tr>
<td class="jour"><strong id="aujourdhui"><span title="Lundi 2 janvier 2006">2</span></strong></td>
<td class="coordonnee"><span title="Mardi 3 janvier 2006">3</span></td>
<td class="coordonnee"><span title="Mercredi 4 janvier 2006">4</span></td>
<td class="coordonnee"><span title="Jeudi 5 janvier 2006">5</span></td>
<td class="coordonnee"><span title="Vendredi 6 janvier 2006">6</span></td>
<td class="coordonnee"><span title="Samedi 7 janvier 2006">7</span></td>
<td class="coordonnee"><span title="Dimanche 8 janvier 2006">8</span></td>
</tr>

<tr>
<td class="coordonnee"><span title="Lundi 9 janvier 2006">9</span></td>
<td class="jour"><span title="Mardi 10 janvier 2006">10</span></td>
<td class="jour"><span title="Mercredi 11 janvier 2006">11</span></td>
<td class="jour"><span title="Jeudi 12 janvier 2006">12</span></td>
<td class="jour"><span title="Vendredi 13 janvier 2006">13</span></td>
<td class="weekend"><span title="Samedi 14 janvier 2006">14</span></td>
<td class="weekend"><span title="Dimanche 15 janvier 2006">15</span></td>
</tr>
<tr>

<td class="coordonnee"><span title="Lundi 16 janvier 2006">16</span></td>
<td class="jour"><span title="Mardi 17 janvier 2006">17</span></td>
<td class="jour"><span title="Mercredi 18 janvier 2006">18</span></td>
<td class="jour"><span title="Jeudi 19 janvier 2006">19</span></td>
<td class="jour"><span title="Vendredi 20 janvier 2006">20</span></td>
<td class="weekend"><span title="Samedi 21 janvier 2006">21</span></td>
<td class="weekend"><span title="Dimanche 22 janvier 2006">22</span></td>
</tr>
<tr>
<td class="coordonnee"><span title="Lundi 23 janvier 2006">23</span></td>

<td class="jour"><span title="Mardi 24 janvier 2006">24</span></td>
<td class="jour"><span title="Mercredi 25 janvier 2006">25</span></td>
<td class="jour"><span title="Jeudi 26 janvier 2006">26</span></td>
<td class="jour"><span title="Vendredi 27 janvier 2006">27</span></td>
<td class="weekend"><span title="Samedi 28 janvier 2006">28</span></td>
<td class="weekend"><span title="Dimanche 29 janvier 2006">29</span></td>
</tr>
<tr>
<td class="coordonnee"><span title="Lundi 30 janvier 2006">30</span></td>
<td class="jour"><span title="Mardi 31 janvier 2006">31</span></td>

<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</dd>
<dt><a href="#">Moteur de recherche</a></dt>
<dd>
<form action="/Mes site web/stage/portail/elisa/index.php?numero_rubrique=2&amp;numero_theme=42&amp;recherche=1" method="post">
<fieldset>
<legend>Rechercher dans tout le site</legend>
<p><input value="" name="q" type="text" id="search" maxlength="32" /></p>

<p>
<select name="theme">
<option value="41">Compte</option>
<option value="42" selected="selected">Forum</option>
<option value="43">Site</option>
<option value="40">T&eacute;moignages</option>
</select><input value="Rechercher" type="submit" />
</p>
<p>
<label><input type="checkbox" name="resolu" />Limiter la recherche aux sujets r&eacute;solus.</label>

</p>
</fieldset>
</form>
</dd>
</dl>
<hr />
<div id="bloc_content">
<ul id="bar_link">
<li><a href="/Mes site web/stage/portail/elisa/index.php?numero_rubrique=2&amp;numero_sousrubrique=4&amp;numero_action=1">&Agrave; propos des th&egrave;mes</a>
<ul class="menu">
<li><a href="/Mes site web/stage/portail/elisa/index.php?numero_rubrique=2&amp;numero_sousrubrique=4&amp;numero_action=1&amp;numero_sousaction=1">Liste compl&egrave;te</a></li>
<li><a href="/Mes site web/stage/portail/elisa/index.php?numero_rubrique=2&amp;numero_sousrubrique=4&amp;numero_action=1&amp;numero_sousaction=2">Nouveau th&egrave;me</a></li>

</ul>
</li>
<li><a href="/Mes site web/stage/portail/elisa/index.php?numero_rubrique=2&amp;numero_sousrubrique=4&amp;numero_action=2">&Agrave; propos des salons</a>
<ul>
<li><a href="/Mes site web/stage/portail/elisa/index.php?numero_rubrique=2&amp;numero_sousrubrique=4&amp;numero_action=2&amp;numero_sousaction=1">Liste compl&egrave;te</a></li>
<li><a href="/Mes site web/stage/portail/elisa/index.php?numero_rubrique=2&amp;numero_sousrubrique=4&amp;numero_action=2&amp;numero_sousaction=2">Nouveau salon</a></li>
</ul>
</li>
</ul>
<fieldset>
<legend>Liste des th&egrave;mes</legend>

<table>
<caption title="theme">Table th&egrave;mes</caption>
<thead>
<tr>
<th title="numero_theme">Id</th>
<th title="nom_theme">Nom</th>
<th title="login_id">Auteur</th>
</tr>
</thead>
<tfoot>
<tr>
<th title="numero_theme">Id</th>

<th title="nom_theme">Nom</th>
<th title="login_id">Auteur</th>
</tr>
</tfoot>
<tbody>
<tr>
<form action="#" method="post">
<td>41<input value="41" type="hidden" name="numero_theme" /></td>
<td><input size="12" value="Compte" maxlength="32" type="text" name="nom_theme" /></td>
<td>root</td>
<td><input type="submit" name="mettre_a_jour" value="Mettre &agrave; jour" />
<input type="submit" name="supprimer" value="Supprimer" /></td>
</form>

</tr>
<tr>
<form action="#" method="post">
<td>42<input value="42" type="hidden" name="numero_theme" /></td>
<td><input size="12" value="Forum" maxlength="32" type="text" name="nom_theme" /></td>
<td>root</td>
<td><input type="submit" name="mettre_a_jour" value="Mettre &agrave; jour" />
<input type="submit" name="supprimer" value="Supprimer" /></td>
</form>
</tr>
<tr>
<form action="#" method="post">
<td>43<input value="43" type="hidden" name="numero_theme" /></td>
<td><input size="12" value="Site" maxlength="32" type="text" name="nom_theme" /></td>

<td>root</td>
<td><input type="submit" name="mettre_a_jour" value="Mettre &agrave; jour" />
<input type="submit" name="supprimer" value="Supprimer" /></td>
</form>
</tr>
<tr>
<form action="#" method="post">
<td>40<input value="40" type="hidden" name="numero_theme" /></td>
<td><input size="12" value="T&eacute;moignages" maxlength="32" type="text" name="nom_theme" /></td>
<td>root</td>
<td><input type="submit" name="mettre_a_jour" value="Mettre &agrave; jour" />
<input type="submit" name="supprimer" value="Supprimer" /></td>
</form>
</tr>

</tbody>
</table>
</fieldset>
</div>
<hr />
<ul id="bloc_footer">
<li>Derni&egrave;re actualisation de cette page le 02/01/2006, &agrave; 12 h 53 min.</li>
<li>&copy; 2006 <a href="#">i</a>. Conforme aux recommandations du <a href="http://www.w3c.org"><acronym title="World Wide Web Consortium">W3C</acronym></a>.</li>

<li>
<form method="post" action="#">
<fieldset>
<legend>Mise en forme</legend>
<p>
<label>Choix du design : <select name="css">
<option value="style_par_defaut" selected="selected">Style par d&eacute;faut</option>
<option value="aucun_style">Aucun style</option>
</select></label><input value="Appliquer" type="submit" />
</p>
</fieldset>
</form>

</li>
</ul>
</body>
</html>

Modifié par tsing (02 Jan 2006 - 14:48)
Bonjour,

Firefox, comme tous les autres navigateurs, fait de son mieux pour interpréter ce code invalide. Mais ses capacités à récupérer tes erreurs sont nécessairement limitées (les processus de récupération d'erreur d'Opera et d'IE sont simplement un peu plus chanceux sur ce coup-là) Smiley cligne

Valider le code, et en particulier ne pas utiliser l'élément address de manière impropre, lui facilitera les choses.

(Le parser considère apparemment que l'élément address ne pouvant pas contenir un bloc ul, il doit se fermer avant l'ouverture de ce dernier).

Ce serait bien aussi de ne pas utiliser XHTML1.1 de manière non conforme. Utiliser plutôt XHTML1.0, qui est d'un usage plus facile (type de contenu text/html autorisé).
Modifié par Laurent Denis (02 Jan 2006 - 13:42)
Merci pour ta réponse claire et rapide. Effectivement mes pages (et pas selement celle-là) sont encore assez sales et je plus j'avance, plus je me rends compte à quel point écrire un site dynamique en mariant des langages comme l'XHTML et MySQL en passant par Apache équipé de PHP c'est à la fois pationnant et casse-tête Smiley biggol Mais c'est le prix à payer, si je ne veux pas utiliser de blog comme les autres Smiley ravi Je n'ai rien contre, mais j'aime bien l'originalité quand même.
Modifié par tsing (02 Jan 2006 - 14:47)
Sujet clos
Aller à