CSS Javascript Conflict

webdork
webdork used Ask the Experts™
on
I've got some date picker calendars that popup on icon click then fill a date field when the day is selected.

As soon as I connect my stylesheet, the calendars dont popup or fire.

Here are links to not working:
http://74.81.196.208/skylerelectric/employees_timecards.asp

and working page. Obviously the page is a mess without the stylesheet. but the calendars fire. you may have to scroll up to see them.

http://74.81.196.208/skylerelectric/employees_timecards2.asp

The culprit CSS is attached.
/***********************************************************************
 * Base elements
 **********************************************************************/
body 		{ background: #333333; font-family: 'Arial', 'Helvetica', sans-serif; font-size: 12px; margin: 0px 0px 0px 0px; }

h1, h2, h3,
h4, h5, h6 	{ font-weight: normal; }
h2 			{ color: #d2cda1; font-size: 16px; margin: 0px 0px 10px 0px;}
p			{ line-height: 18px; margin: 0px 0px 15px 0px; }
a 			{ color: #978d4b; text-decoration: none; }
a:hover 	{ text-decoration: underline; }
/***********************************************************************
 * Base classes
 **********************************************************************/
.clear:after 	{ content: "."; display: block; height: 0; overflow:hidden; clear: both; visibility: hidden; }
.fl 			{ float: left; }
.fr				{ float: right; }
.center			{ text-align: center; }
.hidden 		{ display: none; }
.bold			{ font-weight: bold; }
.size11			{ font-size: 11px; }
.height14		{ line-height: 14px; } 

/* Columns */
.col3 		{ width: 100%; }
.col3 .col2 { width: 590px; }
.col3 .col1	{ width: 320px; }
.col4 		{ width: 100%; }
.col4 .col1 { width: 25%; }
/* Links*/
.links 		{}
.links li 	{ display: block; float: left; margin: 0px 10px 0px 0px;}
.links a 	{ display: block; }

/* Buttons */
.button 				{ color: #ffffff; cursor: pointer; display: block; font-size: 11px; font-weight: bold; height: 18px; line-height: 18px; text-decoration: none; width: auto; }
.button span			{ display: block; height: 18px; }
.button:hover			{ text-decoration: none !important; }

.button_red 			{ background: #836a79; }
.button_red span 		{ background: url('../image/button-red-left.gif') top left no-repeat; }
.button_red span span 	{ background: url('../image/button-red-right.gif') top right no-repeat; padding: 0px 15px;}
.button_red:hover 				{ background: #aa859b; }
.button_red:hover span 			{ background: url('../image/button-red-left-hover.gif') top left no-repeat; }
.button_red:hover span span 	{ background: url('../image/button-red-right-hover.gif') top right no-repeat; }

.button2_red 			{ background: #836a79; }
.button2_red span 		{ background: url('../image/button2-red-left.gif') top left no-repeat; }
.button2_red span span 	{ background: url('../image/button2-red-right.gif') top right no-repeat; padding: 0px 15px;}
.button2_red:hover 				{ background: #aa859b; }
.button2_red:hover span 		{ background: url('../image/button2-red-left-hover.gif') top left no-repeat; }
.button2_red:hover span span 	{ background: url('../image/button2-red-right-hover.gif') top right no-repeat; }

.button_gray 			{ background: #6a7983; }
.button_gray span 		{ background: url('../image/button-gray-left.gif') top left no-repeat; }
.button_gray span span 	{ background: url('../image/button-gray-right.gif') top right no-repeat; padding: 0px 15px;}
.button_gray:hover 				{ background: #859baa; }
.button_gray:hover span 		{ background: url('../image/button-gray-left-hover.gif') top left no-repeat; }
.button_gray:hover span span 	{ background: url('../image/button-gray-right-hover.gif') top right no-repeat; }

.button2_gray 			{ background: #6a7983; }
.button2_gray span 		{ background: url('../image/button2-gray-left.gif') top left no-repeat; }
.button2_gray span span { background: url('../image/button2-gray-right.gif') top right no-repeat; padding: 0px 15px;}
.button2_gray:hover 			{ background: #859baa; }
.button2_gray:hover span 		{ background: url('../image/button2-gray-left-hover.gif') top left no-repeat; }
.button2_gray:hover span span 	{ background: url('../image/button2-gray-right-hover.gif') top right no-repeat; }

.button_brown 				{ background: #83806a; font-weight: normal; }
.button_brown span 			{ background: url('../image/button-brown-left.gif') top left no-repeat; }
.button_brown span span 	{ background: url('../image/button-brown-right.gif') top right no-repeat; padding: 0px 15px;}
.button_brown:hover 			{ background: #978d4b; }
.button_brown:hover span 		{ background: url('../image/button-brown-left-hover.gif') top left no-repeat; }
.button_brown:hover span span 	{ background: url('../image/button-brown-right-hover.gif') top right no-repeat; }

.button2_brown 				{ background: #83806a; font-weight: normal; }
.button2_brown span 		{ background: url('../image/button2-brown-left.gif') top left no-repeat; }
.button2_brown span span 	{ background: url('../image/button2-brown-right.gif') top right no-repeat; padding: 0px 15px;}
.button2_brown:hover 			{ background: #978d4b; }
.button2_brown:hover span 		{ background: url('../image/button2-brown-left-hover.gif') top left no-repeat; }
.button2_brown:hover span span 	{ background: url('../image/button2-brown-right-hover.gif') top right no-repeat; }

.button_hover:hover 			{ background: #836a79; }
.button_hover:hover span 		{ background: url('../image/button-red-left.gif') top left no-repeat; }
.button_hover:hover span span 	{ background: url('../image/button-red-right.gif') top right no-repeat; padding: 0px 15px;}
.button2_hover:hover 			{ background: #836a79; }
.button2_hover:hover span 		{ background: url('../image/button2-red-left.gif') top left no-repeat; }
.button2_hover:hover span span 	{ background: url('../image/button2-red-right.gif') top right no-repeat; padding: 0px 15px;}

/* Color picker */
#color_picker_div			{ margin: 0px 0px 25px 0px; }
#color_picker 				{ background: url('../image/color_picker.png') top left no-repeat; float: left; height: 36px; padding: 7px; position: relative; width: 36px; z-index: 11; }
#color_picker_div a			{ display: block; line-height: 35px; text-decoration: underline !important; width: 120px; }
#color_picker_div a:hover	{ text-decoration: none !important; }
#color_picker div 			{ height: 22px; position: relative; width: 22px; z-index: -1; }

#bg_top			{ height: 474px; text-align: center; background: url('../image/goldline.gif') bottom left repeat-x #070808; width: 100%; }
#bg_header		{ width: 1000px; height: 474px; margin: 0px auto; text-align: left; background: url('../image/goldline_full.gif') bottom center no-repeat #070808; position: relative;}
#bg_layout		{ width: 1000px; height: 474px; position: absolute; top: 0px; left: 0px; background: url('../image/header_layout.png') top left no-repeat; }

/***********************************************************************
 * Page wrapper
 **********************************************************************/
#page 			{ margin: -450px auto 0px auto; width: 994px; }
#page_inner 	{ background: #333333 url('../image/page-bottom.gif') top left repeat-y; }
#page_padding 	{ background: url('../image/footer.gif') bottom left no-repeat; padding: 20px 35px 60px 35px; position: relative; z-index: 4000;}

/***********************************************************************
 * Header - logo & menu & languages 
 **********************************************************************/
#header 					{ height: 70px; top: 25px; position: absolute; width: 924px; z-index: 2;}
#header #logo 				{ color: #fff; float: left; }
#header #logo a				{ color: #fff; text-decoration: none; }
#header #logo img			{ margin: -15px 10px 0px 0px; }
#header #logo span			{ display: block; }
#header #logo .title		{ font-size: 32px; font-weight: normal; padding: 3px 0px 0px 0px; }
#header #logo .subtitle		{ font-size: 12px; top: -2px; padding: 0px 0px 0px 3px; position: relative;  }

#main_menu 				{ float: right; width: 550px; }
#main_menu li 			{ display: block; float: left; width: auto; }
#main_menu a 			{ background: url('../image/main-menu-normal.png') top left no-repeat; color: #fff; display: block; padding: 0px 10px 0px 25px; text-decoration: none; text-transform: uppercase; }
#main_menu a:hover 		{ background: url('../image/main-menu-hover.png') top left no-repeat; }
#main_menu a.active 	{ background: url('../image/main-menu-hover.png') top left no-repeat; }

#main_menu .menu  				{ background: url('../image/page-border-horizontal.gif') bottom left repeat-x; clear: both; float: right; height: 25px; margin: 0px 0px 30px 0px; padding: 0px 0px 0px 0px; display: block; width: auto; }
#main_menu .menu a				{ display: block; font-weight: bold; margin-bottom: 5px;}
#main_menu .menu li				{ }
#main_menu .menu ul				{ background: url('../image/menu-center.png') 0 0 no-repeat; border-bottom: 1px solid #070808; border-left: 1px solid #070808; display: block; padding: 6px 0px !important; position: absolute; z-index: 9999;}
#main_menu .menu li li 			{ display: block; float: none; }
#main_menu .menu li li a		{ background: none; color: #fff; display: block; font-size: 12px; font-weight: normal; margin: 0px 3px; padding: 8px 8px; text-transform: none; white-space: nowrap;}
#main_menu .menu li li:hover a				{ background: #070808; }
#main_menu .menu li li:hover li a   		{ background: none; }
#main_menu .menu li li:hover li a:hover   	{ background: #070808; }
#main_menu .menu li li a:hover 	{ background: #070808; }
#main_menu .menu ul ul 			{ margin: -100px 0px 0px -2px; position: relative; }

/* SuckerFish dropdowns */
#main_menu .menu ul 					{ line-height: 1; list-style: none; margin: 0px 0px 0px 11px; padding: 0; }
#main_menu .menu li ul 					{ left: -9999px; width: 160px;}
#main_menu .menu li:hover ul,
#main_menu .menu li.sfhover ul 			{ left: auto; }
#main_menu .menu li ul ul				{ margin: -33px 0 0 159px; position: absolute; z-index: 9999; }
#main_menu .menu li:hover ul ul, 
#main_menu .menu li.sfhover ul ul 		{ left: -9999px; }
#main_menu .menu li:hover ul, 
#main_menu .menu li li:hover ul, 
#main_menu .menu li.sfhover ul, 
#main_menu .menu li li.sfhover ul 		{ left: auto; }
#main_menu .menu li:hover ul ul, 
#main_menu .menu li:hover ul ul ul, 
#main_menu .menu li.sfhover ul ul, 
#main_menu .menu li.sfhover ul ul ul 	{ left: -9999px; }
#main_menu .menu li:hover ul, 
#main_menu .menu li li:hover ul, 
#main_menu .menu li li li:hover ul, 
#main_menu .menu li.sfhover ul, 
#main_menu .menu li li.sfhover ul, 
#main_menu .menu li li li.sfhover ul { left: auto; }
#main_menu .menu li:hover ul ul, 
#main_menu .menu li:hover ul ul ul, 
#main_menu .menu li:hover ul ul ul ul, 
#main_menu .menu li.sfhover ul ul, 
#main_menu .menu li.sfhover ul ul ul, 
#main_menu .menu li.sfhover ul ul ul ul { left: -9999px; }
#main_menu .menu li:hover ul, 
#main_menu .menu li li:hover ul, 
#main_menu .menu li li li:hover ul, 
#main_menu .menu li li li li:hover ul, 
#main_menu .menu li.sfhover ul, 
#main_menu .menu li li.sfhover ul, 
#main_menu .menu li li li.sfhover ul, 
#main_menu .menu li li li li.sfhover ul { left: auto; }

#header #lang				{ height: 15px; clear: both; display: block; float: right; }
#header #lang a 			{ background: none; display: inline; padding: 0px; width: auto; }
#header #lang a:hover img	{ border: 1px solid #fff;}
#header #lang li			{ float: right; padding: 0px 5px 0px 0px; width: auto; }
#header #lang img			{ border: 1px solid #ccc; display: block; padding: 1px; }

/***********************************************************************
 * Content
 **********************************************************************/
#content 			{ background: url('../image/content-top.png') top left no-repeat; color: #666666; margin: 90px auto 0px auto; width: 918px;}
#content_inner 		{ background: url('../image/content-bottom.png') bottom left no-repeat; padding: 0px 0px 33px 0px; }
#content_padding 	{ background: url('../image/content-center.gif') top left repeat-y; }

#content .rule		{ background: url('../image/content-rule.gif') top center no-repeat; border: 0px; height: 10px; margin: 1px 0px 25px 0px; padding: 0px; width: 100%;}
#content .button 	{ line-height: 18px; }

#content #breadcrumb 			{ font-size: 11px; height: 34px; }
#content #breadcrumb ul			{ padding: 13px 0px 0px 30px; }
#content #breadcrumb a			{ color: #978d4b; font-weight: bold; text-decoration: none; }
#content #breadcrumb a:hover	{ text-decoration: underline; }
#content #breadcrumb li 		{ float: left; }
#content #breadcrumb .sep 		{ padding: 0px 5px; }

#content #header_sub					{ background: url('../image/content-header-bg.gif') 0px 0px no-repeat; margin: 0px 20px 0px 20px; position: relative; z-index: 1; }
#content #header_sub .shadow			{ background: url('../image/content-header-top.png') top left no-repeat; height: 8px; left: 0px; position: absolute; top: 0px; width: 880px; z-index: 1; }
#content #header_sub_img				{ float: left; position: relative; overflow: hidden; width: 329px; }
#content #header_sub_img img			{ border-right: 1px solid #fff; display: block; }
#content #header_sub_img .body			{ background: url('../image/content-header-layer.png') top left no-repeat; height: 500px; left: 0px; position: absolute; top: 0px; width: 100px; z-index: 9997; }
#content #header_sub_img .img			{ background: url('../image/content-header-layer-img.png') center left no-repeat; height: 100%; right: 0px; position: absolute; top: 0px; width: 8px; z-index: 9999; }
#content #header_sub_img .bottom 		{ background: url('../image/content-header-layer-bottom.png') top left no-repeat; display: block; font-size: 0px; height: 4px; line-height: 4px; margin-top: -4px; position: relative; padding: 0px; width: 320px; z-index: 9998; }
#content #header_sub_inner				{ float: left; padding: 17px 20px 10px 15px; width: 509px; }
#content #header_sub_inner h1			{ color: #070808; font-family: 'Myriad Pro', 'Arial', sans-serif; font-size: 26px; margin: 0px 0px 5px 0px; padding: 0px; }
#content #header_sub_inner p 			{ font-size: 11px; line-height: 14px; margin: 0px 20px 0px 0px; padding: 0px 0px 0px 0px;}
#content #header_sub_inner .rule 		{ background: url('../image/content-header-border.gif') bottom left repeat-x; border: 0px; height: 10px; margin: 0px 0px 13px 0px; padding: 0px; width: 70%; font-size: 0%;}
#content .no_img 						{ background: url('../image/content-header-bg2.gif') 0px 0px no-repeat !important; }
#content .no_img #header_sub_img		{ display: none !important; }
#content .no_img #header_sub_inner		{ padding-left: 10px !important; width: 860px !important; }

#content #main 					{ background: #fff url('../image/content-main-bg.gif') top right repeat-y; margin: 0px 30px; }
#content .no_sidebar 			{ background: none !important; }
#content .no_sidebar #mainbar 	{ width: 100% !important; }
#content #mainbar 			{ background: #fff; float: left; width: 545px; }
#content #mainbar h1		{ color: #978d4b; font-size: 22px; margin: 0px 0px 10px 0px; }
#content #mainbar h2		{ color: #978d4b; font-size: 20px; margin: 0px 0px 10px 0px; }
#content #mainbar h3		{ color: #978d4b; font-size: 18px; margin: 0px 0px 10px 0px; }
#content #mainbar h4		{ color: #978d4b; font-size: 16px; margin: 0px 0px 10px 0px; }
#content #mainbar h5		{ color: #978d4b; font-size: 14px; margin: 0px 0px 10px 0px; }
#content #mainbar h6		{ color: #978d4b; font-size: 12px; margin: 0px 0px 10px 0px; }
#content #mainbar ul 		{ list-style-type:square; margin: 0 0 15px; padding: 0 0 0 16px; }
#content #mainbar ul li 	{ padding-bottom: 5px; }
#content #mainbar ol 		{ list-style-type: lower-alpha; margin: 0 0 15px; padding: 0 0 0 22px; }
#content #mainbar ol li 	{ padding-bottom: 5px; }
#content #mainbar img 		{ border: 1px solid #ddd; display: block; margin-top: 2px; margin-bottom: 10px; padding: 1px; }
#content #mainbar .item 			{ padding: 0px 0px 25px 0px; }
#content #mainbar .alignleft		{ float: left; margin-right: 20px; }
#content #mainbar .alignright		{ float: right; margin-left: 20px; }
#content #mainbar .aligncenter		{ margin: 0px auto 15px auto; }
#content #mainbar .downline			{ border-bottom: 1px solid #CCCCCC; margin-bottom: 15px; padding-bottom: 3px; }
#content #mainbar .button2_brown			{ font-weight: bold; }
#content #mainbar p			{ margin: 0px 0px 25px 0px; text-align: justify; }
#content #mainbar p a		{ text-decoration: underline; }
#content #mainbar p a:hover { text-decoration: none; }
#content #mainbar table 	{ border-collapse: collapse; margin: 0px 0px 25px 0px; padding: 20px; width: 100%; }
#content #mainbar th 		{ border-top: 2px solid #dddddd; border-bottom: 1px solid #dddddd; color: #978d4b; text-align: left; padding: 5px 0px; }
#content #mainbar td 		{ border-bottom: 0px solid #dddddd; padding: 5px 0px; }
#content #mainbar .one  	{ width: 200px; }
#content #mainbar .two  	{ width: 110px; }
#content #mainbar .three  	{ width: 110px; }
#content #mainbar .four  	{ }
#content #mainbar .sign 	{ color: #bfb991; font-size: 14px; font-style: italic;}

/***********************************************************************
 * Sidebar - search & boxes
 **********************************************************************/
#content #sidebar 			{ background: #fff; float: right; position: relative; width: 273px; }
#content #search 			{ background: url('../image/content-main-search-bg.gif') top left no-repeat; height: 44px; margin: 0px 0px 25px 0px; width: 273px; }
#content #search a			{ display: block; color: #978d4c; font-size: 11px; line-height: 12px; text-decoration: none; text-transform: lowercase;}
#content #search .fl 		{ margin: 10px 0px 0px 0px; }
#content #search .input 	{ background: url('../image/content-main-search-input.gif') top left no-repeat; border: 0px; color: #979797; display: block; height: 19px; margin: 0px 0px 0px 10px; padding: 3px 10px 2px 10px; width: 137px; }
#content #search .submit 	{ background: url('../image/content-main-search-submit.gif') top left no-repeat; border: 0px; display: block; font-size: 0%; height: 24px; line-height: 0px; margin: 0px 10px 0px 0px; text-indent: -9999px; width: 36px; cursor: pointer; }

#content .box 				{ background: #fff url('../image/content-main-box-border.gif') bottom left repeat-x; font-size: 11px; margin: 0px 0px 15px 0px; padding: 0px 0px 15px 0px; position: relative; }
#content .box h2 			{ color: #978d4b; margin: 0px 0px 10px 0px; }
#content .box p				{ font-size: 11px; line-height: 14px; margin: 0px; }
#content .box .list a		{ display: block; background: url('../image/content-main-box-arrow.gif') 0px 9px no-repeat; border-top: 1px solid #dddddd; color: #666666;  line-height: 15px; padding: 4px 0px 4px 15px; text-decoration: none; }
#content .box .list li 		{ display: block; }
#content .box .list li.active a 	{ font-weight: bold; }
#content .box .list li.active li a 	{ font-weight: normal; }
#content .box .list li a:hover { color: #070808; }
#content .box .list li a 	{ font-size: 12px;}
#content .box .list li li	{ background-position: top left; line-height: 12px; margin: 0px 0px 0px 20px; }
#content .box .list li li a	{ background-position: 0px 9px; border: 0px; line-height: 16px; }
#content .box .list ul 		{ padding: 0px 0px 7px 0px; }
#content .box .image		{ float: left; margin: 0px 10px 0px 0px; }
#content .box .image a		{ display: block; }
#content .box .image img	{ border: 1px solid #d5d1b7; display: block; padding: 3px; }
#content .box .text .button { position: absolute; bottom: 0px; left: 118px; }
#content .box .links 		{ margin: 15px 0px 0px 0px; }
#content .box_last			{ background: none; margin: 0px; }

#content .box_map 			{ background: url('../image/content-main-box-map.gif'); font-size: 11px; height: 128px; margin: 0px 0px 15px 0px; width: 273px; }
#content .box_map a			{ color: #978d4b; display: block; text-decoration: none; height: 128px; position: relative; width: 273px; }
#content .box_map a:hover	{ text-decoration: underline; }
#content .box_map a span	{ position: absolute; bottom: 5px; right: 10px; }

#content .box_contact .mail a { background: url('../image/content-main-box-contact.gif') top right no-repeat; cursor: pointer; height: 65px; position: absolute; right: 0px; top: 0px; width: 43px; }

#content .box_places		{}
#content .box_places ul 	{}
#content .box_places li		{ display: block; border-bottom: 1px solid #dddddd; padding: 5px 0px; }
#content .box_places a		{ text-decoration: none; }
#content .box_places img	{ vertical-align: top; }

/***********************************************************************
 * Content bottom links 
 **********************************************************************/
#footer #content_links				{ margin: 0px 0px 20px 0px; }
#footer #content_links h2			{ font-size: 12px; font-weight: bold; margin: 0px 0px 20px 0px; text-transform: uppercase; }
#footer #content_links li			{ display: block; height: 24px; margin: 0px; padding: 0px; }
#footer #content_links a			{ background: url('../image/content-links-arrow.gif') top left no-repeat; color: #a0a0a0; display: block; padding: 0px 0px 10px 10px; text-decoration: none; }
#footer #content_links a:hover 		{ text-decoration: underline; }
#footer #content_links .last		{ padding-bottom: 0px; }			
#footer #content_links .cols 		{ padding: 5px 10px 5px 10px; }
#footer #content_links .col1		{ width: 250px; }
#footer #content_links .col2		{ width: 258px; }
#footer #content_links .col2 .wrap 	{ margin: 0px 0px 0px 20px; }
#footer #content_links .col3		{ width: 180px; }
#footer #content_links .col3 .wrap 	{ margin: 0px 0px 0px 20px; }
#footer #content_links .col4		{ width: 210px; }
#footer #content_links .col4 .wrap 	{ margin: 0px 0px 0px 20px; }

/***********************************************************************
 * Contact form
 **********************************************************************/
#contact 					{ background: #f5f5f5 url('../image/contact-center.gif') top left repeat-y; width: 545px;  }
#contact #contact_inner 	{ background: url('../image/contact-top.gif') top left no-repeat; padding: 5px 0px 0px 0px; }
#contact #contact_padding 	{ background: url('../image/contact-bottom.gif') bottom left no-repeat; padding: 15px 0px; }

#contact label				{ cursor: pointer; display: block; height: 24px; line-height: 24px; padding: 0px 0px 0px 20px; width: 125px; }
#contact textarea			{ border: 1px solid #a0a0a0; font-family: 'Arial', sans-serif; font-size: 12px; height: 100px; padding: 4px; width: 350px; }
#contact .input				{ border: 1px solid #a0a0a0; padding: 4px 4px 4px 4px; width: 200px; }
#contact .select			{ padding: 0px; height: 22px; border: 1px solid #a0a0a0; font-size: 12px;}
#contact .checkbox			{ padding: 0px; border: 0px solid #a0a0a0; position: relative; top: 2px; left: -4px;}
#contact .clear 			{ margin: 0px 0px 8px 0px; }
#contact .confirm			{ background: url('../image/contact-border.gif') top left no-repeat; margin: 20px 0px 0px 0px; padding: 20px 20px 0px 20px; }
#contact .submit			{ background: url('../image/contact-button.gif') top left no-repeat; border: 0px; cursor: pointer; height: 22px; color: #fff; margin: 0px 0px 0px 125px; padding: 0px; width: 90px; font-family: arial; font-size: 12px; font-weight: bold; }
#contact .terms				{ padding: 0px 0px 0px 200px; }
#contact div.fl label		{ float: none; color: #ff0000; display: block; padding: 0px 0px 0px 20px; width: auto; }

#contact label.required 	{ background: url('../image/contact-required.gif') top right no-repeat; }
/***********************************************************************
 * Footer - sign & cols
 **********************************************************************/
#footer 					{ margin: 30px 3px 0px 3px; color: #a0a0a0; }
#footer img					{ border: 1px solid #d2cda1; display: block; margin: 2px 10px 0px 0px; }
#footer .item				{ position: relative; }
#footer .item p				{ margin: 0px; padding: 0px 0px 10px 0px;}
#footer .item .button		{ display: inline-block; }
#footer .item .image		{ float: left; }
#footer .item .text 		{ }
#footer .col3				{ margin: 0px auto 30px auto; width: 900px; }
#footer .col3 .col2			{ background: url('../image/footer-col-border.gif') top right repeat-y; width: 575px; }
#footer .col3 .col1			{ width: 315px; }
#footer .col3 .col2 .wrap	{ padding: 10px 20px 15px 0px; }
#footer .col3 .col1 .wrap	{ font-size: 11px; padding: 10px 0px 15px 10px; }
#footer #sign 				{ background: url('../image/footer-sign-border.gif') top left repeat-x; font-size: 11px; margin: 0px 10px; padding: 15px 0px 0px 0px; }
#footer #sign .fl		{ width: 440px;}
#footer #sign .fr		{ width: 440px; text-align: right;}
#footer #sign a  			{ color: #d2cda1; text-decoration: none; }
#footer #sign a:hover		{ text-decoration: underline;}
#footer #sign li			{ color: #d2cda1; display: inline; }
#footer #sign li span 		{ padding: 0px 5px; }

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Top Expert 2010
Commented:
It seems your styles.css is a bit confusing the picker CSS as well as a z-index issue.

For instance setting a higher z-index than what you use shows up the picker box, but then you'll have to figure out the box CSS as well as it seems it also needs some work

Try adding z-index:9999 to the .calendar class in pick_date_cal.css as below
.calendar  {
background:none repeat scroll 0 0 #C8D0D4;
border-color:#FFFFFF #000000 #000000 #FFFFFF;
border-style:solid;
border-width:2px;
color:#000000;
cursor:default;
display:none;
font-family:tahoma,verdana,sans-serif;
font-size:11px;
position:relative;
z-index:9999;
}

Open in new window

Top Expert 2010

Commented:
P.S, you should post your JavaScript related questions in JavaScript zones not JScript, JScript is a Microsoft Internet Explorer specific language

Cheers
Commented:
Your problem is with z-Index.  When I set z-Index to 9999 (using IE debugger) it shows.  

Note that whenever you hit a calendar button a new <div is added at the end for a new calendar ... hit the calendar button 5 times and you'll have 5 divs with only one having property display:block

So fool around with the z-Index property.  Below is the generated div for the calendar with my overridden z-Index:

<div class="calendar" style="position: absolute; display: block; top: 612px; left: 430px; z-index: 9999;">

Author

Commented:
That seems to do it. Thank you.

I'm getting the below error in IE8 though:  
And the line number makes no sense to me. Line 209 in what file?

Message: 'document.form1.Startday' is null or not an object
Line: 209
Char: 1
Code: 0


Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial