Moi aussi, j'ai un problème également entre firefox et IE 7 !
http://www.medrano.ch/photos/roses.html[/url]
Sur Firefox, la présentation est juste alors que sur IE 7, le menu des petites images à droite, sont comme mangées...
code css
@import "layout.css";
ul#galerie_mini
{
list-style-type: none;
float: right;
height:495px;
overflow:auto;
background-color: #666666;
border: thin solid #FFFFFF;
width: 130px;
margin-right: 130px;
}
ul#galerie_mini li
{
margin-top: 10px;
}
ul#galerie_mini li a img
{
border: thin solid #FFFFFF;
margin-top: 2px;
margin-bottom: 2px;
}
dl#photo
{
height:400px;
padding-top: 20px;
}
dl#photo dt
{
color: #F90;
font-family: Georgia, serif;
font-style: italic;
font-weight: bold;
margin-top: -10px;
text-align: center;
list-style-type: none;
background-color: #FFCC99;
margin-bottom: 20px;
}
dl#photo dd
{
margin: 0;
text-align: center;
}
dl#photo img
{
border: thick solid #FFFFFF;
}
/* @import "layout-gauche.css"; */
/* Les éléments HTML en général
*******************************************************************************/
body{
background-image:url(../../img/arriere_plan.jpg);
background-repeat:no-repeat;
background-position: right top;
background-color:#f5b079;
margin: 0 auto;
}
.titre {
color: #FFFFFF
}
.cadre {
border: thin solid #FFFFFF;
}
h1, h2, h3, h4, h5, h6{
font-family: Cambria;}
h1{font-size: 1.5em;}
h2{font-size: 1.4em;}
h3{
font-size: 14px;
}
h4{
font-size: 14px;
}
h5{font-size: 1.1em;}
h6{font-size: 1em;}
pre, code{
font-size: 1.2em;
}
pre{
width: 100%;
overflow: auto;
border: 1px solid #CCC;
}
html>body pre {
overflow: auto;
width: auto;
}
fieldset{
border: none;
}
label{
cursor: pointer;
}
.field label{
display: block;
}
input{
border: 1px solid #999;
}
textarea{
width: 100%;
font-size: 1em;
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
}
a{
color: #FFFFFF;
}
a:visited{
color: #FF9900;
}
a:hover{
color: #FF0000;
}
.left{
float: left;
margin-right: 1em;
}
.right{
float: right;
margin-left: 1em;
text-decoration: none;
}
/* Le contenu
*******************************************************************************/
.day-date {
display: none;
}
.post-date {
float: left;
color: #FF9933;
font-family: Georgia, 'Lucida sans ms', Verdana, Arial, Helvetica, sans-serif;
font-size: 0.9em;
text-align: center;
font-weight: bold;
margin: 0px 10px 0 0;
padding: 8px 3px;
width: 55px;
line-height: 1em;
background-color: #FFFFFF;
}
.post-title{
color: #000000;
margin-bottom: 0;
background-color: #FFCC99;
margin-left: 70px;
font-size: 17px;
}
.post-title a{
color: #F90;
background: transparent;
text-decoration: none;
}
.post-info{
margin-top: 5px;
color: #FFFFFF;
background: transparent;
padding-bottom: 1ex; /*border-bottom: 1px solid #FC0;*/
font-size: 14px;
}
.post-info a{
color: #666666;
background: transparent;
text-decoration: none;
}
.post-content{
text-align: justify;
margin-top:10px;
margin-left: 70px;
}
.post-content blockquote{
font-family: Cambria;
font-style: italic;
}
.post-info-co{
text-align: right;
font-size: 13px;
color: #FF9966;
}
#trackbacks blockquote, #comments blockquote{
padding: 1ex 1em;
margin-left: 0px;
margin-right: 0px;
border-left:#FFFFFF solid 2px;
border-right:#FFFFFF solid 2px;
background-color:#FFCC99;
}
/* La barre de navigation
*******************************************************************************/
#sidebar div ul{
margin: 0;
padding: 0;
list-style: none;
}
#sidebar h2, #sidebar h3{
color: #FFCC66;
margin: 0 0 1ex 0;
}
#sidebar h3{
font-size: 14px;
margin: 0;
text-align:center;
}
#sidebar h2{
font-size: 17px;
margin: 0;
}
#sidebar div#search{
background: #666666;
line-height: 2.3em;
}
#search fieldset, #search p{
margin: 0;
padding: 0;
}
#q{
padding-left: 18px;
background: #fff url(img/q.png) no-repeat 4px center;
}
#sidebar div#calendar{
/*border-top: 1px solid #F0F0F0;*/
}
#sidebar div#calendar table{
font-size: 0.7em;
text-align: center;
margin: 0 auto;
border-collapse: collapse;
}
#sidebar div#calendar table caption{
margin: 0 auto;
}
#sidebar div#calendar table th{
color: #f5b079;
background: transparent;
}
#sidebar div#calendar table td{
width: 14%;
line-height: 2em;
border: 1px solid #EEE;
}
#sidebar div#calendar table td a{
display: block;
background: #EFA;
color: #493;
font-weight: bold;
text-decoration: none;
}
#sidebar div#calendar table td a:hover{
background: #DBB8DC;
color: #636;
}
/* Le pied de page
*******************************************************************************/
#footer{
margin: 0;
padding: 1em;
border-top: 1px solid #CCC;
background: #EEE;
color: #666;
}
#footer a{
color: #999;
}
#top{
height:208px;
width: 674px;
margin-left: 280px;
}
#titres {
height: 30px;
background-image: url(../../img/titre.gif);
margin-left: 80px;
margin-right: 200px;
text-indent: 20px;
margin-top: -20px;
}
#content{
float: left;
width: 600px;
margin-top:25px;
margin-left:80px;
background-color:#CCCCCC;
padding: 20px;
border: thin solid #FFFFFF;
}
#sidebar{
float: right;
width: 180px;
margin-right: 150px;
margin-top: 15px;
}
#sidebar div{
width: 180px;
background-color: #666666;
margin-bottom: 10px;
border: #FFFFFF solid 1px;
padding: 10px;
margin-top: 10px;
}
#footer{
padding: 1ex 1em 1ex 1em;
margin : 0;
clear: both;
}
#titres_photos {
height: 30px;
background-image: url(../../img/titre.gif);
margin-left: 80px;
margin-right: 200px;
text-indent: 20px;
margin-top: 120px;
}
En fait les div qui sont concernées c'est surtout pour div ul#galerie_mini, mais je ne vois pas qu'est-ce qui manque !! De plus, je n'arrive pas à centrer les photos au milieu de la galerie qu'elle soit owerflow ou non !