CSS inheritance

[albc123]

Hello !
i have a javascript widget included on my page , inside a div .

<script type="text/javascript" id="name1>"
.......
......
...
</script>

But i have a problem : all the object inside widget are inheriting properties from CSS container div.The widget have some scrolling photos.When i preview the page all the photos have borders ..etc.But if i put this widget on a blank page , everythink is normal and photos have no border ( this is original widget design).

Is possible to block css inheritance for the javascript widget only ?

Thank you in advance

 

[DHDdirect]

Can you provide us with an example or the code? I'm sure there will be a way to work something out.

 

[albc123]

This javascript is generated from "Sothink JavaScript Web Scroller ".

<script type="text/javascript" id="sothink_widgets:dwwidget_webscroll2_10_2011.sjc">
<!--
sts_bs("jwscroller4967",[20080623,"images/","","blank.gif",4,1,1,1,"700px","left",2,3,220,120,0,0,0,0,150,19000,1,18,0,"",-2,80],["none",1,"#006600","transparent","","repeat-x"]);
sts_ai("i0",[0,"","","_self","005.jpg",192,120,"center"],["transparent","0pt Arial","#000000","none","0pt Arial","#000000","none"]);
sts_ai("i1",[,,,,"002.jpg"],[,"9pt Arial",,,"9pt Arial"],"i0","i0");
sts_ai("i2",[,,,,"003.jpg"],[],"i0","i1");
sts_ai("i3",[,,,,"004.jpg"],[],"i0","i1");
sts_ai("i4",[,,,,"006.jpg"],[],"i0","i1");
sts_es();
//-->
</script>

 

[leroy30]

Have you got a link to the actual page?

I think if you gave the container div (that the widget is in) a custom style and then set the div properties with css for any inner divs to wipe out the other inherited css that you don't want. i.e:

.containerdiv {}
.containerdiv div {border:none;}

If the page is live on the net post a link and it will give me a better idea of how it's structured

 

[ronaldroe]

Just set the border for the div to 0, and any others you don't want to either 0 or none.

 

[PixelPusher]

For starters, "id" is not a valid attribute for a <script> tag, so I would remove that. Add an id to the containing div and then target the images within through css. This would be known as CSS Grouping.

Example:

<div id="name1">
   <script type="text/javascript">...</script>
</div>

div#name1 img {  
   border:none;
}