Visibility bug in tables with background-color? (IE6)

**nje01** · 08-31-2005, 04: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

HTML Code:

<?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, 05: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, 05: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, 05:35 PM

Here is an IE hack that will not allow selecting of text and gives the desired appearance:

Code:

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

and:

HTML Code:

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

**Twey** · 08-31-2005, 05:37 PM

Does it do the same for display:none;?

**nje01** · 08-31-2005, 05: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:

HTML Code:

<?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, 05:44 PM

Originally Posted by Twey

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, 05: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, 06:14 PM

Code:

<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, 07: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.

Thread: Visibility bug in tables with background-color? (IE6)

Thread Tools

Search Thread

Visibility bug in tables with background-color? (IE6)

Bookmarks

Bookmarks

Posting Permissions