Log in

View Full Version : Resolved Scrollable Div Not Working


Abbster22
12-30-2009, 04:46 AM
I made a background using Photoshop and saved it as a PNG file (which is supposed to make it transparent. Everything works fine in Firefox, but when I try using it in Safari and IE8, different issues occur with each browser. In Safari and IE8, the scrollbar goes behind my image (the text background) that I have. The other issue is in IE8, it also doesn't show the transparency that it does in the other two browsers. Let me know what's going on please... I appreciate it!

Here's the HTML that I have:

<img src="images/textbackground.png" id="textbg" class="displayed"></img>
<div id="content" class="displayed">
<p>blah</p>
</div>

Here's the CSS that I have:

#textbg {
width: 850px;
height: 375px;
z-index: 3;
/*margin-left: auto;
margin-right: auto;
display: block;*/
margin-bottom: -340px;
}

.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}


#content {
height: 275px;
width: 550px;
margin-left: auto;
margin-right: auto;
border: none;
overflow: auto;
z-index: 8;
}

If you need anything else to help provide you an idea of what I want, please let me know. Thank you very much!
tpravioti
01-08-2010, 11:32 AM
try this if you want:


<html>
<head>

<style>
#textbg {
width: 850px;
height: 375px;
z-index: 3;
/*margin-left: auto;
margin-right: auto;
display: block;*/
margin-bottom: -340px;
}

.displayed {
display: block;
margin-left: auto;
margin-right: auto;
border:1px solid black;

background-image:url('images/textbackground.png');
}


#content {
height: 275px;
width: 550px;
margin-left: auto;
margin-right: auto;
border: none;
overflow: auto;
z-index: 8;
}
</style>
</head>

<body>
<!--<img src="images/textbackground.png" id="textbg" class="displayed"></img>-->
<div id="content" class="displayed">
<p><b>blah blah blah blah blah blah blah blah blah blahblahblahblah blah blahblah blah blahblahblah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blahblahblahblah blah blahblah blah blahblahblah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blahblahblahblah blah blahblah blah blahblahblah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blahblahblahblah blah blahblah blah blahblahblah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blahblahblahblah blah blahblah blah blahblahblah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blahblahblahblah blah blahblah blah blahblahblah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blahblahblahblah blah blahblah blah blahblahblah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blahblahblahblah blah blahblah blah blahblahblah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blahblahblahblah blah blahblah blah blahblahblah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blahblahblahblah blah blahblah blah blahblahblah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blahblahblahblah blah blahblah blah blahblahblah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blahblahblahblah blah blahblah blah blahblahblah blah blah
blah blah blah blah blah blah blah blah blah blah blah blah blahblahblahblah blah blahblah blah blahblahblah blah blah
blah blah blah</b></p>
</div>

</body>
</html>
Abbster22
01-08-2010, 05:18 PM
Thank you! I found it very useful and will use it.