Semi-Transparent Boxes and Scrolling

overflow auto, ie filters and rgba

[Whitney914]

I am just getting back into programming and have hit a speed bump so I am hoping someone out there can help me!

I have set up semi-transparent text boxes using 2 divs so the text does not become semi-transparent as well. The overflow is set to auto but when a scroll bar is triggered, the semi-transparency does not scroll. Only the size of the initial box is semi-transparent and after that the background is entirely transparent. How do I get the semi-transparency to scroll with the text?

Thanks!

[alt131]

Hi Whitney, and welcome to WebmasterWorld :)

I think there must be something else in your code affecting this as I can't reproduce the effect here. But, there are a number of ways to achieve "semi-transparency", and browser support varies.

Can you post a short code snippet and indicate the browsers versions causing troubles/that you need to support?

[Whitney914]

Hi alt! Thanks for getting back to me!
My CSS and HTML are as follows:


#textbox {
position:absolute;
width:850px;
height:480px;
top:55px;
left:50px;
padding:0px;
margins:0px;
border: 3px solid #000;
overflow:auto; }

.background {
background-color:#ffffff;
/* for IE */
filter:alpha(opacity=70);
/* CSS3 standard */
opacity:0.70;
width:100%;
height:100%;
position:absolute;
z-index:1; }

.content {
font-family: Garamond;
font-weight:bolder;
font-size:15px;
padding-left:20px;
padding-right:20px;
z-index:2;
position:relative; }


<div id="textbox">
<div class="background"> </div>
<div class="content"> <p> Some content goes here </p> </div> </div>


The problem I am having is as follows: the 850w by 450h box as defined in #textbox is properly opaque, but when the text exceeds the 450px and a scroll bar is triggered, the 850x450 box is opaque and then background below 450px becomes entirely transparent. I can't figure out how to get the opacity to fill the entire length of the box when scrolling is required.
I hope there is something easy I am missing here! Thank you so much!

[Whitney914]

Sorry, forgot to include -- I have been testing it with Firefox 4.0 and Safari 5.0.4 and I have this problem in both browsers.

[alt131]

Thanks for the code - I don't often get to play with transparency, and had so much fun, so I hope this helps and isn't OTT.

but when the text exceeds the 450px and a scroll bar is triggered, the 850x450 box is opaque and then background below 450px becomes entirely transparent.

On the provided code I'm not seeing complete transparency when div.content is taller than 480px, but there are several things relevant to the behaviour when the content is taller than 480px.

First, the transparency/opacity is set on div.background, but div.background is not containing div.content, so is not really providing a "background" for the content.
Second, div.background has height:100%. That means it takes div.background takes its height from its containing element - which is div#textbox. div#textbox has height:480px - which explains why the background transparency/opacity "ends" at 480px even when div.content is taller (adn does not div.background does not expand to contain taller content in div.content.

I am assuming the code has been designed using positioning because this is the common "fix" for opacity inheritance. However, as it causes troubles when the "content" element is taller, so if that was the only reason for positioning there is a way to avoid it.

The goal is to set div#textbox to scroll, apply the background transparency to div.background, and allow p.content to behave as a normal <p> would behave - which will force div.background to expand/contract depending on the amount of content. Start by reducing the html to this:

<div id="textbox">
<div id="textbox">
<div class="background">
<p class="content"> Fill me with words to force a scroll bar</p>
</div><!--end background-->
</div> <!--end textbox-->

Now, opacity isn't supported by <ie9, and is inherited by child elements and can't be reset for child elements in browsers that do understand it. As you are using proprietary filters for ie, you could use proprietary filters such as -moz-opacity which can be reset on child elements, but that creates additional code maintenance issues. This can be avoided by using rgba for the background rather than setting opacity on the element. rgba has been supported for some time, and background is not inherited.

Ignoring ie, the css could look like this (Note this test case is slightly different from your original code)

Tested and working as designed in ff3+, winsafari3+, op10+
#textbox {
position:absolute;
width:200px; /* smaller for test case */
height:200px;
top:55px;
left:50px;
border: 3px solid #000;
overflow-y:auto; /* more specific to stop a horizontal scroll bar */
overflow-x:hidden;/* needed or ie7 will provide a horizontal scroll anyway */
}

.background {
/*this is colour keyword fuchsia, with 0.4 transparency*/
background:rgba(255,0,255,0.4);
}

.content {
font-family: Garamond;
font-weight:bolder;
font-size:15px;
margin: 0 20px; /* some left and right margins to nicer visuals and allow for scroll bar*/
}

Now ie<9, which does not understand rgba or the opacity property, but does understand rgb and the proprietary filters. One option is to seperate the ie-only code using a conditional comment, but it can be included in the main css as it does not affect other browsers.

Works as designed in ie5.5-8 (with no affect on other browsers)
.background {
/*for ie - rgb must appear first so it is over-written by rgba for understanding browsers */
background-color:rgb(255,0,255); /*or background-color:fuchsia; */
filter:alpha(opacity=40); /* note you should require different filters for each ie version, but this seems to work for all */
/*filters only apply to elements with haslayout - zoom should not affect other browsers */
zoom:1;
/*for others*/
background:rgba(255,0,255,0.4);
}

.content {
font-family: Garamond;
font-weight:bolder;
font-size:15px;
margin: 0 20px; /* 20px to allow for scroll bar*/
/*to stop the ie filter being inherited in ie */
position:relative;
}

Note not tested in ie9, but if affected, use a conditional comment to send the code to older versions. Also, I suggest double-check your background colour/font colours to make sure the text remains readable without any transparency at all.

[Whitney914]

Thank you so so much for your help in all of this, and I am glad you are having fun in the process!

I changed the HTML and CSS as you recommended, which sort of fixed the problem but raised a new one -- now the opacity does not fill the entire 480px box. It only provides a background for the text, which is terrific when the scroll bar is required but looks terrible if the text is, for example, 200px long and there is 280px that is just transparent underneath it. Is there a way to get the opacity to fill the whole 480px plus the scrolling if/when it is triggered?

Thank you!

[Whitney914]

Ah! I sorted it out! I used the CSS code for .content as you wrote above and added the following:

height:480px; /* the same height as defined in #textbox */
overflow-y:auto;

Now the opacity is a full 480 and when necessary it fills the scroll!

Thank you so incredibly much for your help!

[alt131]

Hi whitney, good thinking, and I really hoped that's worked for you, but are you sure?
overflow-y should trigger a scroll bar on p.content when the content exceeds 480px tall - which means two scroll bars. Also, 480px means there is a permanent scroll bar on div#textbox even when the content is shorter - which was not part of your original design (and seems unsightly). Also, in my tests, it didn't force div.background to extend, so the background effect was lost anyway.

So I hope it's worked, but if subsequent testing shows it doesn't, I think you are completely right - height is the key. (I was having too much fun with the "expanding" part of the first code sample ... duh! )
But note you don't actually want a height - you just don't want div.background to ever be shorter that div#textbox - so you want a minimum height.

Setting min-height:100% on div.background will produce a scrollbar in Opera. If unacceptable, it's fixable, but probably easiest to use min-height:480px instead.

Note ie<6 doesn't understand min-height and needs height:100%, but that stops other browsers expanding div.background when the content exceeds 100% height of div#textbox. At this stage, probably easiest to use a conditional comment to serve the height to ie6 because that would create the opportunity to move all the ie(old)-specific code into conditional comments and keep your main css valid.

[edit]for clarification[/edit]