homepage Welcome to WebmasterWorld Guest from 54.211.201.65
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
Scroll bar will not scroll in fixed position box
but, the info in the box does.
JohnAlbu




msg:4297181
 9:49 pm on Apr 13, 2011 (gmt 0)

The code below represents just enought to simulate problem.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Needs scroll bar to work normally in middle box.</title>

<script type="text/javascript">
//<![CDATA[
function scrollimage() {
var d=0;
var x = 0;
var pageheight;
var imageh;
var theImg = document.getElementById('a');
imageh = theImg.height;
pageheight=document.documentElement.clientHeight;
d=(imageh - pageheight)/2;
for ( y=0; y <=d; y += d) {window.scroll(0,y);}
}
//]]>
</script>


<style type="text/css">
html{overflow:auto; } /*need for right scroll bar to show*/

body{
margin: 0;
padding: 0;
border: 0;
overflow: hidden;
height: 100%;
max-height: 100%;
background-color:#ffffff;
}


div.topbox{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
position: fixed;
width:300px;
height:24px;
top:10px;
left:12px;
padding:9px 0px 0px 0px;

background-color: #ffebbb;
border:1px solid black;
/* for IE */
filter:alpha(opacity=85);
/* CSS3 standard */
opacity:0.85;
}
div.topbox p
{
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
margin-top:0px;
margin-left:10px;
font-weight:bolder;

color:#000000
}






div.fixit
{
position:fixed;
left:12px;
top:55px;
bottom:55px; /* sets bottom up space*/
height:auto;
width:300px;
overflow:auto;
border:1px solid black;
background-color: #ffebbb;
scrollbar-base-color: #cbb173; /*only works in Internet Explorer not allowed by the W3C*/
/* for IE */
filter:alpha(opacity=85);
/* CSS3 standard */
opacity:0.6;

}

div.middlebox
{
position:absolute;
overflow:auto;
}






div.bottombox {
position:fixed;
left:12px;
height: 30px;
bottom:10px; /* sets bottom up space*/
width: 290px;
border:1px solid black;
background-color: #ffebbb;
/* for IE */
filter:alpha(opacity=85);
/* CSS3 standard */
opacity:0.85;
padding-left:10px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
line-height:2em;
font-weight:bolder;
}

</style>
</head>
<body>


<!--
<body onload="scrollimage();">

<img id="a" src="images/index1920.jpg" width="100%" alt="" />
-->

<center>
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />
1<br />1<br />1<br />1<br />1<br />1<br /> The javascript above will
scroll an image to its vertical center behind the
boxes.<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<
br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<
br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<br />1<
br />
</center>



<div class="topbox">
<p>Top Box</p>
</div>



<div class="fixit">
<div class="middlebox">
skdjfkjsd jsdk jsdklfj sdkldjf sjdfkl slkdjf skldj fsdj sdjk fklsdjf
sdjf klsjdfjs lkjdfklsd fkljsdklfj skl ddfkl skld fjskldjf klsjdfkl
sjdklfj skldjf ksdkl fklsdj fkl jskldjf sdffjf kslkdjf sjd klf
jskldjfkljs kldfjskld jfksdjfkljs dklfjskldfjklsdj fklsdfjlksdjfklsdj
fklsdklfjsdkljfklsdjdskdjfkjsd jsdk jsdklfj sdkldjf sjdfkl slkdjf
skldj fsdj sdjk fklsdjf sdjf klsjdfjs lkjdfklsd fkljsdklfj skl ddfkl
skld fjskldjf klsjdfkl sjdklfj skldjf ksdkl fklsdj fkl jskldjf sdffjf
kslkdjf sjd klf jskldjfkljs kldfjskld jfksdjfkljs dklfjskldfjklsdj
fklsdfjlksdjfklsdj fklsdklfjsdkljfklsdjdskdjfkjsd jsdk jsdklfj
sdkldjf sjdfkl slkdjf skldj fsdj sdjk fklsdjf sdjf klsjdfjs lkjdfklsd
fkljsdklfj skl ddfkl skld fjskldjf klsjdfkl sjdklfj skldjf ksdkl
fklsdj fkl jskldjf sdffjf kslkdjf sjd klf jskldjfkljs kldfjskld
jfksdjfkljs dklfjskldfjklsdj fklsdfjlksdjfklsdj
fklsdklfjsdkljfklsdjdskdjfkjsd jsdk jsdklfj sdkldjf sjdfkl slkdjf
skldj fsdj sdjk fklsdjf sdjf klsjdfjs lkjdfklsd fkljsdklfj skl ddfkl
skld fjskldjf klsjdfkl sjdklfj skldjf ksdkl fklsdj fkl jskldjf sdffjf
kslkdjf sjd klf jskldjfkljs kldfjskld jfksdjfkljs dklfjskldfjklsdj
fklsdfjlksdjfklsdj fklsdklfjsdkljfklsdjdskdjfkjsd jsdk jsdklfj
sdkldjf sjdfkl slkdjf skldj fsdj sdjk fklsdjf sdjf klsjdfjs lkjdfklsd
fkljsdklfj skl ddfkl skld fjskldjf klsjdfkl sjdklfj skldjf ksdkl
fklsdj fkl jskldjf sdffjf kslkdjf sjd klf jskldjfkljs kldfjskld
jfksdjfkljs dklfjskldfjklsdj fklsdfjlksdjfklsdj
fklsdklfjsdkljfklsdjdskdjfkjsd jsdk jsdklfj sdkldjf sjdfkl slkdjf
kldj fsdj sdjk fklsdjf sdjf klsjdfjs lkjdfklsd fkljsdklfj skl ddfkl
skld fjskldjf klsjdfkl sjdklfj skldjf ksdkl fklsdj fkl jskldjf sdffjf
kslkdjf sjd klf jskldjfkljs kldfjskld jfksdjfkljs dklfjskldfjklsdj
fklsdfjlksdjfklsdj fklsdklfjsdkljfklsdjdskdjfkjsd jsdk jsdklfj
sdkldjf sjdfkl slkdjf skldj fsdj sdjk fklsdjf sdjf klsjdfjs lkjdfklsd
fkljsdklfj skl ddfkl skld fjskldjf klsjdfkl sjdklfj skldjf ksdkl
fklsdj fkl jskldjf sdffjf kslkdjf sjd klf jskldjfkljs kldfjskld
jfksdjfkljs dklfjskldfjklsdj fklsdfjlksdjfklsdj fklsdklfjsdkljfklsdjd

</div> <!-- close of middle box -->
</div> <!-- close fixit -->



<div class="bottombox">
Bottom Box
</div>



</body>
</html>

[edited by: alt131 at 1:12 pm (utc) on Nov 27, 2011]
[edit reason] Side Scroll [/edit]

 

JohnAlbu




msg:4297705
 5:35 pm on Apr 14, 2011 (gmt 0)

I found the answer.

//filter:alpha(opacity=85);

filter: will not work in the combination with:

position:fixed;
overflow:auto;

Solution is to use a .png background-repeat for opacity.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved