The DIV calendar has lost its style.

[Jesdisciple]

I took the second option from Matt Kruse's calendar popup page, but my copy doesn't have the same CSS applied to it as in his page. This makes it shove everything else on the page around (since it's not absolutely positioned), fill a lot of space up, and look really plain.EDIT: FIXED: Also, a mysterious error shows up when I click I should have recorded this earlier. > cancel > I should have recorded this earlier. (This doesn't happen online, only at home...?)

document.getElementById(this.divName) has no propertieshttp://www.auto-chat.net/ccarter/messages/messages.js.phpLine 1000

See http://www.auto-chat.net/ccarter/messages/index.php.

[justsomeguy]

Do you have an example online? The code is too long to post here. Also, as long as you have the stylesheet linked up and the correct styles in there (without any conflicting names in other stylesheets) it should be fine. If you are changing how you set it up on your page vs. how he says to set it up then you'll need to consider what your changes mean to the Javascript or CSS. Check the Javascript console for error messages.

[Jesdisciple]

See http://www.auto-chat.net/ccarter/messages/index.php.He doesn't use CSS per se (excluding DOM CSS) except for a special, unrelated example included in the page. (Each involved declaration contains the string "TEST" in its class and/or id.)

http://www.mattkruse.com/javascript/calendarpopup/"[/url]']<!-- These styles are here only as an example of how you can over-ride the default styles that are included in the script itself. --><STYLE> .TESTcpYearNavigation, //...</STYLE>

No LINK tags, CSS imports, or other STYLE tags are in the page.

[justsomeguy]

I can't load a link on your local server.

[Jesdisciple]

Lol, no, or at least I hope you can't. Correction: http://www.auto-chat.net/ccarter/messages/index.php.(For the record of this thread: In updating the online version, I have made main() undefined online but not at home.)

[justsomeguy]

Neither of the links on that page do anything for me, what am I supposed to be looking for?

[Jesdisciple]

