PDA

View Full Version : Lighwindow CSS Issue



chbrandt
Feb 10th, 2010, 08:13 AM
I have finally got everything looking good in my content page that's to be opened in a lightwindow, located here:

http://www.mikeandzachsbbq.com/Catering/form.php

but when I go to open it in a lightwindow, a lot of my content is cut off for some reason. I have tried deleting any overflow: hidden; tags, but to no avail. I also tried making sure all of the divs were sized correctly, and that didn't fix it either. Try clicking on the lightwindow link at the bottom of the second paragraph of this page to see what I mean:

http://www.mikeandzachsbbq.com/Catering/

Props and many thanks to anyone that can help me out!

ahallicks
Feb 10th, 2010, 10:18 AM
Have you seen the HTML inside that pop up? It is a mess! (And you have a link tag in the HTML, which should only appear in the <head> of your document!).




<br><br>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" height="194" width="584">
<tbody><tr>
<td height="146" width="584">
<center>
<div id="quote" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="535">
<form id="Catering" name="Catering" method="post" action="contactengine.php">
<tbody><tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="534">
<tbody><tr align="center">
<td colspan="2" bgcolor="#d2d2d2" width="470">
<div align="left">
<font face="Verdana"><label2 for="pork" id="pork"></label2>
<input name="pork" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="1" type="text"><font size="2">Pounds of Chopped Pork @ $7.99/lb.</font></font>
</div>
</td>
<td bgcolor="#d2d2d2" width="22">
<font face="Verdana" size="2">$</font>
</td>
<td bgcolor="#d2d2d2" width="42">
<div align="left">
<font face="Verdana">
<input name="pork_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" width="470">
<div align="left">
<font face="Verdana"><label2 for="ribs" id="ribs"></label2>
<input name="ribs" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="2" type="text"><font size="2">Sides of Ribs (13 bones) @ $15.99/side</font></font>
</div>
</td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42">
<div align="left">
<font face="Verdana">
<input name="ribs_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" bgcolor="#d2d2d2" width="470">
<div align="left">
<font face="Verdana"><label2 for="chickenwhole" id="chickenwhole"></label2>
<input name="chickenwhole" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="3" type="text"><font size="2">Whole Chickens @ $9.99/ea.</font></font>
</div>
</td>
<td bgcolor="#d2d2d2" width="22">
<font face="Verdana" size="2">$</font>
</td>
<td bgcolor="#d2d2d2" width="42">
<div align="left">
<font face="Verdana">
<input name="chickenwhole_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"><font size="2"></font></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" width="470">
<div align="left">
<font face="Verdana"><label2 for="chickenpieces" id="chickenpieces"></label2>
<input name="chickenpieces" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="4" type="text"><font size="2"> x 8 Chicken Pieces @ $11.99/ea.</font></font>
</div>
</td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42">
<div align="left">
<font face="Verdana">
<input name="chickenpieces_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"><font size="2"></font></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" bgcolor="#d2d2d2" width="470">
<div align="left">
<font face="Verdana"><label2 for="patotosalad" id="potatosalad"></label2>
<input name="potatosalad" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="5" type="text"><font size="2">Quarts of Potato Salad (Mustard)&nbsp; @ $5.79/quart</font></font>
</div>
</td>
<td bgcolor="#d2d2d2" width="22">
<font face="Verdana" size="2">$</font>
</td>
<td bgcolor="#d2d2d2" width="42">
<div align="left">
<font face="Verdana">
<input name="potatosalad_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" width="470">
<div align="left">
<font face="Verdana"><label2 for="beans" id="beans"></label2>
<input name="beans" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="6" type="text"><font size="2">Quarts of Mike &amp; Zach's Baked Beans @ $5.79/quart</font></font>
</div>
</td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42">
<div align="left">
<font face="Verdana">
<input name="beans_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"><font size="2"></font></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" bgcolor="#d2d2d2" width="470">
<div align="left">
<font face="Verdana"><label2 for="slaw" id="slaw"></label2>
<input name="slaw" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="7" type="text"><font size="2">Quarts of Deli Slaw @ $5.79/quart</font></font>
</div>
</td>
<td bgcolor="#d2d2d2" width="22">
<font face="Verdana" size="2">$</font>
</td>
<td bgcolor="#d2d2d2" width="42">
<div align="left">
<font face="Verdana">
<input name="slaw_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" width="470">
<div align="left">
<font face="Verdana"><label2 for="bunseight" id="bunseight"></label2>
<input name="bunseight" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="8" type="text"><font size="2">8 Pack Buns @ $1.99/ea.</font></font>
</div>
</td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42">
<div align="left">
<font face="Verdana">
<input name="bunseight_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"><font size="2"></font></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" bgcolor="#d2d2d2" width="470">
<div align="left">
<font face="Verdana"><label2 for="bunstwelve" id="bunstwelve"></label2>
<input name="bunstwelve" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="9" type="text"><font size="2">12 Pack Buns @ $2.99/ea.</font></font>
</div>
</td>
<td bgcolor="#d2d2d2" width="22">
<font face="Verdana" size="2">$</font>
</td>
<td bgcolor="#d2d2d2" width="42">
<div align="left">
<font face="Verdana">
<input name="bunstwelve_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" width="470">
<div align="left">
<font face="Verdana"><label2 for="saucepint" id="saucepint"></label2>
<input name="saucepint" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="10" type="text"><font size="2">Pints of Mike's Famous Sauce @ $4.29/ea.</font></font>
</div>
</td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42">
<div align="left">
<font face="Verdana">
<input name="saucepint_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"><font size="2"></font></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" bgcolor="#d2d2d2" width="470">
<div align="left">
<font face="Verdana"><label2 for="saucehalf" id="saucehalf"></label2>
<input name="saucehalf" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="11" type="text"><font size="2">Half Gallons of Mike's Famous Sauce @ $11.99/ea.</font></font>
</div>
</td>
<td bgcolor="#d2d2d2" width="22">
<font face="Verdana" size="2">$</font>
</td>
<td bgcolor="#d2d2d2" width="42">
<div align="left">
<font face="Verdana">
<input name="saucehalf_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" width="470">
<div align="left">
<font face="Verdana"><label2 for="saucegallon" id="saucegallon"></label2>
<input name="saucegallon" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="12" type="text"><font size="2">Gallons of Mike's Famous Sauce @ $21.99/ea.</font></font>
</div>
</td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42">
<div align="left">
<font face="Verdana">
<input name="saucegallon_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"><font size="2"></font></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="3" width="492">
<div align="center">
<b>&nbsp;</b>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" width="470">
<div align="right">
<font face="Verdana" size="2">
<strong>Sub-Total:</strong> </font>
</div>
</td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42"><font face="Verdana"><label2 for="total_cost" id="total_cost"></label2>
<input name="total_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"></font>
</td>
</tr>
<tr align="center">
<td colspan="2" width="470">
<div align="right">
<font face="Verdana" size="2">
<strong>Tax:</strong> </font>
</div>
</td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42"><font face="Verdana"><label2 for="total_tax" id="total_tax"></label2>
<input name="total_tax" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"><font size="2"></font></font>
</td>
</tr>
<tr align="center">
<td width="60">
<div align="right">
<font face="Verdana" size="2">&nbsp;</font>
</div>
</td>
<td width="410">
<p align="right"><font face="Verdana" size="2">
<strong>Total:</strong> </font>
</p></td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42"><font face="Verdana"><label2 for="total_withtax" id="total_withtax"></label2>
<input name="total_withtax" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"><font size="2"></font></font>
</td>
</tr>
<tr align="center">
<td colspan="4">

