PDA

View Full Version : Visibility bug in tables with background-color? (IE6)



nje01
08-31-2005, 05:08 PM
I want to blank out various cells of a table (in javascript) using CSS. My table uses alternating background colors for each row. In IE, when I set the visibility property of a cell to hidden, the resulting area appears white, rather than the background color of the row. I'll include a sample of what I mean below. Essentially, I want to see the background color behind cell 1,4. FF displays this correctly (or at least, how I want. :-)

Thanks for any help y'all can provide...

nathan



<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>CSS Visibility IE 6.0 Bug</title>
<style type="text/css">
tr.header {
background-color: #CCCC99;
}
tr.even {
background-color: #ECECCC;
}
tr.odd {
background-color: white;
}
td.invisibleeven {
visibility: hidden;
}
td.invisibleodd {
visibility: hidden;
}
</style>
</head>
<body>
<h1>CSS Visibility IE 6.0 Bug</h1>
<h2>Table 1</h2>
<table>
<tr class="header"><th>Head 1</th><th>Head 2</th></tr>
<tr class="odd"><td class="odd">Cell 1,1</td><td class="odd">Cell 2,1</td></tr>
<tr class="even"><td class="even">Cell 1,2</td><td class="even">Cell 2,2</td></tr>
<tr class="odd"><td class="invisibleodd">Cell 1,3</td><td class="odd">Cell 2,3</td></tr>
<tr class="even"><td class="invisibleeven">Cell 1,4</td><td class="even">Cell 2,4</td></tr>
<tr class="odd"><td class="odd">Cell 1,5</td><td class="odd">Cell 2,5</td></tr>
<tr class="even"><td class="even">Cell 1,6</td><td class="even">Cell 2,6</td></tr>
</table>
</body>
</html>

nje01
08-31-2005, 06:19 PM
[ Make text color same as background color ]

Yep, that was my initial solution, but it has a number of issues that lead me to look for an alternative. When the user selects text from that cell, it is revealed because the selection background changes but the text color doesn't (necessarily). Also, if there are other things in the cell (links, for example) these need to be hidden too (for these, visibility: hidden is sufficient). Maybe I could put all text in a span, just for this purpose? Seems like a waste.

Thanks,

nathan

jscheuer1
08-31-2005, 06:26 PM
I deleted my previous post because it was in error. It does work as you desire in Mozilla with a strict doctype. I hadn't inserted it (the strict doctype) correctly at first. IE still doesn't like it though, even with the strict doctype. So, I guess you have found another browser bug to add to the long list of browser bugs. If you were to supply code or a link to a practical application of this idea, perhaps a more suitable work around could be found.

jscheuer1
08-31-2005, 06:35 PM
Here is an IE hack that will not allow selecting of text and gives the desired appearance:

td.invisibleeven {
visibility: hidden;
}
* html td.invisibleeven {
visibility: visible;
background-color: #ECECCC;
color: #ECECCC;
}and:

<td class="invisibleeven" onselectstart="return false;">

Twey
08-31-2005, 06:37 PM
Does it do the same for display:none;?

nje01
08-31-2005, 06:41 PM
Well, the practical application is as follows. I have a large table of data (think Excel). I have implemeted sorting and column moving in DHTML / Javascript. Where rows of data have the same values, from the left up to a certain column, I want to make the duplicate values vanish to help the eye discern duplicate values as a grouping. My example, with values to illustrate this application:


<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>CSS Visibility IE 6.0 Bug</title>
<style type="text/css">
tr.header {
background-color: #CCCC99;
}
tr.even {
background-color: #ECECCC;
}
tr.odd {
background-color: white;
}
td.invisibleeven {
visibility: hidden;
}
td.invisibleodd {
visibility: hidden;
}
</style>
</head>
<body>
<h1>CSS Visibility IE 6.0 Bug</h1>
<h2>Table 1</h2>
<table>
<tr class="header"><th>Head 1</th><th>Head 2</th></tr>
<tr class="odd"><td class="odd">Tree</td><td class="odd">Green</td></tr
>
<tr class="even"><td class="even">Car</td><td class="even">Green</td><
/tr>
<tr class="odd"><td class="invisibleodd">Car</td><td class="odd">Blue</td></tr>
<tr class="even"><td class="invisibleeven">Car</td><td class="even">Red</td></tr>
<tr class="odd"><td class="odd">House</td><td class="odd">Brown</td></tr
>
<tr class="even"><td class="even">Sky</td><td class="even">Blue</td><
/tr>
</table>
</body>
</html>

