28173 sujets

CSS et mise en forme, CSS3

[résolu] IE et disparition de background image avec des liens

Bonjour et merci à l'alsacréationS team pour tous ces tutos et articles et liens et.... Smiley smile

Bon, venons-en au fait :

Le background image disparaît sur le h2 (spectacles jeune public) de la page sur IE et pas sur les autres navigateurs, de même les thumbnails - définis en background image dans le css - de la galerie (que j'ai adaptée de l'excellent site http://www.cssplay.co.uk/menu/gallery_click.html) n'apparaissent pas sous IE...

la page incriminée est ici : http://moreofthis.free.fr/castors/galerie.html

le css en cause (je n'ai gardé que ce qui est utile ici) : 

* {margin: 0; padding: 0;}

img {border: 0;}

body {
	background: #ddd;
	color: #333;
	font: normal 90% verdana,arial,sans-serif;
	margin: 1em;
	text-align: center;
}

p {margin: 1em 0;}

h1 {
	background: transparent;
	color: #904f4f;
	font: bold 1.5em verdana,arial,sans-serif;
	margin: 0 130px;
	padding: 15px 0;
	text-align: center;
}

h2 {
	background: transparent url(images/boule_1.jpg) no-repeat left bottom;
	color: #904f4f;
	font: normal 1.2em verdana,arial,sans-serif;
	letter-spacing: 4px;
	margin: 0 0 1em 0;
	padding: .1em 0 .2em 2em;
}

h1 span, h2 span {display: none;}

h3 {
	background: transparent;
	color: #904f4f;
	font: normal 1.2em verdana,arial,sans-serif;
	margin: 0 0 1em 0;
}

h4 {
	background: transparent;
	color: #c63;
	font: bold 1em verdana,arial,sans-serif;
	margin: 0 0 1em 0;
}

h5 {
	background: transparent;
	color: #c63;
	font: bold 1.1em verdana,arial,sans-serif;
	margin: 1em 0;
}

a:link, a:visited	{
	background: transparent;
	color: #c63;
	text-decoration: none;
}

a:hover, a:active{
	background: transparent;
	color: #bbb;
	text-decoration: underline;
}

/* page layout */

#main {
	background: transparent;
	margin: 0 auto;
	padding: 0;
	text-align: justify;
	width: 760px;
}

#content {
	background: transparent;
	display: inline;
	float: right;
	margin: 20px 10px 10px 0;
	padding: 10px;
	text-align: left;
	width: 65%;
}

/* fin page layout */

/* page galerie photo */

a.container, a.container:visited {color:#080;} 

a.gallery, a.gallery:visited {
	display: block;
	display: inline-block;
	color: #bbb;
	text-decoration: none;
	border: 1px solid #fff;
	width: 65px;
	height: 65px;
	float: left;
	margin: 4px;
	z-index: 50;
}

a.slide01 {background: url(galerie/galerie_cdb_img1_tn.jpg);}
a.slide02 {background: url(galerie/galerie_cdb_img2_tn.jpg);}
a.slide03 {background: url(galerie/galerie_cdb_img3_tn.jpg);}
a.slide04 {background: url(galerie/galerie_cdb_img4_tn.jpg);}
a.slide05 {background: url(galerie/galerie_cdb_img5_tn.jpg);}
a.slide06 {background: url(galerie/galerie_pin_img1_tn.jpg);}
a.slide07 {background: url(galerie/galerie_pin_img2_tn.jpg);}
a.slide08 {background: url(galerie/galerie_pin_img3_tn.jpg);}
a.slide09 {background: url(galerie/galerie_pin_img4_tn.jpg);}
a.slide10 {background: url(galerie/galerie_pin_img5_tn.jpg);}
a.gallery em, a.gallery span {display:none;}
a.gallery:hover {border: 1px solid #bbb;}

.container {position:relative; font-size: .8em; width: 400px; height: 520px; background: transparent; margin: 0;}
.container img {border:1px solid #bbb;}
.container .thumbs {position:absolute; left:0; top:0;}
.container a.gallery:hover span {display:block; position:absolute; width:400px; height:30px; top:75px; left:5px; padding:0; color: #999;  z-index:100;}
.container a.gallery:hover span:first-line {font-size:1.1em; color:#333;}
.container a.gallery:active, .container a.gallery:focus {border:1px solid #000;}
.container a.gallery:active em, .container a.gallery:focus em {display:block; position:absolute; width:400px; height:400px; top:110px; left:5px; padding:0; color:#000; z-index:50;}
.container h1 {clear:both; margin:0; padding-top:200px; text-align:center; font-family: georgia, "times new roman", serif; font-size:3em; font-weight:normal; color: #eedccc;}

/* fin page galerie photo */


Merci !
Modifié par Tomek (24 Apr 2006 - 08:52)
Ok, à force de chercher, j'ai résolu le problème du background image sur le h2 : il suffisait d'ajouter un "haslayout" pour IE, en l'occurence j'ai mis {height: 100%}

Pour la galerie photo, je continue de chercher...
Bon, alors finalement j'ai trouvé avec l'aide de Stu de css play : il s'agissait d'enlever {background: transparent} dans mes liens par défaut du site...
Sujet clos
Aller à