asked on

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.

StormyWaters

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.

gmahler5th

ASKER

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?

gmahler5th

ASKER

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;


}

archrajan

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;


}

gmahler5th

ASKER

I don't get it! That's not working! I'm getting so frustrated with this!!! <snivel>

COBOLdinosaur

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>      [<a href="#" target="_blank">Take the Survey</a>]</b></p></TD><TD><p><b>[<a href="#" onClick="dismissbox();return false">Close</a>]      </b></p></font></TD></TR><TR><TD width="100%"> </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();

gmahler5th

ASKER

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?

ASKER CERTIFIED SOLUTION

COBOLdinosaur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

gmahler5th

ASKER

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?

COBOLdinosaur

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&

gmahler5th

ASKER

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?

COBOLdinosaur

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&