joined:Aug 9, 2008
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:
<p class="content"> Fill me with words to force a scroll bar</p>
</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+
width:200px; /* smaller for test case */
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 */
/*this is colour keyword fuchsia, with 0.4 transparency*/
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)
/*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 */
margin: 0 20px; /* 20px to allow for scroll bar*/
/*to stop the ie filter being inherited in ie */
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.