I am following an example in a book for using the overflow property to scroll through some info contained within a box. After writing out the following code it is not working. I am using Safari. There are no scroll bars just the groove on the right side where the scroll bar should be sliding through. Any ideas of how to fix this problem?
#list {background:#bedfc4; color:white; padding: 5px; margin-left: 5px; margin-top: 7px; font-size: 10px; width: 150px;}
#list h3 {margin: 0; color:#000000;}
.projects {width: 150px; height: 40px; overflow: auto;}
<div id="list">
<h3>Projects</h3>
<p class="projects">
The Deal <br />
The Weather Man <br />
Saw <br />
Into the Blue <br />
Hoosiers <br />
SI Model Search <br />
</p></div>
Thanks a lot.Taking a stab here--
I wouldn't do this as a paragraph. Why not give a div the class=projects. I believe that should solve your problem. This will give you a nested div that has a scroll bar. The nested div should appear beneath your <h3>Projects</h3>.Thanks but that did not work for me. The entire contents div of my page followed the dimensions of the box. Any other suggestions anyone?so, this doesn't fix it?
<div id="list">
<h3>Projects</h3>
<div class=projects>
The Deal <br />
The Weather Man <br />
Saw <br />
Into the Blue <br />
Hoosiers <br />
SI Model Search <br />
</div></div>Here is my code:
#list {background:#bedfc4; color:white; padding: 5px; margin-left: 5px; margin-top: 7px; font-size: 10px; width: 150px; float: right;}
#list h3 {margin: 0; color:#000000;}
.projects {width: 150px; height: 40px; overflow: auto;}
<div id="list">
<h3>Projects</h3>
<div class=projects>
The Deal <br />
The Weather Man <br />
Saw <br />
Into the Blue <br />
Hoosiers <br />
SI Model Search <br />
</div></div>
It still does not work. No scroll bars. Let me know if you see what I am doing wrong. Thanks.I don't know--
I copied exactly what you've got there and I get scrollbars in FF but not in Safari.
html file
<html>
<head>
<title>tester</title>
<LINK REL=STYLESHEET TYPE="text/css" HREF=http://www.webdeveloper.com/forum/archive/index.php/"style.css">
</head>
<body>
<div id="list">
<h3>Projects</h3>
<div class=projects>
The Deal <br />
The Weather Man <br />
Saw <br />
Into the Blue <br />
Hoosiers <br />
SI Model Search <br />
</div></div>
</body>
</html>
css file
#list {background:#bedfc4; color:white; padding: 5px; margin-left: 5px; margin-top: 7px; font-size: 10px; width: 150px; float: right;}
#list h3 {margin: 0; color:#000000;}
.projects {width: 150px; height: 40px; overflow: auto;}
But, when I changed the .projects height to 60px I get scrollbars in Safari. Maybe there is a min-height bug in Safari for scrollbars.
Anybody else run across this?That worked for some reason. I set the height to 60px and I now have a scrollbar. Thanks a lot for your help. If anyone knows why that woked then drop us a note.
#list {background:#bedfc4; color:white; padding: 5px; margin-left: 5px; margin-top: 7px; font-size: 10px; width: 150px;}
#list h3 {margin: 0; color:#000000;}
.projects {width: 150px; height: 40px; overflow: auto;}
<div id="list">
<h3>Projects</h3>
<p class="projects">
The Deal <br />
The Weather Man <br />
Saw <br />
Into the Blue <br />
Hoosiers <br />
SI Model Search <br />
</p></div>
Thanks a lot.Taking a stab here--
I wouldn't do this as a paragraph. Why not give a div the class=projects. I believe that should solve your problem. This will give you a nested div that has a scroll bar. The nested div should appear beneath your <h3>Projects</h3>.Thanks but that did not work for me. The entire contents div of my page followed the dimensions of the box. Any other suggestions anyone?so, this doesn't fix it?
<div id="list">
<h3>Projects</h3>
<div class=projects>
The Deal <br />
The Weather Man <br />
Saw <br />
Into the Blue <br />
Hoosiers <br />
SI Model Search <br />
</div></div>Here is my code:
#list {background:#bedfc4; color:white; padding: 5px; margin-left: 5px; margin-top: 7px; font-size: 10px; width: 150px; float: right;}
#list h3 {margin: 0; color:#000000;}
.projects {width: 150px; height: 40px; overflow: auto;}
<div id="list">
<h3>Projects</h3>
<div class=projects>
The Deal <br />
The Weather Man <br />
Saw <br />
Into the Blue <br />
Hoosiers <br />
SI Model Search <br />
</div></div>
It still does not work. No scroll bars. Let me know if you see what I am doing wrong. Thanks.I don't know--
I copied exactly what you've got there and I get scrollbars in FF but not in Safari.
html file
<html>
<head>
<title>tester</title>
<LINK REL=STYLESHEET TYPE="text/css" HREF=http://www.webdeveloper.com/forum/archive/index.php/"style.css">
</head>
<body>
<div id="list">
<h3>Projects</h3>
<div class=projects>
The Deal <br />
The Weather Man <br />
Saw <br />
Into the Blue <br />
Hoosiers <br />
SI Model Search <br />
</div></div>
</body>
</html>
css file
#list {background:#bedfc4; color:white; padding: 5px; margin-left: 5px; margin-top: 7px; font-size: 10px; width: 150px; float: right;}
#list h3 {margin: 0; color:#000000;}
.projects {width: 150px; height: 40px; overflow: auto;}
But, when I changed the .projects height to 60px I get scrollbars in Safari. Maybe there is a min-height bug in Safari for scrollbars.
Anybody else run across this?That worked for some reason. I set the height to 60px and I now have a scrollbar. Thanks a lot for your help. If anyone knows why that woked then drop us a note.