VK wrote:
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=searchage nt-2-criterion
id=searchagent_ 2_criterion_2 size=7 name=foo0>
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:30 0px;">
Why I need that size attribute on SELECT is that I need the element to
be SELECT LIST and not SELECT DROPDOWN.
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.
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.
So you should avoid mutually-excepting draw instructions, because it leaves
you on the merci of a particular browser.
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>Blinki ng 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.getEle mentById('repor tresults');
// check only for MSIE
if (srchrestble && document.all&&w indow.offscreen Buffering){
var tds = srchrestble.get ElementsByTagNa me('tbody');
var i=0;
for (i=0; i<tds.length;i+ +){
tds[i].onmouseover = function(){
this.style.back groundColor = 'infobackground ';
}
tds[i].onmouseout = function(){
this.style.back groundColor = '';
}
}
}
}
//]]></script>
</head>
<body>
<table height="200" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<form action="savedre portslist.php" method="post">
<table cellpadding="0" cellspacing="0" border="0"
class="searchag ent-2">
<tbody>
<tr>
<td valign="top" width="33%">
<select name="foo0" id="searchagent _2_criterion_0" size="7"
class="searchag ent-2-criterion">
<option>These </option>
<option>items </option>
<option>flick er very much</option>
</select>
</td>
<td valign="top" width="33%">
<select name="foo1" id="searchagent _2_criterion_1" size="7"
class="searchag ent-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>flick er very much</option>
<option>These </option>
<option>items </option>
<option>flick er very much</option>
</select>
</td>
<td valign="top" width="33%">
<select name="foo2" id="searchagent _2_criterion_2" size="7"
class="searchag ent-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>flick er very much</option>
<option>These </option>
<option>items </option>
<option>flick er very much</option>
</select>
</td>
</tr>
</tbody>
</table>
</form>
<table cellpadding="0" cellspacing="0" border="1"
class="reportre sults" id="reportresul ts">
<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>
