How do I keep text over image when page is zoomed?

[wkenny]

I have the following:

HTML


<div class="content">
<div class="textbg">
<img src="bg400x400.jpg" width="600px" height="990px">
<div class="textinbox">
<!-- text goes here -->


and the CSS



.content
{
float: left;
width: 60%;
padding-left: 0.5%;
}
.textbg {
position: relative;
width: 100%;
padding-left:10px;
}
.textinbox {
position: absolute;
top: 20px;
left: 20;
width: 90%;
padding-left:30px;
padding-top:10px;
}



If I zoom in or out, the text overflows the image container. How can I force the text to always stay inside the image div?

[itivae]

I would say your problem involves your use of absolute positioning in
.textinbox. Do you have a link to the page? Also are you sure that the
</div> tags are properly nested?

[wkenny]

Page is at:
proweb4u.com/test.shtml

If I don't use position absolute, the text displays below the image

[itivae]

Try this

change your .textbg { width:600px;}
then adjust your padding to center in your .textinbox

Looks good to me in Firefox and Opera.

[wkenny]

Brilliant - that does the trick. Thanks a bunch. :)

[Butterfly]

I'm glad it works. You could also try using z-index properties and set the text a higher z-index than the image.

Example:


text { z-index: 100; }
image { z-index: 99; }