CSS inheritance

albc123 · 03-16-2011, 01:25 AM

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 · 03-16-2011, 01:33 AM

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

albc123 · 03-16-2011, 01:46 AM

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

<script type="text/javascript" id="sothink_widgets:dwwidget_webscroll2_10_2011.sj c">

</script>

leroy30 · 03-16-2011, 02:34 AM

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 · 03-16-2011, 02:41 AM

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

PixelPusher · 03-16-2011, 04:01 PM

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:

HTML Code:

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

Code:

div#name1 img {  
   border:none;
}

03-16-2011, 01:25 AM	#1
albc123 New Member Join Date: Mar 2011 Posts: 3	CSS inheritance 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

03-16-2011, 02:34 AM	#4
leroy30 Gold Member Join Date: Mar 2010 Location: Auckland, New Zealand Posts: 326	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 __________________ DVI web design \| Portable Time Clock

03-16-2011, 04:01 PM	#6
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	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: HTML Code: <div id="name1"> <script type="text/javascript">...</script> </div> Code: div#name1 img { border:none; } __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

03-16-2011, 01:33 AM	#2
DHDdirect Gold Member Join Date: Feb 2011 Location: Australia Posts: 369	Can you provide us with an example or the code? I'm sure there will be a way to work something out.

03-16-2011, 01:46 AM	#3
albc123 New Member Join Date: Mar 2011 Posts: 3	This javascript is generated from "Sothink JavaScript Web Scroller ". <script type="text/javascript" id="sothink_widgets:dwwidget_webscroll2_10_2011.sj c"> <!-- sts_bs("jwscroller4967",[20080623,"images/","","blank.gif",4,1,1,1,"700px","left",2,3,220,12 0,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>

03-16-2011, 02:41 AM	#5
ronaldroe Platinum Member Join Date: Jan 2011 Location: Oklahoma City, OK Posts: 676	Just set the border for the div to 0, and any others you don't want to either 0 or none.