[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


Voici le code CSS :

Code: Tout sélectionner

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

Code: Tout sélectionner

<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


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

Code: Tout sélectionner

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

un

Code: Tout sélectionner

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