so, i have a simple modal window that is supposed display a javascript gallery composed of dynamic content. I created a simple .php filetest file:\[code\] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><link href="http://stackoverflow.com/questions/4755454/css/jqModal.css" rel="stylesheet" type="text/css" /><script src="http://stackoverflow.com/questions/4755454/js/jquery-1.4.2.min.js" type="text/javascript"></script><script type="text/javascript" src="http://stackoverflow.com/questions/4755454/js/jquery.easing.1.3.js"></script><script type="text/javascript" src="http://stackoverflow.com/questions/4755454/js/jqModal.js"></script><link rel="stylesheet" href="http://stackoverflow.com/questions/4755454/css/featureCarousel.css" charset="utf-8" /><script src="http://stackoverflow.com/questions/4755454/js/jquery.featureCarousel.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(document).ready(function() { //this function should open Modal window and load shirts.php $('#dialog').jqm({ajax: 'shirts.php'}); }); // once shirts php is loaded and ready, this function should give content is animation and behavior $('#featureCarousel').ready(function(){ $("#featureCarousel").featureCarousel({ // include options like this: // (use quotes only for string values, and no trailing comma after last option) // option: value, // option: value }); }) </script></head><body> <a href="http://stackoverflow.com/questions/4755454/#" class="jqModal">view</a> <div class="jqmWindow" id="dialog"> </div></body></html>\[/code\]Shirts.php:\[code\] <?php require_once("includes/connection.php"); ?><?php $query = mysql_query("SELECT * FROM products WHERE category=3"); ?><div id="featureCarousel"><?php while($product_set = mysql_fetch_assoc($query)) { print "<div class=\"feature\" \"><a href=http://stackoverflow.com/questions/4755454//"javascript:void(0)\" id=" . $product_set['products_id'] . "><img alt=\"Image Caption\" src="http://stackoverflow.com/questions/4755454/. $product_set['products_image'] . "></a><div><p>This is some information that can go along with an image. Anything can be placed here, including images.</p></div></div>"; }?></div>\[/code\]css for the modal:\[code\].jqmWindow { display: none; position: fixed; top: 17%; left: 50%; margin-left: -300px; background-color: #EEE; color: #333; border: 1px solid black; padding: 12px;}.jqmOverlay { background-color: #000; }/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */* iframe.jqm {position:absolute;top:0;left:0;z-index:-1; width: expression(this.parentNode.offsetWidth+'px'); height: expression(this.parentNode.offsetHeight+'px');}/* Fixed posistioning emulation for IE6 Star selector used to hide definition from browsers other than IE6 For valid CSS, use a conditional include instead */* html .jqmWindow { position: absolute; top: expression((document.documentElement.scrollTop || document.body.scrollTop) + Math.round(17 * (document.documentElement.offsetHeight || document.body.clientHeight) / 100) + 'px');}\[/code\]css for the gallery\[code\]/******************** * FEATURE CAROUSEL * ********************/#featureCarousel { height: 380px; width:960px; position:relative;}#featureCarousel img { border:0;}#featureCarousel .feature { position:absolute; top:-1000px; left:-1000px; border:3px solid white; cursor
ointer;}#featureCarousel .feature > div { position:absolute; bottom:0px; left:0px; background-color:black; width:100%;}#featureCarousel .feature > div p { margin:0; padding:5px; font-weight:bold; font-size:12px; color:white;}#featureCarousel .blipsContainer { position:absolute; color:white; right:25px; top:310px; padding:0; margin:0;}#featureCarousel .blipsContainer .blip { margin:3px; height:14px; width:14px; color:white; text-align:center; font-size:10px; border:1px dotted black;}#featureCarousel .blipsContainer .blipSelected { color:white; font-weight:bold; background-color:black;}\[/code\]When i load my index.php, the modal opens up and is blank. So i review the source code; which shows that all the content is generated properly. but for some odd reason it isn't visible. what am i doing wrong?? http://suit-brokers.com/modal_test/modaltest.php
ointer;}#featureCarousel .feature > div { position:absolute; bottom:0px; left:0px; background-color:black; width:100%;}#featureCarousel .feature > div p { margin:0; padding:5px; font-weight:bold; font-size:12px; color:white;}#featureCarousel .blipsContainer { position:absolute; color:white; right:25px; top:310px; padding:0; margin:0;}#featureCarousel .blipsContainer .blip { margin:3px; height:14px; width:14px; color:white; text-align:center; font-size:10px; border:1px dotted black;}#featureCarousel .blipsContainer .blipSelected { color:white; font-weight:bold; background-color:black;}\[/code\]When i load my index.php, the modal opens up and is blank. So i review the source code; which shows that all the content is generated properly. but for some odd reason it isn't visible. what am i doing wrong?? http://suit-brokers.com/modal_test/modaltest.php