[jQuery] CSS drop-shadow for clueTip - help requested

[jQuery] CSS drop-shadow for clueTip - help requested

<HTML><BODY style="word-wrap: break-word; -khtml-nbsp-mode: space; -khtml-line-break: after-white-space; ">Hi all,<DIV><BR class="khtml-block-placeholder"></DIV><DIV>After I posted the clueTip beta, I realized that something had regressed and the pngFix code wasn't working properly to get the drop-shadow effect working in IE6. </DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>I've worked that part out by, starting with the pngFix code in Jörn's tooltip plugin (thanks!) and, among other things, changing the "sizingMethod" attribute from "crop" to "scale." I also re-worked and simplified the CSS for the clueTip quite a bit. Nevertheless, it's still looking a little funky, depending on the contents of the clueTip. </DIV><DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV> <SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; ">I was wondering if there are any CSS gurus out there who might be able to look at this in IE6 and help me find a solution. I'm usually able to tread fairly nimbly through CSS territory, but this issue has me flummoxed. </SPAN></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; ">here are thethe files I'm using to try to sort this out:</SPAN></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>demo/test page: <A href="http://test.learningjquery.com/clue/demo/index.html"> http://test.learningjquery.com/clue/demo/index.html</A></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>style sheet: <A href="http://test.learningjquery.com/clue/jquery.cluetip.css"> http://test.learningjquery.com/clue/jquery.cluetip.css</A></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>cluetip plugin: <A href="http://test.learningjquery.com/clue/jquery.cluetip.js"> http://test.learningjquery.com/clue/jquery.cluetip.js</A></DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN>drop shadow image: <A href="http://test.learningjquery.com/clue/shadow.png"> http://test.learningjquery.com/clue/shadow.png</A></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>I made all the clueTips "sticky" for easier inspection/manipulation in a DOM viewer.</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>Also, here is a zipped file of everything, including Dimensions, jquery.js, images, and so on:</DIV><DIV><SPAN class="Apple-tab-span" style="white-space:pre"> </SPAN><A href="http://test.learningjquery.com/clue/"> http://test.learningjquery.com/clue/</A>cluetip-test.zip</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; ">Any help at all would be greatly appreciated.</SPAN></DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>** One more thing. I just received a question from someone about the IE <select> "punch-through" problem and whether the clueTip plugin handles that. </DIV><DIV>I started writing a response that I'd like to share with the list, in case anyone has any strong opinions that I should take into consideration:</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV><BLOCKQUOTE type="cite">excellent question! The short answer is, no [I haven't accounted for this IE problem]. But it should. Somehow. That was an oversight on my part. <DIV><BR class="khtml-block-placeholder"></DIV><DIV>That said, I'm a bit torn about how best to go about doing it. Do I bake it right in to the plugin itself? Do I put in yet another option? If so, should the default be true (i.e. yes, add the iframe hack with all corresponding css) or false?</DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>I wonder if it might be best to leave that problem for the bgIFrame plugin to solve. (<A href="http://jqueryjs.googlecode.com/svn/trunk/plugins/bgiframe/"> http://jqueryjs.googlecode.com/svn/trunk/plugins/bgiframe/</A>)</DIV><DIV>It does a great job of it, and I certainly couldn't do any better. On the other hand, I understand the disadvantages of having to include too many javascript file references on a single web page.                                  <BR></DIV></BLOCKQUOTE><DIV><DIV><BR class="khtml-block-placeholder"></DIV><DIV>What are your thoughts?</DIV></DIV><BR class="khtml-block-placeholder"></DIV><DIV><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; ">Thanks so much,<BR class="Apple-interchange-newline"><SPAN class="Apple-style-span" style="border-collapse: separate; border-spacing: 0px 0px; color: rgb(0, 0, 0); font-family: Helvetica; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; text-align: auto; -khtml-text-decorations-in-effect: none; text-indent: 0px; -apple-text-size-adjust: auto; text-transform: none; orphans: 2; white-space: normal; widows: 2; word-spacing: 0px; "><DIV><BR class="khtml-block-placeholder"></DIV><DIV>--Karl</DIV><DIV>_________________</DIV><DIV>Karl Swedberg</DIV><DIV>www.englishrules.com</DIV><DIV>www.learningjquery.com</DIV><DIV><BR class="khtml-block-placeholder"></DIV><BR class="Apple-interchange-newline"></SPAN></SPAN></DIV><BR></DIV></BODY></HTML>