[WSG] the mysteries of overflow: hidden
(I'm a list lurker. Also, apologies if this has been covered before.) In CSS, setting a div to overflow: hidden solves a problem it shouldn't--at least from the name of the property and value, it seems like it shouldn't. Often I'll have text, e.g. an h1, overflowing its containing/parent div, but setting the containing/parent div to overflow: hidden causes the parent div to set its height in a way that the formerly overflowing text no longer overflows. I've seen this happen for years. Another developer showed me this fix years ago. But over the years, I've never read an explanation why overflow: hidden fixes a problem its name implies it wouldn't. Have others seen this? Any explanations? -jody *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] the mysteries of overflow: hidden
If I understand correctly, you're suggesting that that overflow:hidden doesn't hide overflow? My own use of overflow:hidden has only been in conjunction with a stated height. In this case overflow:hidden hides anything that goes beyond the stated height of the element the rule has been attached to. Joseph R. B. Taylor /Web Designer / Developer/ -- Sites by Joe, LLC /Clean, Simple and Elegant Web Design/ Phone: (609) 335-3076 Web: http://sitesbyjoe.com Email: j...@sitesbyjoe.com On 2/10/10 1:50 PM, Jody Tate wrote: (I'm a list lurker. Also, apologies if this has been covered before.) In CSS, setting a div to overflow: hidden solves a problem it shouldn't--at least from the name of the property and value, it seems like it shouldn't. Often I'll have text, e.g. an h1, overflowing its containing/parent div, but setting the containing/parent div to overflow: hidden causes the parent div to set its height in a way that the formerly overflowing text no longer overflows. I've seen this happen for years. Another developer showed me this fix years ago. But over the years, I've never read an explanation why overflow: hidden fixes a problem its name implies it wouldn't. Have others seen this? Any explanations? -jody *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] the mysteries of overflow: hidden
I'm not sure I understand what you're asking. Could you put together a quick example to illustrate. Basically what overflow: hidden does is anything that doesn't fit into it's given container is hidden, basically meaning that it doesn't affect the height of it's container. This only works if the parent has a height set. If it doesn't, overflow: hidden has absolutely no effect. Here is an example: http://www.arwebdesign.net/test2.html In the first one, the container has a static height (500px) and no overflow. The text just streams right out of the container. In the second one, the container still has a static height, but has overflow: hidden. This time, the text just disappears. In the third one, the container has no height set, but has overflow: hidden. This time, the container's height stretches to accommodate it's contents. In the fourth one, the container has no height set and has no overflow. This functions exactly the same as the third. Overflow hidden had no effect on the third one without a height being set. Hope that clarifies overflow: hidden a bit. - Christian On 2/10/2010 1:50 PM, Jody Tate wrote: (I'm a list lurker. Also, apologies if this has been covered before.) In CSS, setting a div to overflow: hidden solves a problem it shouldn't--at least from the name of the property and value, it seems like it shouldn't. Often I'll have text, e.g. an h1, overflowing its containing/parent div, but setting the containing/parent div to overflow: hidden causes the parent div to set its height in a way that the formerly overflowing text no longer overflows. I've seen this happen for years. Another developer showed me this fix years ago. But over the years, I've never read an explanation why overflow: hidden fixes a problem its name implies it wouldn't. Have others seen this? Any explanations? -jody *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** -- Christian Snodgrass CEO - Azure Ronin http://www.arwebdesign.net http://www.htmlblox.com Phone: 859.816.7955 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] the mysteries of overflow: hidden
fuck off sendin me shit _ We want to hear all your funny, exciting and crazy Hotmail stories. Tell us now http://clk.atdmt.com/UKM/go/195013117/direct/01/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] the mysteries of overflow: hidden - ADMIN
My apologies all. This charming individual has been removed from the list. No need to comment on this and add unwanted noise to the list... As you were. Thanks russ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] the mysteries of overflow: hidden
Apparently he is talking about overflow:hidden as a clearing floats fix. ( http://www.quirksmode.org/css/clearing.html) Let me reformulate the question: why the property that serves for hiding smth just make the wrapper stretch to accomodate containing floats. As for me - i still consider this magic. May be W3C got smth on this topic. Yuriy akella Artyukh, http://cssing.org.ua On Wed, Feb 10, 2010 at 9:32 PM, Christian Snodgrass csnodgrass3...@gmail.com wrote: I'm not sure I understand what you're asking. Could you put together a quick example to illustrate. Basically what overflow: hidden does is anything that doesn't fit into it's given container is hidden, basically meaning that it doesn't affect the height of it's container. This only works if the parent has a height set. If it doesn't, overflow: hidden has absolutely no effect. Here is an example: http://www.arwebdesign.net/test2.html In the first one, the container has a static height (500px) and no overflow. The text just streams right out of the container. In the second one, the container still has a static height, but has overflow: hidden. This time, the text just disappears. In the third one, the container has no height set, but has overflow: hidden. This time, the container's height stretches to accommodate it's contents. In the fourth one, the container has no height set and has no overflow. This functions exactly the same as the third. Overflow hidden had no effect on the third one without a height being set. Hope that clarifies overflow: hidden a bit. - Christian On 2/10/2010 1:50 PM, Jody Tate wrote: (I'm a list lurker. Also, apologies if this has been covered before.) In CSS, setting a div to overflow: hidden solves a problem it shouldn't--at least from the name of the property and value, it seems like it shouldn't. Often I'll have text, e.g. an h1, overflowing its containing/parent div, but setting the containing/parent div to overflow: hidden causes the parent div to set its height in a way that the formerly overflowing text no longer overflows. I've seen this happen for years. Another developer showed me this fix years ago. But over the years, I've never read an explanation why overflow: hidden fixes a problem its name implies it wouldn't. Have others seen this? Any explanations? -jody *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** -- Christian Snodgrass CEO - Azure Ronin http://www.arwebdesign.net http://www.htmlblox.com Phone: 859.816.7955 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] the mysteries of overflow: hidden
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Jody Tate Sent: Wednesday, February 10, 2010 2:05 PM To: wsg@webstandardsgroup.org Subject: Re: [WSG] the mysteries of overflow: hidden Exactly. The magic confounds me. http://staff.washington.edu/jtate/overflow.html (I threw together the above example quickly. (Yes, embedded styles are a no-non, but it was easy to do in this situation.) What overflow does is that it creates a block formatting context. Any value besides visible will work. I wrote something about containing floats without structural markup [1]. Check the demo page [2] to see how various techniques work and how triggering hasLayout is very similar to creating a block formatting context. This technique can even be used as a tool to create robust layouts [3]. [1] http://tjkdesign.com/articles/clearing-floats_and_block-formatting_context.a sp [2] http://tjkdesign.com/articles/block-formatting_context/newBFC.asp [3] http://www.ez-css.org -- Regards, Thierry | www.tjkdesign.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] the mysteries of overflow: hidden
overflow:hidden simply suggests that whetever text/image if overflows will be automatically get hidden and hence the case. So read it like if something overflows it should be hidden :) --- On Thu, 2/11/10, Jody Tate jt...@uw.edu wrote: From: Jody Tate jt...@uw.edu Subject: [WSG] the mysteries of overflow: hidden To: wsg@webstandardsgroup.org wsg@webstandardsgroup.org Date: Thursday, February 11, 2010, 12:20 AM (I'm a list lurker. Also, apologies if this has been covered before.) In CSS, setting a div to overflow: hidden solves a problem it shouldn't--at least from the name of the property and value, it seems like it shouldn't. Often I'll have text, e.g. an h1, overflowing its containing/parent div, but setting the containing/parent div to overflow: hidden causes the parent div to set its height in a way that the formerly overflowing text no longer overflows. I've seen this happen for years. Another developer showed me this fix years ago. But over the years, I've never read an explanation why overflow: hidden fixes a problem its name implies it wouldn't. Have others seen this? Any explanations? -jody *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
