Hi there,
I searched the forum about this issue and found a great post that suggested that using <span style="position: relative"> would make the background of a div, table cell, etc. be affected by the filter:alpha style, but it would keep the text, images, etc. from being affected. It worked great until I needed the text in my table cell to be scrollable. I used the <div style="overflow: auto"> attribute to make my table cell scroll, but when I did that, the text became semi-transparent just like the background. Other than re-designing my page using layers, is there any other way of getting scrollable text to be 100% opaque while the background behind the text is semi-transparent?
Thanks!
JessPut the text in a child div of the one with alpha setting, and use overflow:auto; in that div instead of the one with alpha setting?I would try that, but I designed my page using tables, not divs. For that to work, I'd have to redesign the entire page using layers -- a last resort, I hope!
Thanks for the suggestion though. Anyone else?Like this:
<table border="1" cellpadding="0" cellspacing="0" summary="">
<tr><td style="background:#C2DADA; color:#000000; filter: alpha(opacity=50); -moz-opacity: .5;">transparent <span style="position:relative; -moz-opacity:1;">opaque</span></td></tr>
</table>Hi Fang,
Try giving what a width?
I searched the forum about this issue and found a great post that suggested that using <span style="position: relative"> would make the background of a div, table cell, etc. be affected by the filter:alpha style, but it would keep the text, images, etc. from being affected. It worked great until I needed the text in my table cell to be scrollable. I used the <div style="overflow: auto"> attribute to make my table cell scroll, but when I did that, the text became semi-transparent just like the background. Other than re-designing my page using layers, is there any other way of getting scrollable text to be 100% opaque while the background behind the text is semi-transparent?
Thanks!
JessPut the text in a child div of the one with alpha setting, and use overflow:auto; in that div instead of the one with alpha setting?I would try that, but I designed my page using tables, not divs. For that to work, I'd have to redesign the entire page using layers -- a last resort, I hope!
Thanks for the suggestion though. Anyone else?Like this:
<table border="1" cellpadding="0" cellspacing="0" summary="">
<tr><td style="background:#C2DADA; color:#000000; filter: alpha(opacity=50); -moz-opacity: .5;">transparent <span style="position:relative; -moz-opacity:1;">opaque</span></td></tr>
</table>Hi Fang,
Try giving what a width?