[dealt]

hi! i want to display the a set of ads to multiple websites. i made a rotating image carousel made with html+css+javascript. this is called by a simple php include in all of our websites.

the problem is that the included code (the carousel's html+css code) inherits some of the styles of the page on which it was embedded.

i already tried 'resetting' the styles of the tags i used within the carousel:

#adsCarouselBox ul li img a p {
	vertical-align: baseline;
	font-family: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	outline: 0;
	padding: 0;
	margin: 0;
	border: 0;
}

but there are still some global styles defined in the pages (on which the carousel code was embedded) that mess up the carousel code.

i'm looking for ways for me not to test the carousel code on all of the websites where it will be used and override 'all' the styles that it will inherit. is there an easy way to 'wrap' the carousel code so it won't inherit any styles from its parent page.

i'm already considering a flash-based solution but i'm hoping there's still a way to fix this.

anyway here's my carousel code:

<div>

<div>
    <ul class="adsCarousel">
      <li><img src="images/thumbnail1.jpg" alt="" width="172" height="171">
          <p>Ad 1</p>
      </li>
      <li><img src="images/thumbnail2.jpg" alt="" width="172" height="171">
          <p>Ad 2</p>
      </li>
  </ul>
</div>
<div>
	<button><<</button>
	<button>>></button>      
</div>
</div>

thanks!

[udoobu]

Have you tried adding !important to the end of your CSS properties that get overridden? For example: "margin: 10px !important;"

[Agricola]

To overwrite any inherit simply give your carousel <div> containers ids, then use these IDs and whatever element in the CSS, this should over ride any inherit.

#carousel_a  #carousel_b ul{
font-size : .8em;
etc
}

<div id="carousel_a">
<div id="carousel_b">
<ul>
      <li><img src="http://www.designerstalk.com/forums/images/thumbnail1.jpg" alt="" width="172" height="171">

If this dosnt work then a quick fix solution is to embed the carousel in an Iframe

EDIT:

ACtully looking at your CSS, you have a mistake

#adsCarouselBox ul li img a p {

This is how ID is declared not class, for class you need .adsCarouselBOx etc.

You kind of confusig the issue, by declaring a element UL, then giving the element the class adscarousel.. ...

THis is where things could be going wrong, make changes to this first to see if that works, otherwise go in over the top with a double ID and element declaration as I previously mentioned.