Date: 03/31/06 (WebDesign)    Keywords: browser

I have a question regarding the overflow: inherit property. I'm hoping I explain myself correctly..


When I use an image for the background of div, such as this:

#content {position: absolute;
left: 200px;
top: 162px;
width: 600px;
height: 438px;
background: url(images/content.png);}

and I use a div class for the actual content such as this:

.contentbox {position: relative;
left: 170px;
top: 5px;
width: 400px;
overflow: inherit;
margin: 0.5em;
padding: 0px 0px 10px 0px;
line-height: 16px;}

I use the inherit property to display text in my < div class="contentbox"> when its height is more than that of the background image in < div id="content">. I had to do some playing around with this because I had never dealt with the situation before. I noticed that if my .contentbox was positioned with absolute, it wouldn't work. So, I changed to relative positioning and it works. In IE.

My question is.. is there a better way to go about doing this? If not, how would you get the same effect in other browsers? I'm only able to check on Firefox and I know it doesn't work there. Not sure about any other browsers.

I hope that's clear enough. Sincerely appreciate any input/suggestions.

Source: http://community.livejournal.com/webdesign/1089445.html