I was asked to create a calendar where certain dates had pop-up windows when the mouse hovers over them. I created the calendar and the pop-ups, but I’m having trouble with some of the dates showing on top of the pop-up!
Each month is in its own table, and I’ve put each table in its own div with a z-index assigned, so the pop-up from each table shows on top of the tables to its right, but within the same table the pop-up goes under any other dates that have a pop-up assigned to them.
You can view my example here: http://www.cityofpalmdale.org/departments/parks/drytown/index-test.html
Notice the behavior when you hover over September 2: the bolded dates for Sept 15 and 22 are on top of my pop-up box.
I’ve tried tweaking the z-index aqnd positioning of #popup, #popup a, and #popup span, in every way imaginable, with no success. I’ve found some possible solutions but they pertain to IE bugs, and I’m getting the same behavior in IE8 and FF8, so I’m pretty sure I’m doing something wrong, rather than it being a browser issue.
Here is my CSS:
.calMonth {
border - left: 1px solid #000;
border-top: 1px solid # 000;
text - align: center;
table - layout: fixed;
}
.calMonth td {
border - bottom: 1px solid #000;
border-right: 1px solid # 000;
}
.calMonthHeader {
font - weight: bold;
font - size: 1.2em;
color: #026181;
background-color: # d6eff7;
}
.calWeekDays {
font - weight: bold;
background - color: #bae4f2;
font - size: .7em;
}
.calStatusClosed {
background - color: #CCC;
}
.calStatusOpenReg {
background - color: #feda91;
}
.calStatusOpenLate {
background - color: #C6F;
}
.calStatusOpenEarly {
background - color: #764601;
}
.calStatusSundown {
background-color: # c21802;
}
.calStatusSpecial {
background - color: #ff9000;
}
#popup {
color: #000;
}
# popup a,
#popup a: visited {
position: relative;
display: block;
text - decoration: none;
font - size: 1em;
font - weight: bold;
color: #000;
z-index: 0;
}
# popup a span {
display: none;
}
#popup a: hover {
/*background-color: #e9e9e2;*/
}
/* the IE correction rule */#popup a: hover {
text - indent: 0; /* added the default value */
}
#popup a: hover span {
display: block;
position: absolute;
top: 15px;
left: 30px;
width: 250px;
margin: 0px;
padding: 10px;
color: #000;
font-weight: normal;
background: # fff;
text - align: left;
border: 4px solid #7ecce7;
z-index: 100;
}
And here is my code for the September calendar:
<div style="position:relative; z-index:11;">
<table width="170" border="0" cellspacing="0" cellpadding="3" class="calMonth">
<tr>
<td colspan="7" class="calMonthHeader">
<strong>SEPTEMBER 2012</strong>
</td>
</tr>
<tr class="calWeekDays">
<td>S</td>
<td>M</td>
<td>T</td>
<td>W</td>
<td>T</td>
<td>F</td>
<td>S</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td class="calStatusSpecial" id="popup">
<a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
onfocus="this.blur()">1<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
</td>
</tr>
<tr>
<td class="calStatusSpecial" id="popup">
<a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
onfocus="this.blur()">2<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
</td>
<td class="calStatusSpecial" id="popup">
<a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
onfocus="this.blur()">3<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
</td>
<td class="calStatusClosed">4</td>
<td class="calStatusClosed">5</td>
<td class="calStatusClosed">6</td>
<td class="calStatusClosed">7</td>
<td class="calStatusSpecial" id="popup">
<a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
onfocus="this.blur()">8<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
</td>
</tr>
<tr>
<td class="calStatusSpecial" id="popup">
<a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
onfocus="this.blur()">9<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
</td>
<td class="calStatusClosed">10</td>
<td class="calStatusClosed">11</td>
<td class="calStatusClosed">12</td>
<td class="calStatusClosed">13</td>
<td class="calStatusClosed">14</td>
<td class="calStatusSpecial" id="popup">
<a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
onfocus="this.blur()">15<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
</td>
</tr>
<tr>
<td class="calStatusSpecial" id="popup">
<a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
onfocus="this.blur()">16<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
</td>
<td class="calStatusClosed">17</td>
<td class="calStatusClosed">18</td>
<td class="calStatusClosed">19</td>
<td class="calStatusClosed">20</td>
<td class="calStatusClosed">21</td>
<td class="calStatusSpecial" id="popup">
<a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
onfocus="this.blur()">22<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
</td>
</tr>
<tr>
<td class="calStatusSpecial" id="popup">
<a href="calendar_Teachers.html" onclick="NewWindow(this.href,'mywin','450','275','no','center');return false"
onfocus="this.blur()">23<span><H2>September 2012</H2><H1>Teacher Appreciation Month</H1> Teachers get in for free during the month of September. Must present work ID at the time of redemption.</span></a>
</td>
<td class="calStatusClosed">24</td>
<td class="calStatusClosed">25</td>
<td class="calStatusClosed">26</td>
<td class="calStatusClosed">27</td>
<td class="calStatusClosed">28</td>
<td class="calStatusClosed">29</td>
</tr>
<tr>
<td class="calStatusClosed">30</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</div>
When the popup shows up, add a class to the active TD to set that z-index even higher than the others.
Either that or you can do:
You really shouldn’t be using the same ID on all of these. It’s invalid HTML to have duplicate IDs on the same page.