CSS: overflow: hidden?

[jasonchan]

what does overflow hidden really do? I thought it was used so that if content extended to a certain degree, a scroll bar would be available.

as i was reading a site's source code, i ran upon this.


<div id="header">
<h1 id="logo"><span>&nbsp;</span>Name</h1>
</div>



#logo {
position: relative;
width: 511px;
height: 196px;
margin: 0 0 0 -40px;
padding: 10px 0 0 0;
overflow: hidden; /* whats to point of this ? */
font-size: 135%;
color: #000;
}

#logo span {
position: absolute;
width: 100%;
height: 100%;
background: url(images/header-photo.jpg) no-repeat 0 0;
}


Questions:
1. why did he use span to set the background and not #logo?
2. why do you need to set position: absolute in the logo span?
is that even necessary?
3. what does the overflow: hidden do?
(i played around with it and its not used to hide the text, the color set to #000 does that trick... which makes me wonder.. and bug me...)

any idea guys?

[Drazan]

Overflow hidden is clipping the content without the scroll bars. I've used it on a site to "hide" an image to just it's corner then on mouse over expand the div to full size to view the image. There's other applications for hidden.

The span is showing the image, and the absolute positioning allows it to not be nested in another div set.

Some like to have the css positioning and styling in seperate classes to better manipulate the content on screen.

[Drazan]

Here's the overflow tag explained.
http://www.w3schools.com/css/pr_pos_overflow.asp

[Patrick Shannon]

There's a minor alternative use for overflow:hidden that I tend to use. On CSS <ul>/<li> menus where you use text-indent: -9999px to hide the text off the page (typically to remain accessible when you want image menus or whatever), it can leave behind a very long grey border in some browsers when clicked on. I used overflow:hidden to get rid of this.

[jasonchan]

There's a minor alternative use for overflow:hidden that I tend to use. On CSS <ul>/<li> menus where you use text-indent: -9999px to hide the text off the page (typically to remain accessible when you want image menus or whatever), it can leave behind a very long grey border in some browsers when clicked on. I used overflow:hidden to get rid of this.

I have realize that there are grey borders patrick. Would both properties, overflow and text indent needed in this example, or just overflow: hidden?


<div id="nav">

<ul>
<li><a href="index.html" id="home_active">home</a></li>
<li><a href="company.html" id="company">company</a></li>
<li><a href="services.html" id="services">services</a></li>
<li><a href="references.html" id="references">references</a></li>
<li><a href="contact.html" id="contact">contact us</a></li>
<li><a href="free_quote.html" id="free_quote">free quote</a></li>
</ul>

</div> <!-- end of nav -->


#nav ul li a {
text-indent: -3000px;
overflow: hidden;
display: block;
height: 51px;
}
#home {
width: 97px;
background: url(images/tab-home.gif);
}

[jasonchan]

Overflow hidden is clipping the content without the scroll bars. I've used it on a site to "hide" an image to just it's corner then on mouse over expand the div to full size to view the image. There's other applications for hidden.

The span is showing the image, and the absolute positioning allows it to not be nested in another div set.

Some like to have the css positioning and styling in seperate classes to better manipulate the content on screen.

okay drazan, i understand the purpose of overflow: hidden but why did this person use it? i mean the image is still showing... it is surely not used to hide the text.

[Patrick Shannon]

I have realize that there are grey borders patrick. Would both properties, overflow and text indent needed in this example, or just overflow: hidden?


<div id="nav">

<ul>
<li><a href="index.html" id="home_active">home</a></li>
<li><a href="company.html" id="company">company</a></li>
<li><a href="services.html" id="services">services</a></li>
<li><a href="references.html" id="references">references</a></li>
<li><a href="contact.html" id="contact">contact us</a></li>
<li><a href="free_quote.html" id="free_quote">free quote</a></li>
</ul>

</div> <!-- end of nav -->


#nav ul li a {
text-indent: -3000px;
overflow: hidden;
display: block;
height: 51px;
}
#home {
width: 97px;
background: url(images/tab-home.gif);
}



Well, you would still need the text-indent regardless in order to "hide" the text (without "really" hiding the text), overflow:hidden just removes that stretches across the page when clicked. Of course that border is a result of the text being stretched wwaaaaaaaaay off the page, but overflow readjusts that "click-border."

[jasonchan]

ic okay .. thanks for that tip. learned something useful today!