C Motion, CSS and IE on my site

[buzuc]

Script : C Motion http://www.dynamicdrive.com/dynamici...iongallery.htm

Hi there,
I'm back to submit a new problem I got on my website.

Here is the case :
The Cmotion script is running well on firefox but not on IE.

you can see the example here :my site in test . The problem is that when you want to see the pages "collection", my div is set to the left and the cmotion gallery is not working anymore. But only with IE !

here is the CSS file i'm using on my site. :

body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	margin: 0;
	padding: 0;
	color: White;
	background-color: Black;
}
#conteneur {
	position: absolute;
	width: 750px;
	left: 50%;
	margin-left: -375px;
	/*border: thin solid Blue;*/
}
#centre {
	background-color: Black;
	background-image: url(images/fond_page.gif);
	background-repeat: no-repeat;
	background-attachment: scroll;
	display: block;
	width: 662px;
	height: 476px;
	background-position: center; /*border: thin solid Silver;*/
	border-bottom: thin solid Silver;
	border-left: thin solid Silver;
	border-right: thin solid Silver;
}
#pied {
	height: 30px;
	background-color: Black;
	text-align: right;
	margin-right: 100px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	padding: 0;
	color: #666666;
}
p {margin: 0;}
#menu {
	height: 32px;
	width:662px;
	background-color: Black;
	color: White;
	display: block;
	border-top: thin solid Silver;
	border-left: thin solid Silver;
	border-right: thin solid Silver;
	/*margin-left: 30px;*/
	/*border: thin solid Aqua;*/
}

#tableau{
	position: relative;
	float: center;
	margin-left: auto;
	width: 453px;
	margin-right: auto;
}
#tableauevents{
	position: relative;
	float: left;
	margin-left: 10px;
	width: 564px;
	margin-right: auto;
}
/****************Affichage boutons du menu*********************/
#OurBelief,#Events,#Collection,#WhoareWe,#Boutique {
	margin:0; padding:0;
	}
/*OUR BELIEF*/
#OurBelief a {
	display: block;
	width: 80px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: url("images/menu/Menu_OurBelief.gif") no-repeat 0 0;
	text-decoration: none;
}
#OurBelief a:hover,#OurBeliefActif {
	background: url("images/menu/Menu_OurBelief.gif") no-repeat 0 -28px;
	}
#OurBelief a span,#OurBeliefActif span { display:none }

/*COLLECTION*/
#Collection span {
	display: block;
	width: 78px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: url("images/menu/Menu_Collection.gif") no-repeat 0 0;
	text-decoration: none;
	background-position: top center;
}
#Collection span:hover,#CollectionActif {
	background: url("images/menu/Menu_Collection.gif") no-repeat 0 -28px;
	}
/*#Collection a span { display:none }*/

/*EVENTS*/
#Events a {
	display: block;
	width: 54px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: url("images/menu/Menu_Events.gif") no-repeat 0 0;
	text-decoration: none;
}
#Events a:hover,#EventsActif {
	background: url("images/menu/Menu_Events.gif") no-repeat 0 -28px;
	}
#Events a span ,#EventsActif span{ display:none }

/*PRESS*/
#Press a {
	display: block;
	width: 46px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: url("images/menu/Menu_Press.gif") no-repeat 0 0;
	text-decoration: none;
}
#Press a:hover,#PressActif {
	background: url("images/menu/Menu_Press.gif") no-repeat 0 -28px;
	}
#Press a span,#PressActif span { display:none }

/*WHO ARE WE*/
#WhoAreWe a {
	display: block;
	width: 100px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: url("images/menu/Menu_WhoAreWe.gif") no-repeat 0 0;
	text-decoration: none;
}
#WhoAreWe a:hover,#WhoAreWeActif {
	background: url("images/menu/Menu_WhoAreWe.gif") no-repeat 0 -28px;
	}
#WhoAreWe a span,#WhoAreWeActif span { display:none }

/*SHOP ONLINE*/
#Boutique a {
	display: block;
	width: 100px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: url("images/menu/Menu_ShopOnline.gif") no-repeat 0 0;
	text-decoration: none;
}
#Boutique a:hover {
	background: url("images/menu/Menu_ShopOnline.gif") no-repeat 0 -28px;
	}
