Hi,
I have a problem which has stumped me that occurs in IE6 but not NS9. I haven't been able to test it on IE7.
I have a table with the following html code:
The page normally loads fine, but in IE6 when you move the mouse over a table row and then out again, the div tag which is a parent to the table tag has a scrollbar appear down the side, even though nothing on the page (except the back ground color of the table row) has actually changed.
My initial thought was that there was something in the tables javascript onomuseover/onmouseout code which must have been resizing something in the background. After some investigation I've found that wasn't the case.
The problem seems to come from CSS which is applied to each table row. I took away the CSS properties one by one until I found the offending property. It seems to be this line:
If I omit this line from the CSS code which applies to the TD tags. The fonts are too big but the mouseover/mouseout effects work fine.
In any case the div that is getting scrollbars should expand rather than have scrollbars appear anyway. I have no idea why that isn't happenning.
If you want to see what I mean, an example web page is http://musicplace.my100freemb.com/browse_lyric.php?album_id=55.
To inlcude the full CSS, Javascript, and HTML would take up a massive amount of space but if you would like to see them I will post them - just ask.
Cheers,
Richard
I have a problem which has stumped me that occurs in IE6 but not NS9. I haven't been able to test it on IE7.
I have a table with the following html code:
| Code: |
| <table align=center onMouseOver="javascript:trackTableHighlight(event, '#8888FF');"
onMouseOut="javascript:highlightTableRow(0);" border="0" cellspacing="0" cellpadding="3"> <tr> <th scope="col">track #</th> <th scope="col" width="200px">Song Title</th> <th scope="col">Length</th> </tr> <tr class="tableData"> <td onclick="javascript:window.location='lyric.php?lyric_id=966';">1</td> <td onclick="javascript:window.location='lyric.php?lyric_id=966';"><a href='lyric.php?lyric_id=966'>Paegan Love Song</a></td> <td onclick="javascript:window.location='lyric.php?lyric_id=966';"> </td> </tr> <tr class="tableData"> <td onclick="javascript:window.location='lyric.php?lyric_id=967';">2</td> <td onclick="javascript:window.location='lyric.php?lyric_id=967';"><a href='lyric.php?lyric_id=967'>Bleed Me An Ocean</a></td> <td onclick="javascript:window.location='lyric.php?lyric_id=967';"> </td> </tr> <tr class="tableData"> <td onclick="javascript:window.location='lyric.php?lyric_id=968';">3</td> <td onclick="javascript:window.location='lyric.php?lyric_id=968';"><a href='lyric.php?lyric_id=968'>Graveflower</a></td> <td onclick="javascript:window.location='lyric.php?lyric_id=968';"> </td> </tr> <tr class="tableData"> <td onclick="javascript:window.location='lyric.php?lyric_id=969';">4</td> <td onclick="javascript:window.location='lyric.php?lyric_id=969';"><a href='lyric.php?lyric_id=969'>Diäb Soulé</a></td> <td onclick="javascript:window.location='lyric.php?lyric_id=969';"> </td> </tr> <tr class="tableData"> <td onclick="javascript:window.location='lyric.php?lyric_id=970';">5</td> <td onclick="javascript:window.location='lyric.php?lyric_id=970';"><a href='lyric.php?lyric_id=970'>Locust Spawning</a></td> <td onclick="javascript:window.location='lyric.php?lyric_id=970';"> </td> </tr> <tr class="tableData"> <td onclick="javascript:window.location='lyric.php?lyric_id=971';">6</td> <td onclick="javascript:window.location='lyric.php?lyric_id=971';"><a href='lyric.php?lyric_id=971'>Old Skin</a></td> <td onclick="javascript:window.location='lyric.php?lyric_id=971';"> </td> </tr> <tr class="tableData"> <td onclick="javascript:window.location='lyric.php?lyric_id=972';">7</td> <td onclick="javascript:window.location='lyric.php?lyric_id=972';"><a href='lyric.php?lyric_id=972'>New Death Sensation</a></td> <td onclick="javascript:window.location='lyric.php?lyric_id=972';"> </td> </tr> <tr class="tableData"> <td onclick="javascript:window.location='lyric.php?lyric_id=973';">8</td> <td onclick="javascript:window.location='lyric.php?lyric_id=973';"><a href='lyric.php?lyric_id=973'>Venus Blue</a></td> <td onclick="javascript:window.location='lyric.php?lyric_id=973';"> </td> </tr> <tr class="tableData"> <td onclick="javascript:window.location='lyric.php?lyric_id=974';">9</td> <td onclick="javascript:window.location='lyric.php?lyric_id=974';"><a href='lyric.php?lyric_id=974'>13 Fingers</a></td> <td onclick="javascript:window.location='lyric.php?lyric_id=974';"> </td> </tr> <tr class="tableData"> <td onclick="javascript:window.location='lyric.php?lyric_id=975';">10</td> <td onclick="javascript:window.location='lyric.php?lyric_id=975';"><a href='lyric.php?lyric_id=975'>New Corpse</a></td> <td onclick="javascript:window.location='lyric.php?lyric_id=975';"> </td> </tr> <tr class="tableData"> <td onclick="javascript:window.location='lyric.php?lyric_id=976';">11</td> <td onclick="javascript:window.location='lyric.php?lyric_id=976';"><a href='lyric.php?lyric_id=976'>Dead Girl</a></td> <td onclick="javascript:window.location='lyric.php?lyric_id=976';"> </td> </tr> <tr class="tableData"> <td onclick="javascript:window.location='lyric.php?lyric_id=977';">12</td> <td onclick="javascript:window.location='lyric.php?lyric_id=977';"><a href='lyric.php?lyric_id=977'>Ode of the Paegan</a></td> <td onclick="javascript:window.location='lyric.php?lyric_id=977';"> </td> </tr> </table> |
The page normally loads fine, but in IE6 when you move the mouse over a table row and then out again, the div tag which is a parent to the table tag has a scrollbar appear down the side, even though nothing on the page (except the back ground color of the table row) has actually changed.
My initial thought was that there was something in the tables javascript onomuseover/onmouseout code which must have been resizing something in the background. After some investigation I've found that wasn't the case.
The problem seems to come from CSS which is applied to each table row. I took away the CSS properties one by one until I found the offending property. It seems to be this line:
| Code: |
| font-size: 10px; |
If I omit this line from the CSS code which applies to the TD tags. The fonts are too big but the mouseover/mouseout effects work fine.
In any case the div that is getting scrollbars should expand rather than have scrollbars appear anyway. I have no idea why that isn't happenning.
If you want to see what I mean, an example web page is http://musicplace.my100freemb.com/browse_lyric.php?album_id=55.
To inlcude the full CSS, Javascript, and HTML would take up a massive amount of space but if you would like to see them I will post them - just ask.
Cheers,
Richard
