[Résolu] [CSS] Soucis avec Firefox

[cedric_g]

Bonjour

J'ai un petit soucis de mise en page avec Firefox, soucis que je ne rencontre pas avec IE...

Voir ici : -http://reportages.aube-nature.com/concours-canin-scba-2006-berger-allemand-galerie.php


Sous IE, les pages pour la navigation dans la galerie sont bien SOUS la galerie ; sous Firefox, il me les claque à droite de la première ligne d'images 8O


Voici le code CSS :

/* Conteneur pour les listes (galeries...)
********************************************/

div#galerie-container {
	width: 680px;
	text-align:center;
	margin: 0px auto
}


/* Galerie photo avec commentaires
********************************************/

ul#galerie-comm 	{ 
	float:left 
}

ul#galerie-comm, ul#galerie-comm li { 
	list-style:none;
	margin:0;
	padding:0 
}

ul#galerie-comm li {
	float:left;
	display:inline;
	margin: 0 0 15px 20px;
	width:145px;
	text-align:center
}

ul#galerie-comm img {
	display:block;
	width:120px;
	height:92px;
	border:0px solid;
	margin:0 auto 5px
}

ul#galerie-comm a {
	display:block;
	padding: 5px 0;
	height:145px;
	background: #ffffff;
	color: #666666;
	border:1px dotted #ffffff;
	text-decoration: none
}

ul#galerie-comm a:hover {
	border-color:#999999
}



/* Navigation
********************************************/

.pagenav {
	font: 0.9em;
	margin-bottom: 4px;
}

p.pagenav {
	font: 0.9em;
	margin-bottom: 4px;
	text-align: center;
} 

p.pagenav a {
	background: #eeeeee;
	color: #0;
	padding:2px;
	border: 1px solid #bbbbbb;
	text-decoration: none;
	font-size:90%;
}

p.pagenav a:visited {
	background: #eeeeee;
	color: #0;
	padding:2px;
	border: 1px solid #bbbbbb;
	text-decoration: none;
	font-size:90%;
	text-align; center;
}
p.pagenav a:link {
	background: #eeeeee;
	color: #0;
	padding:2px;
	border: 1px solid #bbbbbb;
	text-decoration: none;
	font-size:90%;
	text-align; center;
}

p.pagenav a:hover {
	background: #bbbbbb;
	color:#0;
	text-align; center;
}

p.pagenav strong {
	color: black;
	padding:2px;
	border: 1px solid #bbbbbb;
	font-size:90%;
	text-align; center;
}

Et le code HTML :

<div id="galerie-container"><ul id="galerie-comm">
<li><a href="photo-2419-245-1.php">
<img src="http://www.chatterie-koolkat.com/photos/photos/v_2419.jpg" alt="#1 Confirm. mâle" >
#1 Confirm. mâle</a></li>
<li><a href="photo-2420-245-1.php">
<img src="http://www.chatterie-koolkat.com/photos/photos/v_2420.jpg" alt="#2 Confirm. mâle" >
#2 Confirm. mâle</a></li>
<li><a href="photo-2421-245-1.php">
<img src="http://www.chatterie-koolkat.com/photos/photos/v_2421.jpg" alt="#3 Confirm. mâle" >
#3 Confirm. mâle</a></li>

<!-- ici toutes les images ... --->

</ul></div>

<br>

<p class="pagenav">
<strong>1</strong> 
<a href="concours-canin-scba-2006-berger-allemand-galerie.php?page=2">2</a> 
<a href="concours-canin-scba-2006-berger-allemand-galerie.php?page=3">3</a> 

<!-- ici tous les n° de pages ... --->

</p>

Je pensais "bêtement" qu'une balise P ne pouvait s'afficher QUE sous une DIV dont on ne spécifiait pas le "float" ?...

J'ai faux où ???

 

[Tymir]

Même problème avec Opéra, c'est plutot IE qui déconne ;-)

 

[cedric_g]

Peut-être, mais lui affiche ce que moi je veux :twisted:


Y'a pas un truc pour dire que le DIV "container-galerie" puisse être affiché comme une ligne plutôt qu'un bloc ?

En fait les n° de pages (qui sont dans une balise "P") semblent s'afficher malgré les paddings de ma mise en page ???

 

[narayana]

rajoute après ton bloc

<div id="galerie-container">......</div>

un

<div style="clear:both"></div>

pour voir ce que cela donne

 

[cedric_g]

Merci

Je viens d'avoir la réponse sur un autre forum (dans la même minute, comme quoi !) et effectivement, c'est bien ça !

Reste un petit soucis de marges un peu plus large à gauche sur Firefox que sur IE, mais je vais m'en occuper (ça doit pas être ben compliqué !)



Encore merci !