Du texte dans un JCarousel

Salut tout le monde

Voilà plusieurs jours que j'essaye sans succès de placer du texte sur un JCarousel.

L'objectif est d'avoir sur chaque image qui défile, un texte descriptif, positionné en hauteur et largeur.
Pas de souci sous FF,opéra... mais sous IE...
il faut que je fasse un zoom in zoom out pour qu'il apparaissent, ou que je recharge la page.
Cependant je pense que c'est pas propre, est que j'ai un souci dans les "position"
voilà mon code source

<table>
	<tr>
		<td>
			<div id="conteneur">
				<div id="mycarousel" class="jcarousel-skin-tango"> 
					<ul>
						<li>
							<div style="position: absolute; top: 104px; margin: 0px; padding: 0px; left: 0px; width: 500px;">
								<span  style="position: absolute; left:280px;">
									<font color="#ffffff">TEST1</font>
								</span>
							</div>
							<img src="images/carousel/test1.jpg">
						</li>
						<li>
							<div style="position:absolute;top:264px; width:500px">
								<span style="position:absolute;left:40px;">
									<font color="#ffffff">TEST2</font>
								</span>
							</div>
							<img src="images/carousel/test2.jpg">
						</li>
					</ul>
				</div>
				<div class="container-coin">
					<div class="coin-top-left"></div>
					<div class="coin-top-right"></div>
					<div class="coin-bottom-left"></div>
					<div class="coin-bottom-right"></div>
				</div>
			</div>';
		</td>
	</tr>
</table>
 

voilà mon code source généré

<table>
	<tbody><tr>
		<td>
			<div id="conteneur">
				<div class=" jcarousel-skin-tango">
					<div style="position: relative; display: block;" id="mycarousel" class="jcarousel-container jcarousel-container-horizontal"> 
						<div style="overflow: hidden; position: relative;" class="jcarousel-clip jcarousel-clip-horizontal">
							<ul style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: -493.979px; width: 1100px;" class="jcarousel-list jcarousel-list-horizontal">
								<li jcarouselindex="1" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal">
									<div style="position: absolute; top: 104px; margin: 0px; padding: 0px; left: 0px; width: 500px;">
										<span style="position: absolute; left: 280px;">
											<font color="#ffffff">TEST1</font>
										</span>
			
									</div>
									<img src="images/carousel/test1.jpg">
								</li>
								<li jcarouselindex="2" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal">
									<div style="position: absolute; top: 264px; width: 500px;">
										<span style="position: absolute; left: 40px;">
											<font color="#ffffff">TEST2</font>
										</span>
			
									</div>
									<img src="images/carousel/test2.jpg">
								</li>
							</ul>
						</div>
					</div>
				</div>
				<div class="container-coin">
					<div class="coin-top-left"></div>
					<div class="coin-top-right"></div>
					<div class="coin-bottom-left"></div>
					<div class="coin-bottom-right"></div>
				</div>
		
			</div> 
		</td>
	</tr>
</tbody></table>

et mon Css

.jcarousel-skin-tango .jcarousel-container{-moz-border-radius:00px;background:#000;border:px solid #000;}
.jcarousel-skin-tango .jcarousel-direction-rtl{direction:rtl;}
.jcarousel-skin-tango .jcarousel-container-horizontal{width:500px;padding:0px 0px;}

.jcarousel-skin-tango .jcarousel-clip-horizontal{width:500px;height:333px;}
.jcarousel-skin-tango .jcarousel-item{width:500px;height:333px;}
.jcarousel-skin-tango .jcarousel-item-horizontal{margin-left:0;margin-right:00px;}
.jcarousel-skin-tango .jcarousel-direction-rtl .jcarousel-item-horizontal{margin-left:10px;margin-right:0;}
.jcarousel-skin-tango .jcarousel-item-placeholder{background:#fff;color:#000;}

.container-coin {position: relative; width:500px;padding:0px 0px;}
.coin-top-left {position:absolute;top:-333px;left:0px;width:50px;height:50px;cursor:pointer;background:transparent url(../images/carousel/coin-sprite.png) no-repeat 0 -200px;}
.coin-top-right {position:absolute;top:-333px;left:450px;width:50px;height:50px;background:transparent url(../images/carousel/coin-sprite.png) no-repeat 0 -300px;}
.coin-bottom-left {position:absolute;top:-50px;left:0px;width:50px;height:50px;background:transparent url(../images/carousel/coin-sprite.png) no-repeat 0 0;}
.coin-bottom-right {position:absolute;top:-50px;left:450px;width:50px;height:50px;background:transparent url(../images/carousel/coin-sprite.png) no-repeat 0 -100px;}

je sais plus quoi faire je m'arrache les cheveux:

j'ai réussit sous tous les navigateurs(FF,opera,safari,Khtml,chrome) sauf IE,

mais sous IE
le texte n'apparait pas mais si je joue sur le zoom ca apparait...???
c'est bizarre nan?

<div id="conteneur">
	<div class=" jcarousel-skin-tango"><div style="position: relative; display: block;" class="jcarousel-container jcarousel-container-horizontal"><div style="overflow: hidden; position: relative;" class="jcarousel-clip jcarousel-clip-horizontal"><ul style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 2600px;" id="mycarousel" class="jcarousel-list jcarousel-list-horizontal">
			<li jcarouselindex="1" style="float: left; list-style: none outside none;" class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal">
				<div style="position: absolute; top: 250px; height: 210px; width: 500px;">
					<span style="position: absolute; left: 40px;">
						<h2 class="h1classification">
							<a href="/fr/product-p-788.html" border="0">
								Des bijoux artisanaux
							</a>
						</h2>

					</span>
				</div>
				<a href="/fr/boucles-doreilles-corail-rouge-p-788.html" border="0"><img src="images/carousel/product788.jpg" alt="Des bijoux artisanaux" height="333" width="500">
				</a>
			</li>

Si quelqu'un avais une idée.
Car voila plusieurs semaine que je patauge..
Modifié par gotcha5832 (04 Dec 2010 - 12:56)