</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></form>
</table>
</div></center>
</td>
</tr></tbody>
</table>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="535">
<tbody><tr>
<td>&nbsp;&nbsp;<font face="Verdana" size="2"><br>
<b>Hint</b></font><p><font face="Verdana" size="2">Save 10% With
Our Family Specials! Check Out Our Menu!<br>
1 lb. Chopped
Pork Makes 6 Sandwiches<br>
1 Quart Side Dish Serves 6-8 People<br>
1 Pint Sauce For Every 8 Sandwiches<br>
Call Ahead for 30 Pack Buns<br>
Plates are $.35/each</font><br><br>
</p></td>
</tr>
</tbody></table>
</div>
<div id="contact-area">
<label for="Name" id="Name">Name:</label><br>
<input name="Name" tabindex="13" type="text">
<label for="Tel" id="Tel">Telephone:</label><br>
<input name="Tel" tabindex="14" type="text">
<label for="Email" id="Email">Email:</label><br>
<input name="Email" tabindex="15" type="text">
<label for="EventName" id="EventName">Event Name:</label><br>
<input name="EventName" tabindex="16" type="text">
<label for="EventDateTime" id="EventDateTime">Event Date/Time:</label><br>
<input name="EventDateTime" tabindex="17" type="text">
<label for="NumberOfPeople" id="NumberOfPeople">Number of People:</label><br>
<input name="NumberOfPeople" tabindex="18" type="text">
<label for="MoreInfo" id="MoreInfo">More Info:</label><br><br><br>
<textarea name="MoreInfo" rows="20" cols="20" tabindex="19"></textarea>
<font face="Verdana" size="2">
</font><div id="reset">
<font face="Verdana" size="2"> <input value="Reset" name="B2" style="font-family: Verdana; font-size: 10pt;" tabindex="20" type="reset">&nbsp;

