VK wrote:[color=blue]
> You have disturbed the graphics context on the page by a set of
> mutually-excepting draw instructions.
> ..searchagent-2-criterion {
> FONT: 24px Tahoma; WIDTH: 100%; HEIGHT: 100px
> }
> and
> <SELECT class=searchagent-2-criterion
> id=searchagent_2_criterion_2 size=7 name=foo0>[/color]
Thats true, I have done so.
But text input fields are on many other sites also done in this manner
<input type="text" size="20" style="width:300px;">
Why I need that size attribute on SELECT is that I need the element to
be SELECT LIST and not SELECT DROPDOWN.
[color=blue]
> Let's translate it in English: "Draw me a select box of 100px height and
> place in it seven lines of text, where each line is approx. 20px high. All
> seven lines must be fully visible and retain nice vertical gaps of 4px
> between of them and the box borders. The box cannot exceed the given 100px
> height. Go!"
> You don't need to be a great mathematician to see that it is something wrong
> with this picture. Is it going to be silently ignored or ignored with a
> flicker, what part will be ignored on what browser - these are irrelevant
> questions.[/color]
CSS should in theory overdefine the original height (as without css
applied) and element should generate scrollbars if needed. Aparently
MSIE6 (and I dont know about older, possibly so too) has huge problems
getting it right (e.c. no problems in mozilla)
The TBODYHIGHLIGHT has *no impact* whatsoever opn the height of the
table, therefore this phenomenon is a bug. If you use event handlers on
TDs or TRs the flcikering doesnt appear. Plus taking in acount that the
flickering occurs in totally different table. Plus teh fact that MSIE6
can peacefully draew the selects with CSS given height.
It just the event handlers that chane background color on totally
different tables tbody make it flicker, which is very odd.
[color=blue]
> So you should avoid mutually-excepting draw instructions, because it leaves
> you on the merci of a particular browser.[/color]
Yes I have noticed it that when I remove the height it dissapears.
But the mystique thing to me was it appears on some pleaces and on rare
layouts it doesnt appear. But since I have lil time, I dont have the
full days time to investigate and summarize it up completely I will go
with the no height applied direction, because of remake of the html
templates is too late for now.
For historical reasons I shall put here the copy of that problemous
file, so have oppurtunety to refer back one day.
<!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" xml:lang="et" lang="et">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Blinking Selectyed in MSIE</title>
<style type="text/css">
..searchagent-2{
width:100%;
}
.searchagent-2-criterion{
width:100%;
height:400px;
font:24px Tahoma;
}
..reportresults{
width:100%;
table-layout:fixed; /* without this IE wont make the table as wide as
possible, but shrinkwraps (While mozilla doesnt need this hee for this) */
}
</style>
<script type="text/javascript">//<![CDATA[
window.onload = function(){
var srchrestble = document.getElementById('reportresults');
// check only for MSIE
if (srchrestble && document.all&&window.offscreenBuffering){
var tds = srchrestble.getElementsByTagName('tbody');
var i=0;
for (i=0; i<tds.length;i++){
tds[i].onmouseover = function(){
this.style.backgroundColor = 'infobackground';
}
tds[i].onmouseout = function(){
this.style.backgroundColor = '';
}
}
}
}
//]]></script>
</head>
<body>
<table height="200" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<form action="savedreportslist.php" method="post">
<table cellpadding="0" cellspacing="0" border="0"
class="searchagent-2">
<tbody>
<tr>
<td valign="top" width="33%">
<select name="foo0" id="searchagent_2_criterion_0" size="7"
class="searchagent-2-criterion">
<option>These</option>
<option>items</option>
<option>flicker very much</option>
</select>
</td>
<td valign="top" width="33%">
<select name="foo1" id="searchagent_2_criterion_1" size="7"
class="searchagent-2-criterion">
<option>When I move the mouse</option>
<option>Over the table rows here below</option>
<option>in MSIE6</option>
<option>this looks oughful</option>
<option>These</option>
<option>items</option>
<option>flicker very much</option>
<option>These</option>
<option>items</option>
<option>flicker very much</option>
</select>
</td>
<td valign="top" width="33%">
<select name="foo2" id="searchagent_2_criterion_2" size="7"
class="searchagent-2-criterion">
<option>Over the table rows here below</option>
<option>in MSIE6</option>
<option>this looks oughful</option>
<option>These</option>
<option>items</option>
<option>flicker very much</option>
<option>These</option>
<option>items</option>
<option>flicker very much</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
<table cellpadding="0" cellspacing="0" border="1"
class="reportresults" id="reportresults">
<tbody>
<tr class="odd">
<td> a</td>
<td> </td>
<td> a</td>
<td> </td>
<td> a</td>
<td> </td>
</tr>
<tr class="even">
<td> </td>
<td> </td>
<td> </td>
<td> a</td>
<td> a</td>
<td> a</td>
</tr>
<tr class="odd">
<td> a</td>
<td> </td>
<td> </td>
<td> a</td>
<td> a</td>
<td> a</td>
</tr>
<tr class="even">
<td> a</td>
<td> a</td>
<td> a</td>
<td> a</td>
<td> a</td>
<td> a</td>
</tr>
<tr class="odd">
<td> </td>
<td> </td>
<td> a</td>
<td> a</td>
<td> </td>
<td> </td>
</tr>
<tr class="even">
<td> a</td>
<td> </td>
<td> a</td>
<td> a</td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<div>HOW do I get rid of the SELECT blinking in MSIE in case the mouse
is moved over the table #reportresults rows (BY KEEPING THE EVENT
HANDLER ON THE TBODY element)? The SELECT BOXES SHOULD HAVE SPECIFIED
HEIGHT IN PIXELS.</div>
</body></html>
