/    Sign up×
Community /Pin to ProfileBookmark

No scrollbars are appearing. Why not?

Copy linkTweet thisAlerts:
Mar 04.2005

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.

to post a comment
CSS

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@ffurnaiMar 04.2005 — 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>.
Copy linkTweet thisAlerts:
@asmythauthorMar 04.2005 — 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?
Copy linkTweet thisAlerts:
@ffurnaiMar 04.2005 — 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>
Copy linkTweet thisAlerts:
@asmythauthorMar 04.2005 — 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.
Copy linkTweet thisAlerts:
@ffurnaiMar 04.2005 — 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="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?
Copy linkTweet thisAlerts:
@asmythauthorMar 04.2005 — 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.
×

Success!

Help @asmyth spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...