28173 sujets

CSS et mise en forme, CSS3

Tout est décalé...

Bonjour à tous,
je ne sais pas si je suis tellement au bon endroit pour poser ma question mais une chose est sure (du moins je pense) c'est que le sujet n'a pas déjà été aborder, alors je me lance :

Mon problème est assez simple a expliquer il concerne le script Mooshow (http://www.mooshow.eatpixels.com/) celui-ci fonctionnait impeccablement bien sous ie6 et maintenant que ie7 est arrivé l'affichage de ce script en est complètement changé.
Perso, vu l'affichage je pense surtout à un problème de CSS mais mon niveau (plus que débutant) m'empêche de trouvé ce qui ne va pas.

En vous remerciant par avance

FARFADAM

-------------------------

la CSS du script :


/* mooShow 0.01 beta CSS Document */

.mooshow a img { 
	border: 1px;
	outline: none;
	-moz-outline: none;
	}

.mooshow_outerContainer{
	position: relative;
	background-color: #fff;
	color: inherit;
	width: 20px;
	height: 1px;
	margin: 0 auto;
	display: table;
	}

.dropShadowBorder {
	border-top:1px solid #FFF;
	border-right:1px solid #CCC;
	border-left:1px solid #FFF;
	border-bottom:1px solid #CCC;
	}

.mooshow {
	position: inherit;
	display: none;
		}
	
.mooshow_loading{
	position: absolute;
	top: 0;
	left: 0;
	display:none;
	}

.mooshow_copyright{
	position: absolute;
	top: 15px;
	right: 10px;
	color: #CCCCCC;
	font-size:9px;
	}

.mooshow_extras{
	margin: 0 auto;
	text-align: left;
	color:#666666;
	background-color: inherit;
	}

.mooshow_topNav{
	padding-top: 5px;
	padding-bottom: 15px;
	text-align: left;
	font-size: 8px;
	background-color: inherit;
	color:#CCCCCC;
	line-height: 170%;
	height: 35px;
	width: 100%;
	}

.mooshow_captions{
	background-color: #FFF;
	font-size:12px;
	color:#000000;
	margin: 0 auto;
	text-align: left;
	line-height:140%;
	height: 35px;
	width: 100%;
	}

.mooshow_contentContainer{
	background-color:#666666;
	color: inherit;
	position: relative;
	text-align: center;
	line-height: 0.0;
	}
	
.mooshow_overlayNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	}

.mooshow_prevLink, .mooshow_nextLink{
	width: 30%;
	height: 100%;
	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
	outline:none;
	}
	
.mooshow_prevLink { left: 0; float: left; outline: none; -moz-outline: none;}
.mooshow_nextLink { right: 0; float: right; outline: none; -moz-outline: none;}
.mooshow_prevLink{ background: url(prev.gif) left 100% no-repeat; }
.mooshow_nextLink{ background: url(next.gif) right 100% no-repeat; }


.mooshow_IPTC{
	position: absolute;
	top: 0px;
	left: 0px;
	height: auto;
	background-color: #000;
	color:#CCCCCC;
	font-size:9px;
	line-height:140%;
	text-align:left;
	filter:alpha(opacity=80); 
	opacity: 0.8; 
	opacity: 0.8;
	display: none;
	}
		
.mooshow_IPTCbutton{
	position: absolute;
	top: 0;
	left: 0;
	}

.mooshow_IPTC_left{
	float: left;
	text-align:right;
	width:18%;
	}

.mooshow_IPTC_right{
	float: right;
	text-align:left;
	width:80%;
	}
Je ne comprend pas trop le problème, j'ai testé sous ie7, je ne vois rien de choquant, qu'est ce qui ne va pas ?
La réponse est assez simple, essaye de changer la display:table; en display:inline; dans la class .mooshow_outerContainer.

Chez moi ça fonctionne, par contre j'ai plusieurs autres modifs a faire sur mes style de boutons...

rhalala bon vivement que tout le monde soit passer à ie7...

Monsieur.VD.
Sujet clos
Aller à