I have given a table background image using css background-image property. The cells are given opacity settings so that the image is shown through the cells. In Firefox it works perfectly but in IE all the cells(TDs) are showing the background image. How do I fix the issue in IE. Click the link below for the page
html page here
views:
320answers:
3
+2
A:
All the individual cells seem to inherit the background-image styling from the table.
Adding something like
td { background: transparent; }
seems to fix the problem in IE.
kkyy
2009-08-19 06:25:13
This works, but the background colors given to the "td" are getting removed.
Shivanand
2009-08-19 07:16:32
Naturally, as the td background color is set to transparent :)That was just a quick example, the main point being that you should remove the background image from the cells by setting their background-image to none one way or another.
kkyy
2009-08-19 08:04:03
How can I do that.
Shivanand
2009-08-19 08:11:02
td { background-image: none; }
kkyy
2009-08-19 08:43:34
that is not working.
Shivanand
2009-08-19 09:19:37
Actually, now that I looked into the code, you just can't have both the watermark and the background-colors of the rows visible, because if the cells have a background color, you just can't see the whole table's background image through them; you can think of the cells being "on top" of the parent table.
kkyy
2009-08-19 10:10:42
I have given opacity to the table cells. Please check the internal styles in the head section.
Shivanand
2009-08-19 15:00:40
A:
Could you wrap the table in a div?
If so then you could apply the background image to the div wrapper, which shouldn't affect the table or its cells in any way :)
Wayne Austin
2009-08-19 10:56:33
How is it not helping? provided u dont have a background property applied to the table tag the background image from the div will show through.
Wayne Austin
2009-08-19 12:13:12
It works in Firefox but not in IE. I have given opacity to the table cells. Please check the internal styles in the head section.
Shivanand
2009-08-19 15:35:55
A:
I got the solution. I have added "td" to the selectors tr.normalRow, tr.alternativeRow, tr.selectedRow, tr.hoverRow and also added the property "background-image: none;". Here is the code I used:
Code:
tr.normalRow td{ background: #FFFFFF; font-size: 11px; cursor: pointer; filter: alpha(opacity = 90); -moz-opacity: .90; opacity: .90; background-image: none; }
tr.alternativeRow td{ background: #f4f4f4; font-size: 11px; cursor: pointer; filter: alpha(opacity = 90); -moz-opacity: .90; opacity: .90; background-image: none; }
tr.selectedRow td{ background: #fff19f; font-size: 11px; cursor: pointer; filter: alpha(opacity = 90); -moz-opacity: .90; opacity: .90; background-image: none; }
tr.hoverRow td{ background: lightblue; font-size: 11px; cursor: pointer; filter: alpha(opacity = 90); -moz-opacity: .90; opacity: .90; background-image: none; }
Shivanand
2009-08-26 04:04:19