[Résolu] CSS : logos coupés en pied de page

Bonjour ,

j'utilise un squelette de spip (CMS) qui se nomme "Multisaisons".

Je souhaite afficher les logos de nos partenaires en dessous du "footer" (utilisé pour l’adresse et les liens de navigation), dans le surcontent. J’ai donc le code suivant (dans le fichier pied de page) :

(...)
<a href="#URL_ARTICLE{26}" title="Lire l'article Actualit&eacute;s" >Actualit&eacute;s</a>&nbsp;|
   &nbsp;<a href="[(#URL_PAGE{mon-profil})]" title="Entrer dans l'espace d'administration du site">Espace priv&eacute;</a> &nbsp;|
        &nbsp;<a href="[(#URL_PAGE{plan})]" title="Plan du site">Plan du site</a>&nbsp;|
         &nbsp;<a href="[(#URL_PAGE{recherche})]" title="Effectuer une recherche dans le site">Rechercher</a>&nbsp;|
 &nbsp;<a href="[(#URL_PAGE{membre}|parametre_url{'id_auteur',1})]" title="Contacter le webmaster">Contacter le webmaster</a>&nbsp;<br />
 


&nbsp;<a href="[(#URL_PAGE{membre}|parametre_url{'id_auteur',1})]" title="Nous &eacute;crire">Nous &eacute;crire un e-mail</a>&nbsp;- L.P.P Jules Richard - 21, rue Carducci - 75019 Paris - Tel: 01.53.72.83.60 - Fax : 01.53.72.83.70 <br />
<p class="centre blanc gras logo_bas">

<a href="http://amicale.jr.free.fr/" title="Visiter le site de l'Amicale Jules Richard"><img src="#CHEMIN{IMG/banniere_amicale.jpg}" alt="banni&egrave;re du de l'Amicale Jules Richard" title="Visiter le site de l'Amicale Jules Richard"/></a>&nbsp;
<a href="http://www.education.gouv.fr/" title="Visiter le site  http://www.education.gouv.fr"><img  src="#CHEMIN{IMG/banniere_educ_nationale.jp g}" alt="banni&egrave;re du Minst&egrave;re de l'Education nationale" title="Visiter le site  http://www.education.gouv.fr"/></a>
 

</p>
       
        </div>


[(#REM)   fermeture pied de page  ]

Et voici la feuille de style:

html,body{
	margin: 0;
	}

body{	
	font: 0.8em "Trebuchet MS",arial, sans-serif;
	clear:both; 
	}

p, label{	margin:0;
	padding: 10px;
}



#footer{
	clear:left;
	padding:5px 0;
	margin:5px;
	text-align:center;
	height:auto;	
}

/* englobe tout. Permet d'ajouter des choses ou des fonds à droite, à gauche, au dessus et en dessous du surcontent. */
#container{
	width:780px;
	margin: 10px auto;
	}
/* englobe le content et le pied de page mais pas le header. Permet de placer des choses sous le header. */
#surcontent{
	width:747px;
	margin: 0 auto;
	}	
/* englobe les boites et les deux colonnes. */
#content{
	width:747px;
	clear: left;	
	}

Le problème c’est que sur IE (6) tout s’affiche comme prévu, mais sur Firefox (2.0.0.7)les logos sont coupés. J’ai essayé de résoudre le problème avec "height : ..." mais sans succès.

Quelqu’un aurait-il une piste ? merci

http://julesrichard.fautvoir.com
Modifié par artemisangel (13 Feb 2008 - 10:17)

Salut,

La css rendue est indigeste... mais c'est avec un peu de chance une histoire de overflow: auto; mais où ?
Suis pas d'un grand secours sur le coup

Bonjour,

Le rendu obtenu est parfaitement normal: tu demandes au paragraphe qui contient ces images de prendre une hauteur de 23px. Le paragraphe prend donc une hauteur de 23px. Et le contenu (images), qui fait plus de 23px de haut, déborde allègrement.

Solution: virer cette hauteur parasite.

Merci beaucoup! Ca marche très bien maintenant et les réponses furent rapides!

J'avais tenté de modifié les "height" de tout sauf de logo bas ! J'ai encore pas mal de choses à apprendre sur les CSS