(I've put the main page at http://www.auto-chat.net/ccarter/messages/ or http://www.auto-chat.net/ccarter/messages/index.php now.)I think I have the page transferred successfully now. I was having issues with not changing file paths after everything was in the same directory. The calendar should show by I should have recorded this earlier. > select date.

[justsomeguy]

It's still not working, this is the contents of messages.js.php:<br /><b>Warning</b>: require_once(C:/wamp/www/library/php/Jesdisciple.php) [<a href='function.require-once'>function.require-once</a>]: failed to open stream: No such file or directory in <b>/home/autoc/public_html/ccarter/messages/messages.js.php</b> on line <b>2</b><br /><br /><b>Fatal error</b>: require_once() [<a href='function.require'>function.require</a>]: Failed opening required 'C:/wamp/www/library/php/Jesdisciple.php' (include_path='.:/usr/lib/php:/usr/local/lib/php') in <b>/home/autoc/public_html/ccarter/messages/messages.js.php</b> on line <b>2</b><br />

[Jesdisciple]

Every time I update the online versions, I have to refactor those paths. It's working again; hopefully you'll see it before I screw it up this time.

[justsomeguy]

This is going to be a long post, but here is the HTML that gets generated for the calendar. You can use this to add the rules in CSS for the various IDs and classes, it looks like everything is set up with a class. If you add those classes and IDs to your CSS then it should style the calendar. If you add absolute positioning to it, it should float over everything else.

<div style='left: 577px; top: 292px; visibility: visible' id="calendar">  <table class="cpBorder" width="144" border="1" borderwidth="1" cellspacing="0" cellpadding="1">	<tbody>	  <tr>		<td align="center">		  <center>			<table width="144" border="0" borderwidth="0" cellspacing="0" cellpadding="0">			  <tbody>				<tr>				  <td class="cpMonthNavigation" width="22">					<a class="cpMonthNavigation" href="java script:CP_refreshCalendar(0,10,2007);"><<</a>				  </td>				  <td class="cpMonthNavigation" width="100">					<span class="cpMonthNavigation">November 2007</span>				  </td>				  <td class="cpMonthNavigation" width="22">					<a class="cpMonthNavigation" href="java script:CP_refreshCalendar(0,12,2007);">>></a>				  </td>				</tr>			  </tbody>			</table>			<table width="120" border="0" cellspacing="0" cellpadding="1" align="center">			  <tbody>				<tr>				  <td class="cpDayColumnHeader" width="14%">					<span class="cpDayColumnHeader">S</span>				  </td>				  <td class="cpDayColumnHeader" width="14%">					<span class="cpDayColumnHeader">M</span>				  </td>				  <td class="cpDayColumnHeader" width="14%">					<span class="cpDayColumnHeader">T</span>				  </td>				  <td class="cpDayColumnHeader" width="14%">					<span class="cpDayColumnHeader">W</span>				  </td>				  <td class="cpDayColumnHeader" width="14%">					<span class="cpDayColumnHeader">T</span>				  </td>				  <td class="cpDayColumnHeader" width="14%">					<span class="cpDayColumnHeader">F</span>				  </td>				  <td class="cpDayColumnHeader" width="14%">					<span class="cpDayColumnHeader">S</span>				  </td>				</tr>				<tr>				  <td class="cpOtherMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,10,28);CP_hideCalendar('0');" class="cpOtherMonthDate">28</a>				  </td>				  <td class="cpOtherMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,10,29);CP_hideCalendar('0');" class="cpOtherMonthDate">29</a>				  </td>				  <td class="cpOtherMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,10,30);CP_hideCalendar('0');" class="cpOtherMonthDate">30</a>				  </td>				  <td class="cpOtherMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,10,31);CP_hideCalendar('0');" class="cpOtherMonthDate">31</a>				  </td>				  <td class="cpCurrentMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,11,1);CP_hideCalendar('0');" class="cpCurrentMonthDate">1</a>				  </td>				  <td class="cpCurrentMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,11,2);CP_hideCalendar('0');" class="cpCurrentMonthDate">2</a>				  </td>				  <td class="cpCurrentMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,11,3);CP_hideCalendar('0');" class="cpCurrentMonthDate">3</a>				  </td>				</tr>				<tr>				  <td class="cpCurrentMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,11,4);CP_hideCalendar('0');" class="cpCurrentMonthDate">4</a>				  </td>				  <td class="cpCurrentMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,11,5);CP_hideCalendar('0');" class="cpCurrentMonthDate">5</a>				  </td>				  <td class="cpCurrentMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,11,6);CP_hideCalendar('0');" class="cpCurrentMonthDate">6</a>				  </td>				  <td class="cpCurrentMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,11,7);CP_hideCalendar('0');" class="cpCurrentMonthDate">7</a>				  </td>				  <td class="cpCurrentMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,11,8);CP_hideCalendar('0');" class="cpCurrentMonthDate">8</a>				  </td>				  <td class="cpCurrentMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,11,9);CP_hideCalendar('0');" class="cpCurrentMonthDate">9</a>				  </td>				  <td class="cpCurrentMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,11,10);CP_hideCalendar('0');" class="cpCurrentMonthDate">10</a>				  </td>				</tr>				<tr>				  <td class="cpCurrentMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,11,11);CP_hideCalendar('0');" class="cpCurrentMonthDate">11</a>				  </td>				  <td class="cpCurrentDate">					<a href="java script:CP_tmpReturnFunction(2007,11,12);CP_hideCalendar('0');" class="cpCurrentDate">12</a>				  </td>				  <td class="cpCurrentMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,11,13);CP_hideCalendar('0');" class="cpCurrentMonthDate">13</a>				  </td>				  <td class="cpCurrentMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,11,14);CP_hideCalendar('0');" class="cpCurrentMonthDate">14</a>				  </td>				  <td class="cpCurrentMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,11,15);CP_hideCalendar('0');" class="cpCurrentMonthDate">15</a>				  </td>				  <td class="cpCurrentMonthDate">					<a href="java script:CP_tmpReturnFunction(2007,11,16);CP_hideCalendar('0');" class="cpCurrentMonthDate">16</a>				  </td>				  <td class="cpCurrentMonthDate">					<span class="cpCurrentMonthDateDisabled">17</span>				  </td>				</tr>				<tr>				  <td class="cpCurrentMonthDate">					<span class="cpCurrentMonthDateDisabled">18</span>				  </td>				  <td class="cpCurrentMonthDate">					<span class="cpCurrentMonthDateDisabled">19</span>				  </td>				  <td class="cpCurrentMonthDate">					<span class="cpCurrentMonthDateDisabled">20</span>				  </td>				  <td class="cpCurrentMonthDate">					<span class="cpCurrentMonthDateDisabled">21</span>				  </td>				  <td class="cpCurrentMonthDate">					<span class="cpCurrentMonthDateDisabled">22</span>				  </td>				  <td class="cpCurrentMonthDate">					<span class="cpCurrentMonthDateDisabled">23</span>				  </td>				  <td class="cpCurrentMonthDate">					<span class="cpCurrentMonthDateDisabled">24</span>				  </td>				</tr>				<tr>				  <td class="cpCurrentMonthDate">					<span class="cpCurrentMonthDateDisabled">25</span>				  </td>				  <td class="cpCurrentMonthDate">					<span class="cpCurrentMonthDateDisabled">26</span>				  </td>				  <td class="cpCurrentMonthDate">					<span class="cpCurrentMonthDateDisabled">27</span>				  </td>				  <td class="cpCurrentMonthDate">					<span class="cpCurrentMonthDateDisabled">28</span>				  </td>				  <td class="cpCurrentMonthDate">					<span class="cpCurrentMonthDateDisabled">29</span>				  </td>				  <td class="cpCurrentMonthDate">					<span class="cpCurrentMonthDateDisabled">30</span>				  </td>				  <td class="cpOtherMonthDate">					<span class="cpOtherMonthDateDisabled">1</span>				  </td>				</tr>				<tr>				  <td class="cpOtherMonthDate">					<span class="cpOtherMonthDateDisabled">2</span>				  </td>				  <td class="cpOtherMonthDate">					<span class="cpOtherMonthDateDisabled">3</span>				  </td>				  <td class="cpOtherMonthDate">					<span class="cpOtherMonthDateDisabled">4</span>				  </td>				  <td class="cpOtherMonthDate">					<span class="cpOtherMonthDateDisabled">5</span>				  </td>				  <td class="cpOtherMonthDate">					<span class="cpOtherMonthDateDisabled">6</span>				  </td>				  <td class="cpOtherMonthDate">					<span class="cpOtherMonthDateDisabled">7</span>				  </td>				  <td class="cpOtherMonthDate">					<span class="cpOtherMonthDateDisabled">8</span>				  </td>				</tr>				<tr>				  <td colspan="7" align="center" class="cpTodayText">					<a class="cpTodayText" href="java script:CP_tmpReturnFunction('2007','11','16');CP_hideCalendar('0');">Today</a><br>				  </td>				</tr>			  </tbody>			</table>		  </center>		</td>	  </tr>	</tbody>  </table></div>

[Jesdisciple]

Sorry I took so long to respond, but I figured out where the style went. This is near the top of Matt's page:

// Get style block needed to display the calendar correctlyfunction getCalendarStyles() {	var result = "";	var p = "";	if (this!=null && typeof(this.cssPrefix)!="undefined" && this.cssPrefix!=null && this.cssPrefix!="") {		p=this.cssPrefix;	}	result += "<STYLE>\n";	result += "."+p+"cpYearNavigation,."+p+"cpMonthNavigation { background-color:#C0C0C0; text-align:center; vertical-align:center; text-decoration:none; color:#000000; font-weight:bold; }\n";	result += "."+p+"cpDayColumnHeader, ."+p+"cpYearNavigation,."+p+"cpMonthNavigation,."+p+"cpCurrentMonthDate,."+p+"cpCurrentMonthDateDisabled,."+p+"cpOtherMonthDate,."+p+"cpOtherMonthDateDisabled,."+p+"cpCurrentDate,."+p+"cpCurrentDateDisabled,."+p+"cpTodayText,."+p+"cpTodayTextDisabled,."+p+"cpText { font-family:arial; font-size:8pt; }\n";	result += "TD."+p+"cpDayColumnHeader { text-align:right; border:solid thin #C0C0C0;border-width:0px 0px 1px 0px; }\n";	result += "."+p+"cpCurrentMonthDate, ."+p+"cpOtherMonthDate, ."+p+"cpCurrentDate  { text-align:right; text-decoration:none; }\n";	result += "."+p+"cpCurrentMonthDateDisabled, ."+p+"cpOtherMonthDateDisabled, ."+p+"cpCurrentDateDisabled { color:#D0D0D0; text-align:right; text-decoration:line-through; }\n";	result += "."+p+"cpCurrentMonthDate, .cpCurrentDate { color:#000000; }\n";	result += "."+p+"cpOtherMonthDate { color:#808080; }\n";	result += "TD."+p+"cpCurrentDate { color:white; background-color: #C0C0C0; border-width:1px; border:solid thin #800000; }\n";	result += "TD."+p+"cpCurrentDateDisabled { border-width:1px; border:solid thin #FFAAAA; }\n";	result += "TD."+p+"cpTodayText, TD."+p+"cpTodayTextDisabled { border:solid thin #C0C0C0; border-width:1px 0px 0px 0px;}\n";	result += "A."+p+"cpTodayText, SPAN."+p+"cpTodayTextDisabled { height:20px; }\n";	result += "A."+p+"cpTodayText { color:black; }\n";	result += "."+p+"cpTodayTextDisabled { color:#D0D0D0; }\n";	result += "."+p+"cpBorder { border:solid thin #808080; }\n";	result += "</STYLE>\n";	return result;}

And including the style manually styles the calendar but doesn't solve the shoving. See http://www.auto-chat.net/ccarter/messages/.Thanks for the help.

[justsomeguy]

You need to have a class for #calendar that includes the absolute positioning and floating for the calendar.

[Jesdisciple]

Sorry I took so long to respond; it took a while for me to implement the last of your suggestions, but now it works. Thanks!