Results 1 to 3 of 3

Thread: C Motion, CSS and IE on my site

  1. #1
    Join Date
    Dec 2005
    Location
    France
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default C Motion, CSS and IE on my site

    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. :
    Code:
    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 )

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,025
    Thanks
    44
    Thanked 3,210 Times in 3,172 Posts
    Blog Entries
    12

    Default

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

    Code:
    <body "onload=loadimages();fillup();>
    It should be:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2005
    Location
    France
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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 !

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •