[ RESOLU] Eternelle différence entre IE et FireFox

Bonjour,

Avant toute chose, si j'ai fait ce nouveau site avec pas mal de CSS, si j'ai supprimé un maximum de table, si je me suis bien pris la tête sur pas mal de choses et surtout si le site commence à ressembler à quelque chose ; c'est grâce à Alsacréations.
Alors un grand merci.

Bien entendu j'ai quelques soucis, je l'ai passerai en revue après chaque sujet résolu.
Et c'est toujours une différence ence IE et Firefox

En premier si vous allez en page d'acceuil :
http://www.ustirgouvieux.com
Vous constaterez qu'à gauche le texte : "les dates de tir de contrôle" sont en taille normale sous IE et Opera par contre sous FireFox c'est tout petit
C'est d'ailleurs la même chose pour le menu déroulant en haut
Voici le css pour le menu de gauche :

[#green]/***** menu CSS *****/
/***** Style CSS pour la présentation de la partie gauche  *****/
/***** menugauche.css *****/


#gaucheaccueil { position: absolute; width: 190px; left: 0px; margin-top: 20px; }

.gaucherecherche { font: Arial, Helvetica, sans-serif; background-color:#CAE3B1; }

/*banniere actualite*/
.banniereactualite { left: 0px; margin-top: 10px; background-color : #F3FCBA; border : 3px solid red; width : 190px; }

.titrebanniereactualite { font : bold 16px Verdana, Arial, Helvetica, sans-serif; text-align : center; background-color: #D3B8E0;
border-bottom: 2px solid red; height: 20px; }

/* Comme son nom l'indique*/
.textedansbanniereactualite { font : bold 13px Verdana, arial, sans-serif; color: black; text-align : center;}

/* modification affichage lien vers annonce competitions*/
A.annonce { font : bold 13px verdana, arial, sans-serif; text-align: center; }
A.annonce:link { color: #CC3366; text-decoration: none; }
A.annonce:visited { color: #006600; text-decoration: none; }
A.annonce:hover {  color: #0000CC; text-decoration: underline; }
A.annonce:active { color: #CC3366; text-decoration: none; }
/* fin modification affichage lien vers annonce */ 

/* modification affichage lien vers résultats competitions*/
A.resultats { font : bold 13px verdana, arial, sans-serif; text-align: center; }
A.resultats:link { color: #006600; text-decoration: none; }
A.resultats:visited { color: #CC3366; text-decoration: none; }
A.resultats:hover {  color: #CC3366; text-decoration: underline; }
A.resultats:active { color: #0000CC; text-decoration: none; }
/* fin modification affichage lien vers résultats */ 

et HTML :

<!-- gaucheaccueil.php ==> menu de gauche page d'accueil -->
<link rel="stylesheet" href="css/menugauche.css" type="text/css">

<div id="gaucheaccueil">

<div class="gaucherecherche">
<form method="post" action="index.php?page=1989">
      <b><font face="Times New Roman, Times, serif" size="-2"> 
      </font></b> <b><font size="2"><b><font face="Geneva, Arial, Helvetica, san-serif">Recherchez un tireur et ses résultats ?<br>
      tapez votre recherche, et ...<br>
      </font></b></font> </b>
      <input type="text" name="query_string" value="">
      <input type="submit" name="search" value="Go">
    </form>
</div>
<a href="mailto:tir.gouvieux@wanadoo.fr">
	<img src='pictures/poum9.gif' width='101' height='35' name='lienmail'> 
</a> 

<div class="banniereactualite">
	<div class="titrebanniereactualite">Actualités</div>
<?php
    print "
	<a href='index.php?page=3000' class='annonce'>
	<div class='annonce' align='center'>
		Concours<br>Arbalète Field 25m<br> les 02/03/04 juin 2006
	</a></div>
	<br>
	<a href='index.php?page=3001' class='annonce'>
	<div class='annonce' align='center'>
		Concours<br>Armes Anciennes<br> les 17 et 18 juin 2006
	</a></div>
	<br><br>
	<a href='http://www.ustirgouvieux.com/index.php?page=312&annee=2006&idnomcompetaa=1306&typenom=Armes%20Anciennes' class='resultats'>
	<div class='resultats' align='center'>
		Résultats<br>Championnats de l'Oise<br>
		Armes Anciennes<br>
		avril 2006
	</a></div>";
?>

<br><br><br>
<a href ='le_club/seancecontroletir2T2006.pdf' target='blank'>
<div class='textedansbanniereactualite'>
Les dates des tirs de contrôles </a>
</div>
</div>

</div>

Je suis certain que c'est une histoire d'imbrication de div mais je vois pas comment faire.

Merci pour votre aide

Jean-Michel
Modifié par pounie (27 Apr 2006 - 08:53)

<a href ='le_club/seancecontroletir2T2006.pdf' target='blank'>
<div class='textedansbanniereactualite'>
Les dates des tirs de contrôles </a>
</div>
</div>

</div>

1 – Une erreur d'imbrication : le lien, avec sa balise ouvrante, sa balise fermante et son texte de contenu, doit être à l'intérieur de la div. Ici, c'est à cheval.

2 – D'ailleurs, il ne faut pas céder à la divite aiguë, et utiliser une div alors qu'on aurait pu tout simplement utiliser un paragraphe pour encadrer ce lien. Un bon petit paragraphe, ça ne serait pas plus logique ?

3 – Mais que diable ferment ces </div> à tout va ? Un bloc ouvert 20 ou 40 lignes de code plus haut ? Et comment sait-on si on n'en a pas oublié une, ou s'il n'y en a pas une en trop (erreur courante) ?
Je recommande fortement l'utilisation de "marqueurs" de fin de bloc, en utilisant les commentaires HTML :

<div id="menu">
…bla bla 20 lignes de code…
</div><!-- fin de div#menu -->

On peut marquer ce que l'on veut dans le commentaire, bien sûr. Je conseille par contre d'utiliser une notation (ici je me suis inspiré des sélecteurs CSS parce que c'est plus compact) qui renvoie directement au code de la balise ouvrante. Le but est de faciliter la lisibilité du code, après tout.

Petit truc très pratique, en particulier pour les div englobantes dont la balise de fin se trouve parfois très loin dans le code.

Bonjour,

Merci pour la remarques concernant le commentaire sur les div
et encore les scripts qui comporte près de 300 lignes, notamment pour les résultats, c'est encore plus incompréhensibles pour quelqu'un extérieur à la création du site.
Je vais améliorer cela progressivement.

Mon médecin m'avait prévenu que j'étais atteint de Divinite aigue mais maintenant cela devient grave idem je corrige cela rapidement.

Effectivement l'imbrication n'était pas bonne j'ai corrigé mais le problème n'était pas celui là.
En fait à la balise <a href> j'ai adjoint une classe de lien et là tout fonctionne bien.

Merci pour ton aide
Je clos ce sujet et j'en ouvre un autre pour un autre souci.

Bonne journée
Jean-Michel