Cheers!

nathan

nje01
08-31-2005, 06:44 PM
Does it do the same for display:none;?
display: none shifts the cells in column 2 to the left into column 1 (as it should). So, no dice.

Twey
08-31-2005, 06:52 PM
Yes, I was just wondering if it made any difference to the cell's background colour (the empty space on the end of the row, I suppose).

jscheuer1
08-31-2005, 07:14 PM
<style type="text/css">
tr.header {
background-color: #CCCC99;
}
tr.even {
background-color: #ECECCC;
}
tr.odd {
background-color: white;
}
td.invisibleeven {
visibility: hidden;
}
* html td.invisibleeven {
visibility: visible;
background-color: #ECECCC;
color: #ECECCC;
}
td.invisibleodd {
visibility: hidden;
}
</style>
<script type="text/javascript">
function ieHide(){
var tds=document.all.tags('td')
for (var i = 0; i < tds.length; i++)
if (tds(i).className=='invisibleeven')
tds(i).innerHTML='&nbsp;'
}
if (document.all&&!window.opera)
onload=ieHide;
</script>

nje01
08-31-2005, 08:19 PM
...which assumes that the contents of the cell can be clobbered and this only need be done on page load. As I said, this is part of a dynamic display in which the sort order of the rows and the order of the columns can be changed - so the logic of which cells to "hide" needs to done dynamically and reversably.

nje01
08-31-2005, 08:23 PM
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US">
<head>
<title>CSS Visibility IE 6.0 Bug</title>
<style type="text/css">
tr.header {
background-color: #CCCC99;
}
tr.even {
background-color: #ECECCC;
}
tr.odd {
background-color: white;
}
td.invisibleeven, span.invisibleeven {
visibility: hidden;
}
td.invisibleodd, span.invisibleodd {
visibility: hidden;
}
</style>
</head>
<body>
<h1>CSS Visibility IE 6.0 Bug</h1>
<h2>Table 1</h2>
<table>
<tr class="header"><th>Head 1</th><th>Head 2</th></tr>
<tr class="odd"><td class="odd">Tree</td><td class="odd">Green</td></tr>
<tr class="even"><td class="even">Car</td><td class="even">Green</td></tr>
<tr class="odd"><td class="invisibleodd">Car</td><td class="odd">Blue</td></tr>
<tr class="even"><td class="invisibleeven">Car</td><td class="even">Red</td></tr>
<tr class="odd"><td class="odd">House</td><td class="odd">Brown</td></tr>
<tr class="even"><td class="even">Sky</td><td class="even">Blue</td></tr>
</table>
<h2>Table 2</h2>
<table>
<tr class="header"><th><span>Head 1</span></th><th><span>Head 2</th></span></tr>
<tr class="odd"><td><span class=odd>Tree</span></td><td><span class=odd>Green</span></td></tr>
<tr class="even"><td><span class=even>Car</span></td><td><span class=even>Green</span></td></tr>
<tr class="odd"><td><span class=invisibleodd>Car</span></td><td><span class=odd>Blue</span></td></tr>
<tr class="even"><td><span class=invisibleeven>Car</span></td><td><span class=even>Red</span></td></tr>
<tr class="odd"><td><span class=odd>House</span></td><td><span class=odd>Brown</span></td></tr>
<tr class="even"><td ><span class=even>Sky</span></td><td><span class=even>Blue</span></td></tr>
</table>
</body>
</html>