View Full Version : foreground issue

11-21-2011, 10:12 AM

I have created two text boxes and clicking on this test box should display a calendar. The calendar is displayed however, it is showing under the text box and not above it. Below is the CSS code for calender. Please check and let me know if there is any errors in it.

/* CSS Document */

.datepicker { border-collapse: collapse; border: 2px solid #999; position: absolute; }
.datepicker tr.controls th { height: 22px; font-size: 11px; }
.datepicker select { font-size: 11px; }
.datepicker tr.days th { height: 18px; }
.datepicker tfoot td { height: 18px; text-align: center; text-transform: capitalize; }
.datepicker th, .datepicker tfoot td { background: #eee; font: 10px/18px Verdana, Arial, Helvetica, sans-serif; }
.datepicker th span, .datepicker tfoot td span { font-weight: bold; }

.datepicker tbody td { width: 24px; height: 24px; border: 1px solid #ccc; font: 11px/22px Arial, Helvetica, sans-serif; text-align: center; background: #fff; }
.datepicker tbody td.date { cursor: pointer; }
.datepicker tbody td.date.over { background-color: #99ffff; }
.datepicker tbody td.date.chosen { font-weight: bold; background-color: #ccffcc; }
.two {
background: url(../../images/forms/form_inp.gif) no-repeat;
border: none;
color: #393939;
height: 25px;

padding: 6px 6px 0 6px;
width: 186px;


11-21-2011, 11:56 AM
Additional information that I would like to share.

Actually there are two CSS file. One for the actual templet and other for the calender. The calender in text box works fine if I remove the actual templet .css from code. If I put the actual templet, then the calender works, but it goes behind the textboxes available on web page.