</font>
<a href="thanks.php" style="text-decoration: none;" params="lightwindow_form=Catering,lightwindow_width=430,lightwindow_height=535" class="lightwindow_action" rel="submitForm"><button tabindex="21">Submit</button></a>
</div>
</div>
</div>


Just to note, that first table is not showing up at all. I think you should consider not using tables for layout because they are a mess (and various other reasons)

chbrandt
Feb 10th, 2010, 10:33 AM
The code in form.php isn't as bad as it looks; there is actually a method of spacing behind it, although it looks horrible wrapped in the code tag of this forum. Either way, I know this isn't the problem, as the page form.php looks great stand alone.

As to the link tag you refer to, I have no idea what you're talking about. There are link tags in both the form.php and the index.php, both in the headers of their respective pages.

Can you provide any insight into fixing the CSS problem?

ahallicks
Feb 10th, 2010, 10:43 AM
How does the content appear in the box? I'm guessing it's Ajax and that it simply gets the content from that form.php page?

The following is the complete HTML inside the lightcontainer:



<div style="height: 868px; width: 646px; left: -323px; top: -434.5px; display: block; visibility: visible;" id="lightwindow_container"><div id="lightwindow_title_bar"><div style="height: 25px; margin-top: 0px; opacity: 0.999999;" id="lightwindow_title_bar_inner"><span id="lightwindow_title_bar_title"></span><a id="lightwindow_title_bar_close_link">close</a></div></div><div id="lightwindow_stage"><div style="overflow: auto; height: 823px; width: 626px;" id="lightwindow_contents"><div style="display: none;" id="lightwindow_loading"><img src="images/ajax-loading.gif" alt="loading"><span>Loading or <a href="javascript: myLightWindow.deactivate();">Cancel</a></span><iframe style="visibility: hidden;" name="lightwindow_loading_shim" id="lightwindow_loading_shim" src="javascript:false;" frameborder="0" scrolling="no"></iframe></div>


<link rel="stylesheet" href="form.css" type="text/css">
<script type="text/javascript" src="javascript/prototype.js"></script>
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="javascript/lightwindow.js"></script>
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen">

<script type="text/javascript">

var items = { "pork" : 7.99,
"ribs" : 15.99,
"chickenwhole" : 9.99,
"chickenpieces" : 11.99,
"potatosalad" : 5.79,
"beans" : 5.79,
"slaw" : 5.79,
"bunseight" : 1.99,
"bunstwelve" : 2.99,
"saucepint" : 4.29,
"saucehalf" : 11.99,
"saucegallon" : 21.99 };

function calculateTotals(form)
{
var total = 0;

for ( var item in items )
{
var qty = parseInt( form.elements[item].value );
if ( isNaN(qty) ) qty = 0;
form.elements[item].value = qty;
var cost = qty * items[item];
total += cost;
form.elements[item+"_cost"].value = cost.toFixed(2);
}

var total_tax = total.toFixed(2) * .075;

var total_withtax = total.toFixed(2) * 1.075;

form.total_cost.value = total.toFixed(2);

form.total_tax.value = total_tax.toFixed(2);

form.total_withtax.value = total_withtax.toFixed(2);

}

</script>



