How can I override the stylesheet in place for this dropin box?

I am creating a dropin on my webpage, and it is inheriting the stylesheet properties in place for the page.  I want the dropin table to have it's own distinct stylesheet.  How can I prevent the droping from inheriting the stylesheet properties from the main page?

http://www.camilee.com/test.htm

The dropin should look like the one on

http://www.camilee.com/test.asp

You will have to delete the cookie this dropin places on your browser to view it more than once.

Thanks.
gmahler5thAsked:
Who is Participating?
 
COBOLdinosaurConnect With a Mentor Commented:
Change this first part:

var info='<TABLE WIDTH=510 BGCOLOR="#000000" style="background-color:00000; padding-top:1; padding-left:1; border:solid; border-spacing:2;" CELLPADDING="2" CELLSPACING="0">

to:
var info='<TABLE WIDTH=510 style="background-color:00000; padding:2px; border:1px solid black; border-spacing:2;" CELLPADDING="2" CELLSPACING="0">

Cd&
0
 
StormyWatersCommented:
Both of those look the same.

But if you give the table an ID you can override the styles by making a style for #yourtable in your stylesheet.
0
 
gmahler5thAuthor Commented:
It doesn't look the same on my browser.

I was making some changes to test.asp.

Could you delete your cookie and compare again?
0
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
gmahler5thAuthor Commented:
I added this to my CSS file.  It doesn't help my dropin at all.

TABLE.survey
{
      
      FONT-FAMILY: Verdana, Sans-serif;
      TEXT-DECORATION: none;
      padding-top:2;
      padding-left:2;
      padding-right:2;
      border:2;
      border-bottom-color:#000000;
      
      
}
0
 
archrajanCommented:
fo this just add !important to it


TABLE.survey !important
{
     
     FONT-FAMILY: Verdana, Sans-serif;
     TEXT-DECORATION: none;
     padding-top:2;
     padding-left:2;
     padding-right:2;
     border:2;
     border-bottom-color:#000000;
     
     
}
0
 
gmahler5thAuthor Commented:
I don't get it!  That's not working!  I'm getting so frustrated with this!!! <snivel>
0
 
COBOLdinosaurCommented:
Re-styling the table is not going to do any good.  The styling is generated in line in the function that writes the dropin.  You have to change the code being generaqted in teh finction to change the styling, because inline styles override everything.

Cd&



function dodropin() {

var info='<TABLE WIDTH=510 BGCOLOR="#000000" style="background-color:00000; padding-top:1; padding-left:1; border:solid; border-spacing:2;" CELLPADDING="2" CELLSPACING="0"><TR><TD><TABLE BGCOLOR="#ffffff" CELLSPACING="0" CELLPADDING="3"><TR BGCOLOR="#000000"><TD><TABLE style="padding-left:2;" CELLSPACING="0" CELLPADDING="0"><TR style="padding-left:2;"><TD width="100%">'
+ '<DIV ALIGN="center"><font color="white"><strong>Camilee Designs Survey</font></strong></DIV></TD><TD><a href="#" onClick="dismissbox();return false"><img src="http://www.camilee.com/images/close_x.gif" width="16" height="14" border="0" alt="Close"></a></TD></TR></TABLE></TD></TR><TR><TD>'
+ '<font size="2" face="Geneva, Arial, Helvetica, sans-serif"><p><span class="subheader">Your opinion is important to Camilee Designs!</span></p> '
+ '<p><b>Your response is <i>very</i> important</b>, as this survey is administered to a limited number of online communities.</p> '
+ '<p>The survey should take you less than 10 minutes to complete. The survey can be accessed at <a href="http://www.camilee.com/utility/survey04.htm" target="_blank">http://www.camilee.com/utility/survey04.htm</a></p> '
+ '<p>Please fill out the survey as accurately as you can. Thank you for your assistance!</p> '
+ '</TD></TR><TR><TD><TABLE CELLSPACING=0 CELLPADDING="2"><TR><TD width="100%"><p><b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;[<a href="#" target="_blank">Take the Survey</a>]</b></p></TD><TD><p><b>[<a href="#" onClick="dismissbox();return false">Close</a>]&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</b></p></font></TD></TR><TR><TD width="100%">&nbsp;</TD></TR></TABLE>'
+ '</TD></TR></TABLE></TD></TR></TABLE>';
if (ie) {
      document.all.dropin.innerHTML = info;
      document.all.dropin.left='100';
  }      
        else if (ns4) {
            document.layers['dropin'].document.open();
            document.layers['dropin'].document.write(info);
            document.layers['dropin'].document.close();
      }
      else if (dom) {
            document.getElementById('dropin').innerHTML= info;
      }


dropornot();
}

dodropin();
0
 
gmahler5thAuthor Commented:
I started picking up on the inline styling based on some google searches.

Now I want to make the width of the border equal to 1 pixel, and make it black.  
I'd also like to add a cellpadding=2 so the text inside the table is not so close to the border's edge.

Will you show me how to do that?
0
 
gmahler5thAuthor Commented:
Ahh, CobolDinasour, almost there.... I now would like the text on the inside of the table to have a cellpadding=2 so it is not flush with with border.  

Would I use the padding attribute in another table?
0
 
COBOLdinosaurCommented:
Yeah everywhere there is cellpadding set it to "2" and where there a style entry for padding set it to px.  The code generated by that script is pretty trashy, so be careful.

Cd&
0
 
gmahler5thAuthor Commented:
It doesn't look like cellpadding is working.  My text is still flush against the border.  

What do I have to do to get the text 2px away from the black border?
0
 
COBOLdinosaurCommented:
You may have to add padding:2px to all the tags.  The way the thing is written, it does not lend itself to very clean maintenance.  You will just have to sort step down through it an play with each tag until it does what you want.

Cd&
0
All Courses

From novice to tech pro — start learning today.