Code: Select all
opacity: .50;
filter: alpha(opacity=50);This in itself works, however since one of the divs must have an 'absolute' position on the other div (in order to get them to overlap), the window will not expand with content (only the background div). I tried setting the background div to absolute and the content to relative but without success as well. Hopefully someone with some expert experience could show me a new trick
Code: Select all
<div id="rightnav">
<!-- News area -->
<div id="news">
<!-- Opacity 1 is applied here to make sure the title stays fully opaque -->
<div style="background-color:#104E8B; border-bottom:1px solid #2F2F4F; background:url('stuff/bar1x30.gif'); color:#0000FF;"><b>News Story Title <img src="stuff/minus.gif" height="13"></b></div>
<!-- Opacity is applied here, this is the background, when it's setup like this the background color doesn't show up at all -->
<div id="newscontent" style="position:absolute;top:0px;">
<br>
<br>
<br>
</div>
<!-- Parent window extends, however, no background is applied at all (perfectly transparent) -->
<div id="otherstuff" style="top:0px; background:transparent;">
Content Goes here<br>
More stuff goes here
</div>
</div>
<div id="news">
<!-- Opacity 1 is applied here to make sure the title stays fully opaque -->
<div style="background-color:#104E8B; border-bottom:1px solid #2F2F4F; background:url('stuff/bar1x30.gif'); color:#0000FF;"><b>Greys land on Earth</b></div>
<!-- This window determines size of parent window, but it's not the one I want (I want otherstuff to extend it as above) opacity is applied correctly however (text is full, background is 0.5) -->
<div id="newscontent">
<br>
<br>
</div>
<!-- Opacity is applied here, this is the background, will not extend the border of "news" -->
<div id="otherstuff" style="position:absolute;top:0px;margin-top:15px;">
Other <a href="#">important</a> stuff.
<br>
<br>
</div>
</div>
<div id="news">
<div style="background-color:#104E8B; border-bottom:1px solid #2F2F4F; background:url('stuff/bar1x30.gif'); color:#0000FF;"><b>Cows strike central earth city</b></div>
<!-- Parent window extends properly, but text is opaque as well :( -->
<div id="newscontent" style="top:0px; width:100%">
Other <a href="#">important</a> stuff.
<br>
<br>
</div>
</div>