<div id="form">
<br><br>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" height="194" width="584">
<tbody><tr>
<td height="146" width="584">
<center>
<div id="quote" align="center">
<table border="0" cellpadding="0" cellspacing="0" width="535">
<form id="Catering" name="Catering" method="post" action="contactengine.php">
<tbody><tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="534">
<tbody><tr align="center">
<td colspan="2" bgcolor="#d2d2d2" width="470">
<div align="left">
<font face="Verdana"><label2 for="pork" id="pork"></label2>
<input name="pork" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="1" type="text"><font size="2">Pounds of Chopped Pork @ $7.99/lb.</font></font>
</div>
</td>
<td bgcolor="#d2d2d2" width="22">
<font face="Verdana" size="2">$</font>
</td>
<td bgcolor="#d2d2d2" width="42">
<div align="left">
<font face="Verdana">
<input name="pork_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" width="470">
<div align="left">
<font face="Verdana"><label2 for="ribs" id="ribs"></label2>
<input name="ribs" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="2" type="text"><font size="2">Sides of Ribs (13 bones) @ $15.99/side</font></font>
</div>
</td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42">
<div align="left">
<font face="Verdana">
<input name="ribs_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" bgcolor="#d2d2d2" width="470">
<div align="left">
<font face="Verdana"><label2 for="chickenwhole" id="chickenwhole"></label2>
<input name="chickenwhole" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="3" type="text"><font size="2">Whole Chickens @ $9.99/ea.</font></font>
</div>
</td>
<td bgcolor="#d2d2d2" width="22">
<font face="Verdana" size="2">$</font>
</td>
<td bgcolor="#d2d2d2" width="42">
<div align="left">
<font face="Verdana">
<input name="chickenwhole_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"><font size="2"></font></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" width="470">
<div align="left">
<font face="Verdana"><label2 for="chickenpieces" id="chickenpieces"></label2>
<input name="chickenpieces" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="4" type="text"><font size="2"> x 8 Chicken Pieces @ $11.99/ea.</font></font>
</div>
</td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42">
<div align="left">
<font face="Verdana">
<input name="chickenpieces_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"><font size="2"></font></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" bgcolor="#d2d2d2" width="470">
<div align="left">
<font face="Verdana"><label2 for="patotosalad" id="potatosalad"></label2>
<input name="potatosalad" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="5" type="text"><font size="2">Quarts of Potato Salad (Mustard)&nbsp; @ $5.79/quart</font></font>
</div>
</td>
<td bgcolor="#d2d2d2" width="22">
<font face="Verdana" size="2">$</font>
</td>
<td bgcolor="#d2d2d2" width="42">
<div align="left">
<font face="Verdana">
<input name="potatosalad_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" width="470">
<div align="left">
<font face="Verdana"><label2 for="beans" id="beans"></label2>
<input name="beans" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="6" type="text"><font size="2">Quarts of Mike &amp; Zach's Baked Beans @ $5.79/quart</font></font>
</div>
</td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42">
<div align="left">
<font face="Verdana">
<input name="beans_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"><font size="2"></font></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" bgcolor="#d2d2d2" width="470">
<div align="left">
<font face="Verdana"><label2 for="slaw" id="slaw"></label2>
<input name="slaw" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="7" type="text"><font size="2">Quarts of Deli Slaw @ $5.79/quart</font></font>
</div>
</td>
<td bgcolor="#d2d2d2" width="22">
<font face="Verdana" size="2">$</font>
</td>
<td bgcolor="#d2d2d2" width="42">
<div align="left">
<font face="Verdana">
<input name="slaw_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" width="470">
<div align="left">
<font face="Verdana"><label2 for="bunseight" id="bunseight"></label2>
<input name="bunseight" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="8" type="text"><font size="2">8 Pack Buns @ $1.99/ea.</font></font>
</div>
</td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42">
<div align="left">
<font face="Verdana">
<input name="bunseight_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"><font size="2"></font></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" bgcolor="#d2d2d2" width="470">
<div align="left">
<font face="Verdana"><label2 for="bunstwelve" id="bunstwelve"></label2>
<input name="bunstwelve" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="9" type="text"><font size="2">12 Pack Buns @ $2.99/ea.</font></font>
</div>
</td>
<td bgcolor="#d2d2d2" width="22">
<font face="Verdana" size="2">$</font>
</td>
<td bgcolor="#d2d2d2" width="42">
<div align="left">
<font face="Verdana">
<input name="bunstwelve_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" width="470">
<div align="left">
<font face="Verdana"><label2 for="saucepint" id="saucepint"></label2>
<input name="saucepint" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="10" type="text"><font size="2">Pints of Mike's Famous Sauce @ $4.29/ea.</font></font>
</div>
</td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42">
<div align="left">
<font face="Verdana">
<input name="saucepint_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"><font size="2"></font></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" bgcolor="#d2d2d2" width="470">
<div align="left">
<font face="Verdana"><label2 for="saucehalf" id="saucehalf"></label2>
<input name="saucehalf" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="11" type="text"><font size="2">Half Gallons of Mike's Famous Sauce @ $11.99/ea.</font></font>
</div>
</td>
<td bgcolor="#d2d2d2" width="22">
<font face="Verdana" size="2">$</font>
</td>
<td bgcolor="#d2d2d2" width="42">
<div align="left">
<font face="Verdana">
<input name="saucehalf_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" width="470">
<div align="left">
<font face="Verdana"><label2 for="saucegallon" id="saucegallon"></label2>
<input name="saucegallon" size="4" onkeyup="calculateTotals(this.form);" value="0" tabindex="12" type="text"><font size="2">Gallons of Mike's Famous Sauce @ $21.99/ea.</font></font>
</div>
</td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42">
<div align="left">
<font face="Verdana">
<input name="saucegallon_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"><font size="2"></font></font>
</div>
</td>
</tr>
<tr align="center">
<td colspan="3" width="492">
<div align="center">
<b>&nbsp;</b>
</div>
</td>
</tr>
<tr align="center">
<td colspan="2" width="470">
<div align="right">
<font face="Verdana" size="2">
<strong>Sub-Total:</strong> </font>
</div>
</td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42"><font face="Verdana"><label2 for="total_cost" id="total_cost"></label2>
<input name="total_cost" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"></font>
</td>
</tr>
<tr align="center">
<td colspan="2" width="470">
<div align="right">
<font face="Verdana" size="2">
<strong>Tax:</strong> </font>
</div>
</td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42"><font face="Verdana"><label2 for="total_tax" id="total_tax"></label2>
<input name="total_tax" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"><font size="2"></font></font>
</td>
</tr>
<tr align="center">
<td width="60">
<div align="right">
<font face="Verdana" size="2">&nbsp;</font>
</div>
</td>
<td width="410">
<p align="right"><font face="Verdana" size="2">
<strong>Total:</strong> </font>
</p></td>
<td width="22">
<font face="Verdana" size="2">$</font>
</td>
<td width="42"><font face="Verdana"><label2 for="total_withtax" id="total_withtax"></label2>
<input name="total_withtax" size="4" value="0.00" style="float: right;" tabindex="-1" disabled="disabled"><font size="2"></font></font>
</td>
</tr>
<tr align="center">
<td colspan="4">

