Table Column Header Text Not Transparent

HTML & CSS
1

I’m trying to setup my tables to be semi-transparent (to give the illusion of being disabled). I have it working perfectly in firefox and nearly perfect in IE. However, there is one small problem in IE I can not seem to fix. In IE (7/8) the entire table is transparent with the exception of the Table Column Header Text. This sticks out like a sore thumb, any ideas on what I can do to get this working?


.hideTable{
	background-color: white;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter:alpha(opacity=30); /* IE */
	opacity: 0.3; /* Safari, Opera */
	-moz-opacity:0.30; /* FireFox */
	z-index: 20;
	height: 100%;
	width: 100%;
	background-repeat:no-repeat;
	background-position:center;
	cursor: default;
}

Here is the html, which may not be perfect because I pulled it out of IE Developer tools… but I wanted you to see the html after it has been manipulated by javascript.

<div class="wrap_window hideTable">
<table class=sectiontableheader width="100%">
<tbody>
<tr>
<td style="TEXT-ALIGN: left"><SPAN style="CURSOR: default" class=title onclick=""><A name="sample">Sample Table</A></SPAN></td>
<td style="TEXT-ALIGN: right"><SPAN style="CURSOR: default" class=but onclick=""><SPAN style="CURSOR: default" id=section-header-sample-table class=switch_button onclick="">Details</SPAN><SPAN style="CURSOR: default" class=switch_button onclick="">Print</SPAN><SPAN style="CURSOR: default" class=switch_button onclick=""> -/+ </SPAN></SPAN></td></tr></tbody></table>
<FORM style="MARGIN: 0px" id=sample-form name=sample-form action=#>
<div id=sample-table_wrapper class=dataTables_wrapper>
<div class=dataTables_scroll>
<div style="BORDER-BOTTOM: 0px; POSITION: relative; BORDER-LEFT: 0px; WIDTH: 913px; OVERFLOW: hidden; BORDER-TOP: 0px; BORDER-RIGHT: 0px" class=dataTables_scrollHead>
<div style="WIDTH: 930px" class=dataTables_scrollHeadInner>
<table style="WIDTH: 913px; MARGIN-LEFT: 0px" class="display dataTable" border=0 cellSpacing=0 cellPadding=0>
<thEAD>
<tr>
<th style="WIDTH: 229px" class="dataTable-defaultSort sorting_desc" jQuery1295284415016="82">Column</th>
<th style="WIDTH: 190px" class=sorting jQuery1295284415016="84">Column</th>
<th style="WIDTH: 187px" class=sorting jQuery1295284415016="85">Column</th>
<th style="WIDTH: 140px" class=sorting jQuery1295284415016="87">Column</th>
<th style="WIDTH: 153px" class=sorting jQuery1295284415016="91">Column</th></tr></THEAD></table></div></div>
<div style="WIDTH: 100%; HEIGHT: 17px; OVERFLOW: auto" class=dataTables_scrollBody jQuery1295284415016="80">
<table style="WIDTH: 913px; MARGIN-LEFT: 0px" id=sample-table class="display dataTable" border=0 cellSpacing=0 cellPadding=0>
<thEAD>
<tr style="HEIGHT: 0px">
<th style="PADDING-BOTTOM: 0px; WIDTH: 229px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 0px; PADDING-TOP: 0px" class="dataTable-defaultSort sorting_desc" jQuery1295284415016="82"></th>
<th style="PADDING-BOTTOM: 0px; WIDTH: 190px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 0px; PADDING-TOP: 0px" class=sorting jQuery1295284415016="84"></th>
<th style="PADDING-BOTTOM: 0px; WIDTH: 187px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 0px; PADDING-TOP: 0px" class=sorting jQuery1295284415016="85"></th>
<th style="PADDING-BOTTOM: 0px; WIDTH: 140px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 0px; PADDING-TOP: 0px" class=sorting jQuery1295284415016="87"></th>
<th style="PADDING-BOTTOM: 0px; WIDTH: 153px; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 0px; PADDING-TOP: 0px" class=sorting jQuery1295284415016="91"></th></tr></THEAD>
<tbody>
<tr class=odd>
<td class=dataTables_empty vAlign=top colSpan=5>No data available in table</td></tr></tbody></table></div></div>
<div class=bottom>
<div id=sample-table_filter class=dataTables_filter>Search: <INPUT disabled type=text jQuery1295284415016="81"></div></div></div></FORM>
</div>

I’ve also attached a screenshot of the bug in IE.

Thanks for any insight you may be able to offer on this problem.

2

I have yet to find a reason why only the header text is not transparent.
I think an easier problem to fix would be the entire table is not transparent in IE.

I have some general suggestions, Is it possible that, just in case, you could also apply the class .hideTable to the header text to ensure that it is transparent. Even though it is applied to the parent element and it should inherit the styling, this should make sure of that.

Also, I do not know what others opinion on this is, but I reccomend that you use quotes when assigning classes and other values inside a tag.

It seems like in some-places you use quotes and it others you do not. Which I believe is confusing :confused:

For example let us take

<FORM style="MARGIN: 0px" id=sample-form name=sample-form action=#>
<div id=sample-table_wrapper class=dataTables_wrapper>

With my recommendation, it should be:

<form style="margin: 0px" id="sample-form" name="sample-form" action="#">
<div id="sample-table_wrapper" class="dataTables_wrapper">

The reason why I suggest this is that I believe it is more proper and easier to read and because of this line (the first one in your html)

<div class="wrap_window hideTable">

I do not think one can have spaces in class names and that is the only place I saw hideTable as a class. And since they are in the same quotations shouldn’t the styling be applied to .wrap_window hideTable
So

wrap_window hideTable{
    background-color: white;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter:alpha(opacity=30); /* IE */
    opacity: 0.3; /* Safari, Opera */
    -moz-opacity:0.30; /* FireFox */
    z-index: 20;
    height: 100%;
    width: 100%;
    background-repeat:no-repeat;
    background-position:center;
    cursor: default;
}

I am still unsure whether ot not you can have spaces in class names, but just to be safe you could make that first div’s class be

<div class="wrap_windowhideTable">

and eliminate the space in the styling accordingly, so

wrap_windowhideTable{
    background-color: white;
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter:alpha(opacity=30); /* IE */
    opacity: 0.3; /* Safari, Opera */
    -moz-opacity:0.30; /* FireFox */
    z-index: 20;
    height: 100%;
    width: 100%;
    background-repeat:no-repeat;
    background-position:center;
    cursor: default;
}

Hope some of my suggestion helped :slight_smile: I take a further look and do some testing of my own and if I find anything, I will let you know.

Regards,
Team 1504

3

Adding the hideTable class to each header did the job. A much simpler solution then I was trying to find :injured:.

And for the record, the HTML I posted was directly out of the IE Developer Tools so IE had its way with it. I should not have been so lazy and just created the HTML from hand for a better example. :blush:

Thanks for the help.

4

Hi,

A child element with position:relative applied will kill the opacity in IE.


            <div style="BORDER-BOTTOM: 0px;[B] POSITION: relative[/B]; BORDER-LEFT: 0px; WIDTH: 913px; OVERFLOW: hidden; BORDER-TOP: 0px; BORDER-RIGHT: 0px" class=dataTables_scrollHead>

You would need to remove the position:relative and then the element will maintain its opacity (or if you need the position:relative then apply the filter to that element also).

5

No problem bar338! I’m glad to help and some of the things IE does are painful to watch.
I am glad to help.

And also thank you Paul for the further assistance :slight_smile:

Regards,
Team 1504