28173 sujets

CSS et mise en forme, CSS3

Espace en trop uniquement sous IE

Bonjour,

Je profite de mes congès pour tenter de corriger des problèmes que j'avais dans un site, mais même en ayant extrait le code qui pose problème pour l'isoler le problème et toujours présent.

Sous FireFox et Opera, pas de problème.

J'obtiens visuellement un écart entre mon </q> et mon </a>

Sur les 2 "blocs" afficher je l'ai représenté à droite par un tiret

Ci dessous le code Html (extraction du code généré via PHP) et plus bas le Css (aussi restreint).


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Galerie de photos - Dossiers</title>
<meta http-equiv="Content-Language" content="fr" />
<meta http-equiv="Content-Type" content="text/HTML; charset=UTF-8" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="ImageToolbar" content="no" />
<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />
<meta http-equiv="title" content="Archives photos" />
<meta http-equiv="description" content="galerie de photos &amp; de captures de jeu" />
<meta http-equiv="keywords" content="galerie;archive;photo;photos" />
<meta http-equiv="robots" content="nofollow,index,noall" />
<meta http-equiv="revisit-after" content="15 days" />
</script><link href="css/admin2.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
<div class="pb">

<UL><LI>
<H3><SPAN class=icoDir>2</SPAN> | <SPAN class=icoImg>0</SPAN></H3><A href="?idDossier=8">
<DIV class=dosPhotos><SPAN>Captures jeux</SPAN></DIV><Q>Captures d'écrans de jeux</Q> </A></LI>
<LI>
<H3><SPAN class=icoDir>0</SPAN> | <SPAN class=icoImg>0</SPAN></H3><A href="?idDossier=29">
<DIV class=dosPhotos><SPAN>Vacances</SPAN></DIV><Q>Photos des vacances</Q>-</A></LI></UL>

</div>
</body>
</html>


CSS

/* Photos Css */

body {
	margin: 0;
	background-color: #fff;
	color: #000;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 84%;
}

.pb
{
	clear: both;
	margin: 0 5px;
	padding: 0;
	/*background-color: Aqua;*/
	border-top: 1px solid #fff;	/* force moz to display float before */
}

/* =============================================== */

.pb h2
{
	font: bold 16px Verdana, Geneva, Arial, Helvetica, sans-serif;
	/*background-color: #ECECEC;
	border-bottom: 1px solid #b9b9b9;*/
	
	margin: 5px;
	padding: 3px 2px;
	text-align: center;
	color: #a00;
	background-color: #efede0;
	border: 1px solid #9e9286;
}

.pb h2 #descGen
{
	font-size: 11px;
	font-weight: normal;
	color:#424242;	
}

.pb ul
{
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;	
	float: left;
	text-align:center;
	margin: 3px;
	padding: 0;
	display:block;
   list-style-type: none;
}

.pb ul li
{
	float: left;
	/*margin:3px;*/
	margin: 2px 2px 0 2px;
	padding: 0;
	width: 150px;
	height: 390px;
	border: none;
}

.pb li h3
{
	/*color:#B22222; DISABLE*/
	/*border: 1px solid #B22222; DIABLE*/
	/*background-color: #F9B0BF; DISABLE*/
	color:#766A5F;
	border:1px solid #9E9286;
/*	background-color:#D9D4D0;*/
	background-color:#E2DFDC;
	height: 16px;
	font-size:10px; /*TEMP*/
	padding: 0;
	margin:0;
	line-height: 16px;
}

/* Couleur pour indiquer dossier non disponible au publique : visible que pour admin */
.pb li h3.d
{
	color:#B22222;
	border: 1px solid #B22222;
	background-color: #F9B0BF;
}

.pb li h3 img
{
	vertical-align:middle; /* IE*/
	margin: 2px 0;
}

.pb li h3>img
{
	vertical-align:bottom; /* FX*/	
}
/* ======== TEST IMG en CSS ===========*/
.pb li h3 .icoDir
{
	background: url(../img/interface/icoNbDos.png) no-repeat 0;
	padding: 0 0 0 18px;
}
 
 .pb li h3 .icoImg
{
	background: url(../img/interface/icoNbImg.png) no-repeat 0;
	padding: 0 0 0 18px;
}

/*  ==================================== */

.pb li a
{
	float: left;
	/*text-align: center;*/
/*	border:solid 1px white;*/
   border:1px solid #9e9286;
	border-top: none;
/*	background-color: #E3E3E3;*/
	background-color: #efede0;
	margin: 0;
	padding: 0;
	width:150px;
	text-decoration: none;
	color: Black;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;	
	font-weight: bold;
	font-size: :11px;
}

.pb li a:hover
{
	/*color:red;	*/
}

.pb li a:hover span
{
	background-color: white;
	color:red;
	display: block;
}

.pb li a:hover q
{
	background-color: #EAEAEA;
	margin: 0;
}

/* Repertoire de la galerie */
.pb li a .dosPhotos, .pb li a:hover .dosPhotos,.pb li a .dosBack, .pb li a:hover .dosBack
{
	background-position: center;
	background-repeat: no-repeat;
	width:130px;
	height:98px;
	margin: 5px;
	text-align: center;	
}

/*Fond dossier*/
.pb li a .dosPhotos
{
	background-image: url(../img/interface/dossierPhotos.png);
}

/*Survol dossier*/
.pb li a:hover .dosPhotos
{
	background-image: url(../img/interface/dossierPhotosHover.png);
	cursor:pointer;
}
/*Dossier Retour */
.pb li a .dosBack
{
	background-image: url(../img/interface/dossierBack.png);
}

.pb li a:hover .dosBack
{
	background-image: url(../img/interface/dossierBackHover.png);
	cursor:pointer;
}

.pb li>a
{
/*	width:148px;*/
width:148px;
}

.pb li a img
{	
	border:1px solid black;
	margin: 5px 0;
	padding: 0;
}

/*Description dossier*/
.pb li q:before{ content: no-open-quote;}	
.pb li q:after{ content: no-close-quote; }

.pb li a q
{
	float: left;
	margin: 0 0 0 0;
	height: 42px;
	width:150px;
	color:#424242;
	padding: 0 0 0 0;
	text-align: left;
	background-color: #E3E3D5;
	font-size: 10px;
	overflow: auto;
}

.pb li a>q
{
	width:148px;
	margin: 0;
}

.pb li a:hover
{ 
 	background: url(../img/interface/fdDossierHover.png) repeat-x ;
   border:1px solid #c3c3c3;
	border-top:none;	
}


Merci de votre aide pour m'aider à trouver ce problème (mon idée vient du float: left de ".pb li a q" mais comment m'en passer ?)
Sujet clos
Aller à