PDA

View Full Version : css scrollbar not working with div layers?

emeraldice
04-23-2004, 10:35 PM
http://fyoras.clawz.com/main.html

i thought it was doing good until i added another entry to the div and there should be stuff underneath it, but the scrollbar isnt working.. is this something to do with the css for the scrollbar or the div?

thanks...
emeraldice
04-23-2004, 10:36 PM
whoops sry pushed the wrong button.. anyway my site...

http://fyoras.clawz.com/main.html

i thought it was doing good until i added another entry to the div and there should be stuff underneath it, but the scrollbar isnt working.. is this something to do with the css for the scrollbar or the div?

thanks...
kittycat
04-23-2004, 11:00 PM
overflow:auto needs to go inside the style="" bit, you currently have it outside. Your style bit for that div should look like:
style="position: relative; left: 50%; top: 60%; width: 340px; z-index:1; overflow: auto"
Calidris
04-23-2004, 11:39 PM
Your site "works" in Firefox, just not IE.

In your stylesheet you have this line:
background-image: url(http://fyoras.clawz.com/new main.gif);

Any CSS values you assign that have spaces in them must be enclosed in quotes like this:
background-image: url("http://fyoras.clawz.com/new main.gif");

PS - It's not really normal to put spaces in file names on the internet.
emeraldice
04-24-2004, 01:14 PM
but for overflow:auto isnt that to make it scroll with just the div layer? i want the div to just get bigger with all the text n the whole page to scroll, is that possible?
Calidris
04-24-2004, 02:47 PM
Change it to this:
overflow: visible; :)
emeraldice
04-24-2004, 03:00 PM
its not working :( i got all excited when you helped me with the positioning n i thought it was like free-sailing from there but no000o i have to get another stupid problem.. webbies dont like me :(

thanks though.. any other ideas?
jonathantan86
04-25-2004, 11:46 AM
It's very difficult to make a normal scrolling page with absolute positioning (if that's what you intended). Maybe you could try a style="float: right; margin-right: 20px;" and remove the overflow and position attributes on your content DIV and then modify the margin-right attribute to suit your tastes.
emeraldice
04-25-2004, 03:42 PM
kk now i set a height for the div and i'm just gonna make it scroll now, but

http://fyoras.clawz.com/main.html

don't mind that thing in the middle i'll fix that later,
but now the main div on the right isnt scrolling and the stuff thats supposed to be at the bottom of that div is showing up like on the sides n all...

can you find a problem in the code? i've checked it and i dont really see anything wrong, but that might be because i'm putting all the code in greymatter and then it does its own thing n all...

but what i can fix is this.. thats all i do, and then it adds some other crap...




<head>
<title>][· f y o r a ' s · h e l p e r s ·][</title>

<style type="text/css">

A:link
{ text-decoration: none; color:#D789F8; }
A:visited
{ text-decoration: line-through; color:#D789F8; }
A:active
{ text-decoration: blink; color:#FFFFFF; }
A:hover
{ text-decoration: underline overline; color:#D5ADF7;

cursor: crosshair;}

h1 {font-family: trebuchet MS;
color: #000000;}

p {font-family: trebuchet MS;
color: #000000; }

body
{ background: #FFFFFF;
background-image: url("http://fyoras.clawz.com/new main.gif");
background-repeat: no-repeat;
background-position: 50% 0%;

direction:rtl;

scrollbar-face-color : #D5ADF7;
scrollbar-highlight-color : #FFFFFF;
scrollbar-3dlight-color : #FFFFFF;
scrollbar-shadow-color : #FFFFFF;
scrollbar-darkshadow-color : #D5ADF7;
scrollbar-track-color : none;
scrollbar-arrow-color : #FFFFFF;


font-family: trebuchet MS;
color: #000000;
letter-spacing:0;
font-weight: normal;
font-size: 8pt;

margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
padding-top: 0;
padding-bottom: 0;
padding-left: 0;
padding-right: 0;
}

td
{ font-family: trebuchet MS;
color: #000000;
padding-left: 0cm;
padding-right: 0cm;
padding-top: 0cm;
padding-bottom: 0cm;
padding: 0cm;
padding: 0cm 0cm; }

</style>
</head>

<body>
<div style="direction:ltr">

<center>
<div id=copy1 style="margin-top:-15px; position: relative; top: 100%; width: 500px; z-index:2;">
<text align=center><center>NEOPETS, characters, logos, names and all related indicia<br>
are trademarks of <a href='http://neopets.com/aboutus.phtml'>Neopets, Inc.,</a> |AMP|copy; 1999-2004.<br>|AMP|reg; denotes Reg. US Pat. & TM Office.
All rights reserved.</center></div></center>

<div id=menu style="position: relative; left: 15%; top: 108%; width: 220px; z-index:4; overflow:visible;">
who00o yeh wo00o menu yehh yeh alrightt</div>

<div id=log style="position: relative; left: 48%; top: 55%; width: 400px; height: 800px; z-index:1; overflow:auto; scrollbar-face-color : #D5ADF7; scrollbar-highlight-color : #000000; scrollbar-3dlight-color : #000000; scrollbar-shadow-color : #000000; scrollbar-darkshadow-color : #000000; scrollbar-track-color : #000000; scrollbar-arrow-color : #000000;">
{{logbody}}</div>


</div>
</body>