Hi I am having problem with the coda bubble window..
please check the urls: InternetExplorer view: http://img133.imageshack.us/img133/7538/83905753.jpg Mozilla View: http://img29.imageshack.us/img29/1955/mozillan.jpg *Code:* <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd";> <html xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en"> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <title>Coda Bubble Example</title> <style type="text/css" media="screen"> <!-- * { margin: 0; padding: 0; } a*{ font-size: 12px; line-height: 1.2em; background-color: #fff; color: #666; font-family: "Arial"; } body { padding: 10px; } h1 { margin: 14px 0; font-family: 'Trebuchet MS', Helvetica; } p { margin: 14px 0; font-family: 'Trebuchet MS', Helvetica; } .bubbleInfo { position: relative; top: 50px; left: 50px; width: 500px; } .trigger { position: relative; } /*.selectedRow { border: 1px solid #FF3333; background-color: #F0F0F0; cursor: pointer; } */ /* Bubble pop-up */ .popup { background-color: #FFFFCC; position: absolute; display: none; z-index: 250; border-collapse: collapse; } .popup td.corner { height: 15px; width: 19px; } .popup td#topleft { background-image: url(bubble-1.png); } .popup td.top { background-image: url(bubble-2.png); } .popup td#topright { background-image: url(bubble-3.png); } .popup td.left { background-image: url(bubble-4.png); } .popup td.right { background-image: url(bubble-5.png); } .popup td#bottomleft { background-image: url(bubble-6.png); } .popup td.bottom { background-image: url(bubble-7.png); text-align: center;} .popup td.bottom img { display: block; margin: 0 auto; } .popup td#bottomright { background-image: url(bubble-8.png); } .popup table.popup-contents { font-size: 12px; line-height: 1.2em; background-color: #FFFFCC; color: #666; font-family: "Arial"; } table.popup-contents th { text-align: right; text-transform: lowercase; } table.popup-contents td { text-align: left; } tr#release-notes th { text-align: left; text-indent: -9999px; background: url(starburst.gif) no-repeat top right; height: 50px; } tr#release-notes td a { color: #333; } --> </style> <script src="javascript/jquery.js" type="text/javascript"></script> <script type="text/javascript" src="javascript/thickbox.js"></script> <link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" /> <script type="text/javascript"> <!-- /*$(function() { $('div').mouseover(function() { $(this).addClass('selectedRow'); }).mouseout(function() { $(this).removeClass('selectedRow'); }); });*/ $(function () { $('.bubbleInfo').each(function () { var distance = 10; var time = 250; var hideDelay = 100; var hideDelayTimer = null; var beingShown = false; var shown = false; var trigger = $('.trigger', this); var info = $('.popup', this).css('opacity', 0); $([trigger.get(0), info.get(0)]).mouseover(function () { if (hideDelayTimer) clearTimeout(hideDelayTimer); if (beingShown || shown) { // don't trigger the animation again return; } else { // reset position of info box beingShown = true; info.css({ top: 150, left: 140, display: 'block' }).animate({ top: '-=' + distance + 'px', opacity: 1 }, time, 'swing', function() { beingShown = false; shown = true; }); } return false; }).mouseout(function () { if (hideDelayTimer) clearTimeout(hideDelayTimer); hideDelayTimer = setTimeout(function () { hideDelayTimer = null; info.animate({ top: '-=' + distance + 'px', opacity: 0 }, time, 'swing', function () { shown = false; info.css('display', 'none'); }); }, hideDelay); return false; }); }); }); //--> </script> </head> <body id="page"> <FORM ACTION=""> <div class="bubbleInfo"> <div class="trigger" id="download" onmouseover="javascript:document.getElementById('download').style.backgroundColor='#F0F0F0'; javascript:document.getElementById('download').style.border= '1px solid #FF3333';" onmouseout="javascript:document.getElementById('download').style.backgroundColor=''; javascript:document.getElementById('download').style.border= '';"> DocSearch is a powerful web based, integrated & out of the box document Scanning - Storing - Searching & Retrieving system. Designed for higher efficiency and productivity to handle virtually large volumes of paper forms or documents of any organization irrespective of size that have a compelling need to digitize, store, retrieve and process paper based documents. The digitized documents can therefore be accessed and retrieved on a fly in seconds for future references or can be retained for archival purposes thereby leveraging the benefits of digital e-document processing technology. DocSearch helps virtually any organization in leveraging the digital revolution to store, search and retrieve the digital content that can be relied upon as de-facto document processing capability to yield higher ROI. <a href="http://verinon.com/docsearch.html";>DocSearch</a> </div> <table id="dpop" class="popup"> <tbody><tr> <td id="topleft" class="corner"></td> <td class="top"></td> <td id="topright" class="corner"></td> </tr> <tr> <td class="left"></td> <td><table class="popup-contents"> <tbody> <tr> <td colspan="2"><u><font face="arial" size="2">Document Properties</font></u>:</td><td></td> <td align="right"><a href=" http://google.com?TB_iframe=true&height=370&width=600&modal=true"; class="thickbox">ViewPage</a></td></tr> <tr> <td><b>Name:</b></td> <td>MEL2_IC_2009_JAN_EMP12331 </td> <td>Size:120kb |PDF</td> </tr> <tr> <td colspan="4"><b>Category:</b> Claims |Loc: Hyd | Owner: James |Created:05-Jun-2009</td> </tr> <tr id="release-notes"> <td align="top"><b>Content:</b></td> <td colspan="2"> WELCOME TO FOOD & WINE IMPORTS<BR> We recognize and continue to emphasize that outstanding people are the key to our success. Thanks to each of you, Food & Wine Imports (the "Company") has emerged as a leader in the field of high end epicurean imports. <BR><a title="Read the release notes" href="./releasenotes.html">View Additional Properties</a></td> </tr> </tbody></table> </td> <td class="right"></td> </tr> <tr> <td class="corner" id="bottomleft"></td> <td class="bottom"><!-- <img width="30" height="29" alt="popup tail" src=" http://jqueryfordesigners.com/demo/images/coda/bubble-tail2.png"/> --></td> <td id="bottomright" class="corner"></td> </tr> </tbody></table><BR><BR><BR> </div> <div class="bubbleInfo"> <div class="trigger" id="download1" onmouseover="javascript:document.getElementById('download1').style.backgroundColor='#F0F0F0'; javascript:document.getElementById('download1').style.border= '1px solid #FF3333';" onmouseout="javascript:document.getElementById('download1').style.backgroundColor=''; javascript:document.getElementById('download1').style.border= '';"> DocSearch is a powerful web based, integrated & out of the box document Scanning - Storing - Searching & Retrieving system. Designed for higher efficiency and productivity to handle virtually large volumes of paper forms or documents of any organization irrespective of size that have a compelling need to digitize, store, retrieve and process paper based documents. The digitized documents can therefore be accessed and retrieved on a fly in seconds for future references or can be retained for archival purposes thereby leveraging the benefits of digital e-document processing technology. DocSearch helps virtually any organization in leveraging the digital revolution to store, search and retrieve the digital content that can be relied upon as de-facto document processing capability to yield higher ROI. <a href="http://verinon.com/docsearch.html";>DocSearch</a> </div> <table id="dpop" class="popup"> <tbody><tr> <td id="topleft" class="corner"></td> <td class="top"></td> <td id="topright" class="corner"></td> </tr> <tr> <td class="left"></td> <td><table class="popup-contents"> <tbody> <tr> <td colspan="2"><u><font face="arial" size="2">Document Properties</font></u>:</td><td></td> <td align="right"><a href=" http://google.com?TB_iframe=true&height=370&width=600&modal=true"; class="thickbox">ViewPage</a></td></tr> <tr> <td><b>Name:</b></td> <td>MEL2_IC_2009_JAN_EMP12331 </td> <td>Size:120kb |PDF</td> </tr> <tr> <td colspan="4"><b>Category:</b> Claims |Loc: Hyd | Owner: James |Created:05-Jun-2009</td> </tr> <tr id="release-notes"> <td align="top"><b>Content:</b></td> <td colspan="2"> WELCOME TO FOOD & WINE IMPORTS<BR> We recognize and continue to emphasize that outstanding people are the key to our success. Thanks to each of you, Food & Wine Imports (the "Company") has emerged as a leader in the field of high end epicurean imports. <BR><a title="Read the release notes" href="./releasenotes.html">View Additional Properties</a></td> </tr> </tbody></table> </td> <td class="right"></td> </tr> <tr> <td class="corner" id="bottomleft"></td> <td class="bottom"><!-- <img width="30" height="29" alt="popup tail" src=" http://jqueryfordesigners.com/demo/images/coda/bubble-tail2.png"/> --></td> <td id="bottomright" class="corner"></td> </tr> </tbody></table><BR><BR><BR> </div> </FORM> </body> </html> please anybody advise how to fix this? Regards, Bharath -- భరత్ భూషణ్ అంబటి
![http://jqueryfordesigners.com/demo/images/coda/bubble-tail2.png"/](http://jqueryfordesigners.com/demo/images/coda/bubble-tail2.png"/){kind=link}