28173 sujets

CSS et mise en forme, CSS3

Bonjour

J'ai un petit soucis de mise en page avec Firefox (et Opera), soucis que je ne rencontre pas avec IE... En fait il semblerait que IE ait un soucis mais qui fait que lui affiche ce que je veux Smiley ravi

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 et autres, il me les claque à droite de la première ligne d'images Smiley fache


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ù bien ???
Modifié par cedric_g (17 May 2006 - 17:28)
Bonsoir,
Peut-être que ceci (en orange) :
.pagenav {
	font: 0.9em;
	margin-bottom: 4px;
	[#orange]clear: both;[/#]
	}


(Ou alors ici :
p.pagenav {
	font: 0.9em;
	margin-bottom: 4px;
	text-align: center;
	[#orange]clear: both;[/#]
	} 
)
Modifié par Smiley neko (17 May 2006 - 17:25)
Ahhhh MERCI Smiley ravi


Par contre (comme je suis un peu perfectionniste) y'a encore un décalage entre IE et Firefox (les marges du "contenu")

Mais bon je ne vais pas abuser, je vais chercher tout seul Smiley lol


Merci encore !