</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></form>
</table>
</div></center>
</td>
</tr></tbody>
</table>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="535">
<tbody><tr>
<td>&nbsp;&nbsp;<font face="Verdana" size="2"><br>
<b>Hint</b></font><p><font face="Verdana" size="2">Save 10% With
Our Family Specials! Check Out Our Menu!<br>
1 lb. Chopped
Pork Makes 6 Sandwiches<br>
1 Quart Side Dish Serves 6-8 People<br>
1 Pint Sauce For Every 8 Sandwiches<br>
Call Ahead for 30 Pack Buns<br>
Plates are $.35/each</font><br><br>
</p></td>
</tr>
</tbody></table>
</div>
<div id="contact-area">
<label for="Name" id="Name">Name:</label><br>
<input name="Name" tabindex="13" type="text">
<label for="Tel" id="Tel">Telephone:</label><br>
<input name="Tel" tabindex="14" type="text">
<label for="Email" id="Email">Email:</label><br>
<input name="Email" tabindex="15" type="text">
<label for="EventName" id="EventName">Event Name:</label><br>
<input name="EventName" tabindex="16" type="text">
<label for="EventDateTime" id="EventDateTime">Event Date/Time:</label><br>
<input name="EventDateTime" tabindex="17" type="text">
<label for="NumberOfPeople" id="NumberOfPeople">Number of People:</label><br>
<input name="NumberOfPeople" tabindex="18" type="text">
<label for="MoreInfo" id="MoreInfo">More Info:</label><br><br><br>
<textarea name="MoreInfo" rows="20" cols="20" tabindex="19"></textarea>
<font face="Verdana" size="2">
</font><div id="reset">
<font face="Verdana" size="2"> <input value="Reset" name="B2" style="font-family: Verdana; font-size: 10pt;" tabindex="20" type="reset">&nbsp;

</font>
<a href="thanks.php" style="text-decoration: none;" params="lightwindow_form=Catering,lightwindow_width=430,lightwindow_height=535" class="lightwindow_action" rel="submitForm"><button tabindex="21">Submit</button></a>
</div>
</div>
</div>
</div>


After that first iFrame there is a link to a stylesheet, and some links to some javascript, and then another link to a stylesheet. I have a feeling that these might have something to do with your style issue (conflicting with your on page CSS (if they are being loaded with the content, which I'm guessing they are)). Inside that lightcontainer I think you should only have the actual form content, everything else to do with styles and javascript should actually be on the page you are on (js invoked when your lightthingy has loaded).

chbrandt
Feb 10th, 2010, 11:17 AM
So I tried pulling the headers out of the form.php and putting them in the index.php, which makes sense, except it didn't change anything, either on the index.php or in the lightwindow after it opened up. Before yesterday, I've had a working lightwindow with the current form that you see IN the lightwindow, and I've tried adding the part that is only showing up in the form.php, the new part at the top. The code comes from stickmanlabs, but since their site is down, here is the link to their site on archive.org :)

http://web.archive.org/web/20080312043717rn_1/www.stickmanlabs.com/lightwindow/

Not sure if that helps as to how this lightwindow is coded, but what I'm doing should be OK with the script, as I've had it working until yesterday.