28122 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai intégré une pop up thickbox sur une de mes pages, que vous pourrez voir ici:
http://www.princessedunjour.com/bijoux-mariage/test.htm

J'ai cependant un petit problème, qui ne se produit que sur firefox (en tout cas pas de soucis sur ie6).

Quand on clique sur une des 4 images, on a bien l'effet désiré mais sur firefox, le fond transparent sous la pop up est coupé au niveau de mon footer. Du coup, l'effet de transparence n'est pas sur toute la page...

ma test.css(assez longue) !

*{
padding:0;
border:0;
margin:0;
}

body {
background:url(../images/background.gif) repeat-y center top;
font-family:Geneva, Arial, Tahoma, sans-serif;
font-size: 85%;
}

#conteneur {
position:relative;
width: 770px;
margin:10px auto; 
border:1px solid #6C3089;
background-color:#FFF;
}

/*********************************
Header
*********************************/

#header {
height: 67px;
}

/*********************************
Menu haut
*********************************/

#haut{
width:770px;
height:1.5em;
margin-top:.3em;
line-height:1.5em;
background-color:#8E6784;
border-top:1px solid #6C3089;
border-bottom:1px solid #6C3089;
}


/*********************************
Gauche
*********************************/

#gauche {
position: absolute;
left:0;
width: 120px;
background-color:#E9E0E7;
margin: 37px 0 0 5px;
padding: 0 10px 40px 0px;
}


/*********************************
Centre
*********************************/

#centre {
margin-left: 180px;
}



/*********************************
Pied
*********************************/

#pied {
clear:both;
height: 15px;
color:#666;
font-size:0.7em;
text-align:center;
}


et la thickbox.css

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> global settings needed for thickbox <<<-----------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
*{padding: 0; margin: 0;}

html, body {
min-height: 100%;
height: auto !important;
height: 100%
}


/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox specific link and font settings <<<------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_window {
	font-family:Geneva, Arial, Tahoma, sans-serif;
  font-size:0.9em;
	color: #333333;
	}

#TB_secondLine {
	font: 10px Arial, Helvetica, sans-serif;
	color:#666;
}

#TB_window a:link {color: #666666;}
#TB_window a:visited {color: #666666;}
#TB_window a:hover {color: #000;}
#TB_window a:active {color: #666666;}
#TB_window a:focus{color: #666666;}

/* ----------------------------------------------------------------------------------------------------------------*/
/* ---------->>> thickbox settings <<<-----------------------------------------------------------------------------*/
/* ----------------------------------------------------------------------------------------------------------------*/
#TB_overlay {
	position: absolute;
	z-index:100;
	top: 0px;
	left: 0px;
	background-color:#000;
	filter:alpha(opacity=30);
	-moz-opacity: 0.3;
	opacity: 0.3;
}

#TB_window {
	position: absolute;
	background: #ffffff;
	z-index: 102;
	color:#000000;
	display:none;
	text-align:left;
}

#TB_window img {
	display:block;
	margin: 0 auto;
	padding-top:15px;
	}

#TB_caption{
	height:25px;
	padding:7px 20px 10px 15px;
	float:left;
	font-size:0.9em;
	color:#666;
	font-weight:bold;
}

#TB_closeWindow{
	height:25px;
	padding:20px 20px 10px 0;
	float:right;
	font-size:0.9em;
}

#TB_closeAjaxWindow{
	padding:5px 10px 7px 0;
	margin-bottom:1px;
	text-align:right;
	float:right;
}

#TB_ajaxWindowTitle{
	float:left;
	padding:7px 0 5px 10px;
	margin-bottom:1px;
}

#TB_title{
	background-color:#e8e8e8;
	height:27px;
}

#TB_ajaxContent{
	clear:both;
	padding:2px 15px 15px 15px;
	overflow:auto;
	text-align:left;
	line-height:1.4em;
}

#TB_ajaxContent p{
	padding:5px 0px 5px 0px;
}

#TB_load{
	position: absolute;
	display:none;
	height:100px;
	width:100px;
	z-index:101;
}

#TB_HideSelect{
	z-index:99;
	position:absolute;
	top: 0;
	left: 0;
	background-color:#fff;
	border:none;
	filter:alpha(opacity=0);
	-moz-opacity: 0;
	opacity: 0;
}

#TB_iframeContent{
	clear:both;
	border:none;
	margin-bottom:-1px;
	margin-top:1px;
	margin-bottom:1px;
}


Avez-vous une idée ?

Merci à tous
Modifié par pp51 (22 Jan 2007 - 10:45)
Bonjour à tous,

Le problème semble venir de là (enfin je pense)


html, body {
min-height: 100%;
height: auto !important;
height: 100%
}


ou

#TB_overlay {
position: absolute;
z-index:100;
top: 0px;
left: 0px;
background-color:#000;
filter:alpha(opacity=30);
-moz-opacity: 0.3;
opacity: 0.3;
}


Merci d'avance pour votre aide sur le sujet Smiley cligne