#Boutique a span { display:none }
#nav, #nav ul { /* toutes les listes */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
}

#nav a {
  display: block;
	width: 100px;
	height: 28px;
	margin: 0;
	padding: 0;
	text-decoration: none;
	/*display: block;
	width: 10em;*/
}
#nav li { /* tous les items de liste */
	float: left;
	width: 100px; /* largeur obligatoire, sinon opera devient fou */
}
#nav li ul { /* listes de deuxime niveau */
	position: absolute;
	background: black;
	width: 100px;
	left: -999em; /* on met left plutt que display pour cacher les menus parce que display: none n'est pas lu par les lecteurs d'cran */
}
#nav li:hover ul, #nav li.sfhover ul { /* listes imbriques sous les items de listes survols */
	left: auto;
}
/*RINGS*/
#rings a{
	display: block;
	width: 100px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: url("images/menu/Menu_rings.gif") no-repeat 0 0;
	text-decoration: none;
}
#rings a:hover{
	background: url("images/menu/Menu_rings.gif") no-repeat 0 -28px;
}
#rings a span{
	display:none;
}
/*NECKLACES*/
#necklaces a{
	display: block;
	width: 100px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: url("images/menu/Menu_necklaces.gif") no-repeat 0 0;
	text-decoration: none;
}
#necklaces a:hover{
	background: url("images/menu/Menu_necklaces.gif") no-repeat 0 -28px;
}
#necklaces a span{
	display:none;
}
/*EARRINGS*/
#earrings a{
	display: block;
	width: 100px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: url("images/menu/Menu_earrings.gif") no-repeat 0 0;
	text-decoration: none;
}
#earrings a:hover{
	background: url("images/menu/Menu_earrings.gif") no-repeat 0 -28px;
}
#earrings a span{
	display:none;
}
/*BRACELETS*/
#bracelets a{
	display: block;
	width: 100px;
	height: 28px;
	margin: 0;
	padding: 0;
	background: url("images/menu/Menu_bracelets.gif") no-repeat 0 0;
	text-decoration: none;
}
#bracelets a:hover{
	background: url("images/menu/Menu_bracelets.gif") no-repeat 0 -28px;
}
#bracelets a span{
	display:none;
}
/******************** FIN Boutons Menu*/

.titregras{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	margin: 0;
	padding: 0;
	color: White;
	background-color: transparent;
	font-weight: bold;
}
.main{
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin: 0;
	padding: 0;
	color: White;
	background-color: transparent;
	font-weight: normal;
}
img.petitesimages{
	border: 1px solid Silver;
}
a img {border: 1px solid Silver;}
a.imagesevents{
	font-size: 1px;
	line-height: 1px;
	border-width: 1px solid black;
}
a.imagesevents:hover{
	font-size: 1px;
	line-height: 1px;
	border: 1px solid #8ADBFF;
}
img.imagesevents{
	border-width: 1px solid black;
}
img.imagesevents:hover{
	border: 1px solid #8ADBFF;
}
TD.TDevents{
	background: url(images/fond_lv.JPG) repeat-y left;
}
A.liens {
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #8ADBFF;
	text-decoration: none;
}

A.liens:hover {
	font-family: Verdana, Arial, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #666666;
}

A.lienspackaging {
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #8ADBFF;
	text-decoration: none;
}

A.lienspackaging:hover {
	font-family: Verdana, Arial, sans-serif;
	font-size: 12px;
	font-weight: bold;
	color: #666666;
}
#invitation{
	margin-left: 10px;
}
#txtwhoarewe{
	position: absolute;
	left: 30px;
	top: 150px;
	text-align:right;
	width: 485px;
}

Can someone help me ? I have 80% of IE based browser visiting my site.

Thanks in advance and sorry for my poor English (I'm french )

[jscheuer1]

The problem is, at least on the necklaces page, an incorrect syntax of the body tag. You have:

<body "onload=loadimages();fillup();>

It should be:

<body onload="loadimages();fillup();">

Fixing this also makes the page lineup like it does in FF. I'm surprised that it is IE that cares about this and not FF. With things like this it is usually IE that lets you get away with sloppy code.

[buzuc]

Thanks again !
it works

Can I call you "God" ?

I love your forum : 2 questions, 2 answers in less than the time used to make the modification !