Problème entre firefox et IE 7

Question

al_ange

2 Dec 2007 à 19:17

http://www.medrano.ch/photos/roses.html

sur cette page-là, j'ai plusieurs problèmes avec les deux explorateurs :

le menu de la galerie, je n'arrive pas à centrer pour les deux les images du menu !

Quant à la grande photo également que la verticale dépasse...Ce que je voudrais obtenir, c'est que la div#galerie d'adapte automatiquement quand c'est une horizontale ou verticale et que bien entendu ca fonctionne sur les deux explorateurs...J'ai tellement fait de tests...une fois, ca joue sous firefox, mais pas sur IE 7...voici donc mon dernier changement :

sous css :



@import "layout.css";
div#galerie
{
	width: 600px;
	padding: 15px;
	text-align: center;
	font: 0.9em Georgia, serif;
	background-color: #CCCCCC;
	border: thin solid #FFFFFF;
	display: inherit;
	margin-left: 80px;
	margin-top: 25px;
	height: 500px;
}

ul#galerie_mini
{
	list-style-type: none;
	height:500px;
	overflow:auto;
	background-color: #666666;
	border: thin solid #FFFFFF;
	margin-top: 10px;
	
}


ul#galerie_mini li
{
	margin-top: 10px;

	
}

ul#galerie_mini li a img
{
	border: thin solid #FFFFFF;
	text-align: center;
	z-index: auto;
}

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;
}

et la page roses.html



<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="script.js"></script>

<title>PHOTO</title>
<link href="../themes/test/style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
-->
</style>
</head>

<body>

<div  id="titres_photos"> <h2 class="titre"> MES&nbsp;ROSES </h2> 
</div>
<div id="sidebar">
<ul id="galerie_mini">
    <li><a href="Grose_rouge.jpg" title="BARKAROLE"><img src="rose_rouge.JPG" alt="BARKAROLE" class="cadre" /></a></li>
    <li><a href="Grose_jaune.jpg"title="Mme A. Meilland"><img src="rose_jaune.jpg" alt="Mme A. Meilland" /></a></li>
    <li><a href="Grose_blanche.jpg"title="Rosa"><img src="rose_blanche.jpg" alt="Rosa (TH)" /></a></li>
    <li><a href="GJaune_orange.jpg"title="Jaune orange"><img src="jaune_orange.jpg" alt="jaune_orange" /></a></li>
    <li><a href="G2roses_rouges.jpg"title="Roses_rouges"><img src="2roses_rouges.jpg" alt="Roses_rouges" /></a></li>
</ul>
</div>
<div id="galerie"> 
<dl id="photo">
    <dt > BARKAROLE </dt>
    <dd>&nbsp;</dd>
    <dd><img src="Grose_rouge.jpg" alt="Rose_rouge" name="big_pict" id="big_pict" /> </dd>    
</dl>
<p class="right"> <a href="http://www.medrano.ch">Retour au blog &gt;&gt;</a></p>
</div>

</body>
</html>

al_ange

2 Dec 2007 à 19:19

Ah, je précise..

pour le menu à droite, je l'ai mis sous #sidebar, car je veux que le menu soit placé là comme la colonne du blog ! Pour moi, j'ai été donc quitte de mettre les marges et float nécessaires !

Sujet clos

CSS et mise en forme, CSS3

Problème entre firefox et IE 7