Cells don't react on mouse events

I

iGoA

New Member
Hi@all!

I'm new in this forum and I hope you can help me with a very strange behaviour of IE (and partial Firefox):
I've coded a php script which generates a calendar overview of n months (in order to display an overview of the whole year). The calendar consists of a table with cols for the months. (in this case, the number of months is 1, so the table has only one row with one column.
Every month is a sub table which has cells for every day. Now the problem: I want to show a hint on every day cell when the mouse is over and I want to react on clicks on every cell. In IE nearly no cell reacts neither on onmouseover nor on onclick. Only on the right edges of the most right day cells of a month the these mouse events are triggered. In Firefox it's diffrent: Every cell reacts on all mouse events, but in the last row of every month, the events are only triggered on top edges.
Another thing is, that the defined cursor-style only is display in the areas where the mouse events work. It seems, there's some invisible layer between mouse and the elements which avoids the elements to recieve any events.

This is all very confusing to me and doesn't seem to make any sense.

I've looked at the HTML code a thousand times to find an error (unclosed elements or something like that). Can you see the error?
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <link rel="stylesheet" type="text/css" href="igi.css" />
    <script type="text/javascript" src="tools.js"></script>
    <script type="text/javascript" src="organizerEditor.js"></script>
  </head>

  
  <body>
  <div id='hintlayer' class='hint' style='position: absolute; visibility: hidden; z-index:15'>&nbsp;</div>
  <div id='editorLayer' class='darkPanel' style='position: absolute; visibility: hidden; z-index:10; width:100%; height:100%'>&nbsp;</div>
  

  <table>
    <tr>
      <td class='calendarPanel' align='center'>
        <table style='border-spacing:2px'>
          <tr>
            <th colspan='7' class='calendarMonthHead'>January</th>

          </tr>
          <tr>
            <th class='calendarWeekdayHead'>Mon</th>
            <th class='calendarWeekdayHead'>Tue</th>
            <th class='calendarWeekdayHead'>Wed</th>
            <th class='calendarWeekdayHead'>Thu</th>
            <th class='calendarWeekdayHead'>Fri</th>

            <th class='calendarWeekdayHead'>Sat</th>
            <th class='calendarWeekdayHead'>Sun</th>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td>&nbsp;</td>
            <td class='calendarDay smallCalenderDay' id='day2009-01-01' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>1</td>

            <td class='calendarDay smallCalenderDay' id='day2009-01-02' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>2</td>
            <td class='calendarSunday smallCalenderDay' id='day2009-01-03' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>3</td>
            <td class='calendarSunday smallCalenderDay' id='day2009-01-04' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>4</td>
          </tr>
          <tr>
            <td class='calendarDay smallCalenderDay' id='day2009-01-05' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>5</td>
            <td class='calendarDay smallCalenderDay' id='day2009-01-06' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>6</td>

            <td class='calendarDay smallCalenderDay' id='day2009-01-07' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>7</td>
            <td class='calendarDay smallCalenderDay' id='day2009-01-08' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>8</td>
            <td class='calendarDay smallCalenderDay' id='day2009-01-09' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>9</td>
            <td class='calendarSunday smallCalenderDay' id='day2009-01-10' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>10</td>
            <td class='calendarSunday smallCalenderDay' id='day2009-01-11' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>11</td>
          </tr>

          <tr>
            <td class='calendarDay smallCalenderDay' id='day2009-01-12' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>12</td>
            <td class='calendarDay smallCalenderDay' id='day2009-01-13' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>13</td>
            <td class='calendarDay smallCalenderDay' id='day2009-01-14' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>14</td>
            <td class='calendarDay smallCalenderDay' id='day2009-01-15' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>15</td>
            <td class='calendarDay smallCalenderDay' id='day2009-01-16' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>16</td>

            <td class='calendarSunday smallCalenderDay' id='day2009-01-17' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>17</td>
            <td class='calendarSunday smallCalenderDay' id='day2009-01-18' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>18</td>
          </tr>
          <tr>
            <td class='calendarDay smallCalenderDay' id='day2009-01-19' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>19</td>
            <td class='calendarDay smallCalenderDay' id='day2009-01-20' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>20</td>
            <td class='calendarDay smallCalenderDay' id='day2009-01-21' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>21</td>

            <td class='calendarDay smallCalenderDay' id='day2009-01-22' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>22</td>
            <td class='calendarDay smallCalenderDay' id='day2009-01-23' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>23</td>
            <td class='calendarSunday smallCalenderDay' id='day2009-01-24' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>24</td>
            <td class='calendarSunday smallCalenderDay' id='day2009-01-25' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>25</td>
          </tr>
          <tr>
            <td class='calendarDay smallCalenderDay' id='day2009-01-26' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>26</td>

            <td class='calendarDay smallCalenderDay' id='day2009-01-27' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>27</td>
            <td class='calendarDay smallCalenderDay' id='day2009-01-28' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>28</td>
            <td class='calendarDay smallCalenderDay' id='day2009-01-29' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>29</td>
            <td class='calendarDay smallCalenderDay' id='day2009-01-30' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>30</td>
            <td class='calendarSunday smallCalenderDay' id='day2009-01-31' onclick='#' onmouseover='showHint(this,"Click, to enter booking here!")' onmouseout='hideHint(this)' style='cursor: pointer'>31</td>
            <td>&nbsp;</td>

          </tr>
        </table>
      </td>
    </tr>
  </table>  </body>
</html>
1. I've tried to remove the 2 DIV-elements which are used to display the hint and (later) an editor. No change.
2. The showHint and hideHint functions are not the problem. When I replace these calls with other calls like alert(), it doesn't work, too
3. I've also tried to display 1 month without the parent table. It worked in IE, but not in FF (last row). That's better, but I need the parent table to display all 12 months.

I hope, it's OK to come with such a big bunch of HTML Code, but I wanted to keep everything in the original context. I've only reduced the number of displayed months to only 1. (the problem is the same with one or with 12 months)

Thanks a lot for having a look at my code!!!
 
Last edited:
I

iGoA

New Member
I've found something!

It has to do with the style classes. For the month cells I use this class:

Code: 
html>body .calendarPanel {
  background-image: url(images/colors/20000000.png);
}

*html .calendarPanel {
  filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='images/colors/20000000.png',sizingMethod='scale');
}

I know, the browser-switch is a bit dirty, but I didn't know it better. Can you tell me another way to use alphablended png's?
 
You must log in or register to reply here.
Top