Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

CSS Scroll:auto;

Posted on 2007-10-02
17
Medium Priority
?
376 Views
Last Modified: 2013-11-19
can someone point me in the right direction here.  http://dnd.07th.com/portfolio/

it seems that the scroll:atuo; on the .text class does not seem to work.  if you click on one of the headings you will see what I mean
0
Comment
Question by:kevp75
  • 8
  • 5
  • 2
  • +1
17 Comments
 
LVL 9

Expert Comment

by:joebednarz
ID: 20002350
Not sure what you are expecting the text to do....

Also, your "Menu" doesn't function properly in Opera... :)
0
 
LVL 5

Expert Comment

by:Synthetics
ID: 20002392
I see a #container .text { ... } with no overflow specification and #container { ...; overflow: auto; ... }

and also I don't see a problem, it seems to scroll fine for me
0
 
LVL 5

Expert Comment

by:Synthetics
ID: 20002405
ah right, just checked with IE (was using FF).

moral: never expect anything to work right with IE
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 25

Author Comment

by:kevp75
ID: 20002417
lol
0
 
LVL 25

Author Comment

by:kevp75
ID: 20002427
yeah, just tried adding the overflow:auto; to .text, and still does not produce
0
 
LVL 5

Expert Comment

by:Synthetics
ID: 20002429
have you tried forcing it with overflow-y: visible?
0
 
LVL 25

Author Comment

by:kevp75
ID: 20002443
@joebednarz

i think that is because of the z-index.....but honestly.  since only about 2+% of people use opera, i'm not that concerned about that, and will probably get around to fixing it at some other point in time
0
 
LVL 28

Accepted Solution

by:
TName earned 2000 total points
ID: 20002456
Do you want a scrollbar? If yes, then you should give .text a height also:

#container .text {
            padding:5px;
            position:relative;
            z-index:3;
overflow:auto;                /*  <---- here   */
height:445px;                   /*  <---- here   */
            }
0
 
LVL 25

Author Comment

by:kevp75
ID: 20002484
>>have you tried forcing it with overflow-y: visible?<<

I wasn't aware that even existed in CSS 2, in fact neither does W3C...hmm...

and no, nothing is different when I put it in
0
 
LVL 25

Author Comment

by:kevp75
ID: 20002516
that seems to have done the trick TName.  However, now I lose my formatted scroll bar.....
0
 
LVL 5

Expert Comment

by:Synthetics
ID: 20002529
IE doesn't allow for coloured scrollbars, and I don't think I've ever seen a hack for it.
0
 
LVL 9

Expert Comment

by:joebednarz
ID: 20002632
also tried it in FF and it seemed to work better.... understand how target effects effort though.  Nice look to the site by the way.  I think Synthetics comments are right on track...
0
 
LVL 5

Expert Comment

by:Synthetics
ID: 20002645
wait a moment, wrong way around. normally IE DOES allow coloured scrollbars and FF doesn't. have to look at code again...
0
 
LVL 25

Author Comment

by:kevp75
ID: 20002725
i have a bit of javascript that allowed me to change the scrollbar that was cross-browser friendly, and did work.

if I take out the height of that class it goes back to working, but then the portfolio fails again.

thanks joe :)
0
 
LVL 28

Assisted Solution

by:TName
TName earned 2000 total points
ID: 20002905
For the browser's default scrollbar: if you don't give .text a height, it will extend to hold it's content when you click on a heading, even if most of the div.text and it's content will be hidden inside container (beneath the visible part). And a container that is as high as it's content (like .text will be in this case), will not scroll - why should it...

I'm not sure if by "changed" scrollbar you mean simply a formatted real scrollbar or rather a scrollbar replacement - I would think you mean the latter. A custom scrollbar (which e.g would move .text inside of #container vertically using js) would of course require .text *not* to have a limited height - but I can't seem  to find a working scrollbar even without any changes applied to the page - is it the thin dotted double line?
0
 
LVL 25

Author Comment

by:kevp75
ID: 20003228
have a look at:
http://dnd.07th.com/contact/

you should see a lighter grey bar on the left side with an arrow image at the top and bottom

that is what the javascript does, but as you can see on the portfolio page, it goes back to no-scroll when the headings are expanded.

if you can come up with a solution great, if not, I will just have to make do with setting the height
0
 
LVL 25

Author Comment

by:kevp75
ID: 20011607
nevermind....i'm going with a different design.

thak y'all for your help
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

572 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question