CSS: Overflow [#8]

CSS: Overflow [#8]

Postby omoi » Wed Aug 01, 2007 9:42 am

Every now and again, when I code a website, I have information in a box. I want the box to be a certain size, but I have text that is bigger than the size of the box I made. For example, I have a 400px height box with 1000px height's worth of text. If I specify the height of the box like this:

Code: Select all
#box{height:400px;}


the text will simple bleed out of the box for the next 600px without batting an eyelash. How terrible! I don't want the box to be 1000px tall; my design may depend on the box being exactly 400px tall. What a dilemma!

Or is it?

CSS comes to the rescue with the overflow property. This property is used to control what happens to text or whatever else is bigger than the boundaries you have setup for the text (or whatever) container. The overflow property has three settings:

hidden

scroll

auto


hidden simply truncates (that means "to cut off abruptly") the text at the end of the boundary. There is no way to see the remaining text after that point because this feature does not permit scrolling.

scroll makes scrollbars appear both horizontally and vertically whether you need them or not. As such, I don't use this property as often because I don't want people to see scrollbars they don't actually use or need. How do I fix that problem?

auto lets CSS handle the scrollbars that appear. If only a horizontal scrollbar is needed, then only a horizontal scrollbar appears. If only vertical, then only a vertical scrollbar appears. Of course, if the text doesn't fill in the entire space, then the scrollbars don't appear at all. It's very nice to use and I use it often.

Can I make scrollbars invisible, but still scroll?


Unless you are supremely skilled at coloring, there isn't a way to make them actually invisible. You can color the scrollbars the same color as the background and that might give the illusion of invisibility. You can also make custom scrollbars by playing around with the scrollbar properties. These will only render in IE, though, and they aren't standard, so it's best to leave them alone as other browsers will only see normal scrollbars and your CSS won't validate whatsoever.

Have fun playing with that property, kids.
Image

Read the rules.
Check this topic and make your suggestions known!
This is how we make suggestions.
User avatar
omoi
Moderator Team
Moderator Team
 
Posts: 1076
Joined: Wed May 23, 2007 8:31 pm

Re: CSS: Overflow [#8]

Postby super3boy » Wed Aug 01, 2007 5:31 pm

Thanks. I always have problems fixing overflow.
Image
Image
Image
Image
User avatar
super3boy
Site Admin
Site Admin
 
Posts: 4945
Joined: Sun May 20, 2007 3:57 pm
Location: Atlanta, GA

Re: CSS: Overflow [#8]

Postby Roswell » Tue Sep 04, 2007 10:52 pm

IE doesn't fully support this anyway.
Roswell
Moderator Team
Moderator Team
 
Posts: 2631
Joined: Thu Jul 05, 2007 5:06 pm

Re: CSS: Overflow [#8]

Postby omoi » Wed Sep 05, 2007 6:35 am

Why does anyone use IE? *sigh*

That's true. I'm not even going to get into CSS 3 features (not that I know the full extent of support of those features for any browser, but in the time I've used it [FEW] firefox supports more)
Image

Read the rules.
Check this topic and make your suggestions known!
This is how we make suggestions.
User avatar
omoi
Moderator Team
Moderator Team
 
Posts: 1076
Joined: Wed May 23, 2007 8:31 pm

Re: CSS: Overflow [#8]

Postby super3boy » Wed Sep 05, 2007 6:02 pm

What are the people at freaking Microsoft doing about this? They have the best programmers in the world, but still they can't make IE6 meet web standards.
Image
Image
Image
Image
User avatar
super3boy
Site Admin
Site Admin
 
Posts: 4945
Joined: Sun May 20, 2007 3:57 pm
Location: Atlanta, GA

Re: CSS: Overflow [#8]

Postby Brent » Wed Sep 05, 2007 6:06 pm

super3boy wrote:What are the people at freaking Microsoft doing about this? They have the best programmers in the world, but still they can't make IE6 meet web standards.

They don't have me. :D
Image
User avatar
Brent
Premium Member
Premium Member
 
Posts: 1821
Joined: Wed May 23, 2007 8:38 pm
Location: AZ, USA

Re: CSS: Overflow [#8]

Postby super3boy » Wed Sep 05, 2007 6:41 pm

LOL. You are an amazing desktop programmer. Decided on what you are going to do for a living?
Image
Image
Image
Image
User avatar
super3boy
Site Admin
Site Admin
 
Posts: 4945
Joined: Sun May 20, 2007 3:57 pm
Location: Atlanta, GA

Re: CSS: Overflow [#8]

Postby Brent » Wed Sep 05, 2007 6:52 pm

super3boy wrote:LOL. You are an amazing desktop programmer. Decided on what you are going to do for a living?

Not yet, I still have to graduate from high school and go to college.
Image
User avatar
Brent
Premium Member
Premium Member
 
Posts: 1821
Joined: Wed May 23, 2007 8:38 pm
Location: AZ, USA

Re: CSS: Overflow [#8]

Postby super3boy » Wed Sep 05, 2007 7:13 pm

Ok. You should go into application programming.
Image
Image
Image
Image
User avatar
super3boy
Site Admin
Site Admin
 
Posts: 4945
Joined: Sun May 20, 2007 3:57 pm
Location: Atlanta, GA

Re: CSS: Overflow [#8]

Postby omoi » Wed Sep 05, 2007 9:48 pm

Computer-Geek wrote:
super3boy wrote:LOL. You are an amazing desktop programmer. Decided on what you are going to do for a living?

Not yet, I still have to graduate from high school and go to college.


No, not really. Most of the people that we think are the coolest programmers in the world did neither. Nor did Bill Gates.
Image

Read the rules.
Check this topic and make your suggestions known!
This is how we make suggestions.
User avatar
omoi
Moderator Team
Moderator Team
 
Posts: 1076
Joined: Wed May 23, 2007 8:31 pm

Next

Return to CSS

Who is online

Users browsing this forum: No registered users and 1 guest

cron