[WSG] Data URI encoder
Hi all, May I ask the group to critique and comment on this image to data URI conversion tool? http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ thanks Mike Foskett http://websemantics.co.uk/ This is a confidential email. Tesco may monitor and record all emails. The views expressed in this email are those of the sender and not Tesco. Tesco Stores Limited Company Number: 519500 Registered in England Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL VAT Registration Number: GB 220 4302 31 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] Data URI encoder
Unfortantly this technique doesn't work on IE6 and 7. Regards, Hugo Mendes http://www.hugomendes.com On Wed, Feb 10, 2010 at 11:21 AM, Foskett, Mike mike.fosk...@uk.tesco.com wrote: Hi all, May I ask the group to critique and comment on this image to data URI conversion tool? http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ thanks Mike Foskett http://websemantics.co.uk/ This is a confidential email. Tesco may monitor and record all emails. The views expressed in this email are those of the sender and not Tesco. Tesco Stores Limited Company Number: 519500 Registered in England Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL VAT Registration Number: GB 220 4302 31 *** 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] Data URI encoder
On 10 Feb 2010, at 11:48, Hugo Mendes wrote:
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
Unfortantly this technique doesn't work on IE6 and 7.
… as it says on the page? Which suggests work arounds?
On the subject of the suggested workaround (conditional comments) - what about
other browsers which don't support data URIs?
How do browsers behave, in practice, given:
background-image: url('http://example.com');
background-image: url('data:...');
Do browsers which support the data scheme successfully override the regular
image before starting to download it?
Do browsers which don't support it still use the earlier declaration? Or do
they go I accept url() values, will override now?
--
David Dorward
http://dorward.me.uk
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
Re: [WSG] Data URI encoder
Hi Mike I had a play - wow - I seriously didn't realise that you could do this, (although now I think about it, its how Google sends data back to themselves in a 1px by 1 px image yes?) So while I think its a fun tool, I'm wondering what the applications actually would be. And are there tools that do the reverse? Cheers Chris On 10/02/2010 10:21 PM, Foskett, Mike wrote: Hi all, May I ask the group to critique and comment on this image to data URI conversion tool? http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ thanks Mike Foskett http://websemantics.co.uk/ This is a confidential email. Tesco may monitor and record all emails. The views expressed in this email are those of the sender and not Tesco. Tesco Stores Limited Company Number: 519500 Registered in England Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL VAT Registration Number: GB 220 4302 31 *** 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] Data URI encoder
Looks interesting, Mike :) For those unfamiliar with Data URI's, it may also be worth taking a look at this in depth article: http://www.nczonline.net/blog/2009/10/27/data-uris-explained/ Also Using Data URIs in CSS: http://nimbupani.com/using-data-uris-in-css.html Thanks Russ Hi all, May I ask the group to critique and comment on this image to data URI conversion tool? http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ thanks Mike Foskett http://websemantics.co.uk/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Data URI encoder
Hi David,
A browser will fetch a style sheet but only fetches an image background it
contains upon use in the XHTML.
Consequently overwriting background-image: url('http://example.com');
With background-image: url('data:...'); will not fetch the image but use the
data version.
So to the question Do browsers which support the data scheme successfully
override the regular image before starting to download it? the answer is yes.
Unfortunately the answer to the second question Do browsers which don't
support it still use the earlier declaration? Or do they go I accept url()
values, will override now? is no, they will display garbage if the data URI
is presented.
But please note all modern browsers support the data URI scheme.
IEv8 was the last to employ this standard.
There is a link at the page bottom which suggests a method of auto detecting
whether data URIs are supported.
I've not fully investigated the possibilities as I'm happy that support, except
IEv7 and below, is ubiquitous.
My whole site utilises CSS sprites and data URI's served via gzip.
The performance increase is phenomenal.
Regards
Mike Foskett
-Original Message-
From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On
Behalf Of David Dorward
Sent: 10 February 2010 11:59
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] Data URI encoder
On 10 Feb 2010, at 11:48, Hugo Mendes wrote:
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/
Unfortantly this technique doesn't work on IE6 and 7.
... as it says on the page? Which suggests work arounds?
On the subject of the suggested workaround (conditional comments) - what about
other browsers which don't support data URIs?
How do browsers behave, in practice, given:
background-image: url('http://example.com');
background-image: url('data:...');
Do browsers which support the data scheme successfully override the regular
image before starting to download it?
Do browsers which don't support it still use the earlier declaration? Or do
they go I accept url() values, will override now?
--
David Dorward
http://dorward.me.uk
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
This is a confidential email. Tesco may monitor and record all emails. The
views expressed in this email are those of the sender and not Tesco.
Tesco Stores Limited
Company Number: 519500
Registered in England
Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL
VAT Registration Number: GB 220 4302 31
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: memberh...@webstandardsgroup.org
***
RE: [WSG] Data URI encoder
Hi Chris, Thanks for taking a look at the tool. The main application is to reduce HTTP requests and thereby increase page delivery speed. Right clicking on a data URI image and using Save image as will save it in its original form. Regards Mike From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Chris Beer Sent: 10 February 2010 12:02 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Data URI encoder Hi Mike I had a play - wow - I seriously didn't realise that you could do this, (although now I think about it, its how Google sends data back to themselves in a 1px by 1 px image yes?) So while I think its a fun tool, I'm wondering what the applications actually would be. And are there tools that do the reverse? Cheers Chris On 10/02/2010 10:21 PM, Foskett, Mike wrote: Hi all, May I ask the group to critique and comment on this image to data URI conversion tool? http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/ thanks Mike Foskett http://websemantics.co.uk/ This is a confidential email. Tesco may monitor and record all emails. The views expressed in this email are those of the sender and not Tesco. Tesco Stores Limited Company Number: 519500 Registered in England Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL VAT Registration Number: GB 220 4302 31 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.orgmailto:memberh...@webstandardsgroup.org *** *** 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] Data URI encoder
The main application is to reduce HTTP requests and thereby increase page delivery speed. Hi Mike, I see that the page you refer to links to a stylesheet with 4 images embedded in it, rather than the stylesheet linking to those 4 images, therefore, you have one http request rather than 5 and also, that stylesheet has an expires header set to 10 years from now. You say it's a lot faster, but I question the value of going to this trouble. I agree there is a performance gain, but if you link to the images from the stylesheet instead and also set an expires header on them then subsequent page loads become irrelevant so it's just the initial visit with an empty cache that is affected. Given that the download size is pretty much the same with either method, the only gain i can see is a marginal one from those initial extra 4 http requests. Is that really such a huge gain? -- Chris Knowles *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[WSG] Out of Office: WSG Digest
Hi, I am unwell and out of the office. If your email is related to DBCDE work please email webreque...@dbcde.gov.au or call Andrew Eals on 6271 1501 or Catherine Driessen on 6271 1159. If it's of urgent personal nature call my mobile. Many thanks, Warwick Smith Internet Publishing Co-ordinator | Web Services Department of Broadband, Communications and the Digital Economy --- The information transmitted is for the use of the intended recipient only and may contain confidential and/or legally privileged material. Any review, re-transmission, disclosure, dissemination or other use of, or taking of any action in reliance upon, this information by persons or entities other than the intended recipient is prohibited and may result in severe penalties. If you have received this e-mail in error please notify the Security Advisor of the Department of Broadband, Communications and the Digital Economy, 38 Sydney Ave, Forrest ACT 2603, telephone (02) 6271-1376 and delete all copies of this transmission together with any attachments. Please consider the environment before printing this email. --- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
RE: [WSG] Data URI encoder
Hi Chris, That's a little beyond topic scope but here goes. The image / CSS / data URI layout used on the page is a little complex I'll agree. It was optimised to provide the key images first and quickly, even in IEv6. Note the different sub-domains used. The CSS is served via a gzip and cache utility hence the far future expiry date. The design was written 2 years ago and page load optimisations followed in the three months after. It is significantly faster, I'd say to a factor of 7 or even eight times quicker. Unfortunately the tools used haven't records from that far back so I cannot back the statement up. As to whether it's worth the trouble? That's a different matter. Here it was used as a learning experience, so for me it definitely was. The techniques investigated, and the lessons learned, were in part applied by my current employer. Up to 2 million hits a day, it used to take 3.7 sec to download the homepage. Now it takes a healthy 0.6 seconds. References: http://websemantics.co.uk/projects/#tesco It's on sites like this where these techniques really make a difference. Albeit I've not as yet implemented data URIs there. I need a gzip enabled server first. Regards Mike Foskett. -Original Message- From: li...@webstandardsgroup.org [mailto:li...@webstandardsgroup.org] On Behalf Of Chris Knowles Sent: 10 February 2010 12:59 To: wsg@webstandardsgroup.org Subject: Re: [WSG] Data URI encoder The main application is to reduce HTTP requests and thereby increase page delivery speed. Hi Mike, I see that the page you refer to links to a stylesheet with 4 images embedded in it, rather than the stylesheet linking to those 4 images, therefore, you have one http request rather than 5 and also, that stylesheet has an expires header set to 10 years from now. You say it's a lot faster, but I question the value of going to this trouble. I agree there is a performance gain, but if you link to the images from the stylesheet instead and also set an expires header on them then subsequent page loads become irrelevant so it's just the initial visit with an empty cache that is affected. Given that the download size is pretty much the same with either method, the only gain i can see is a marginal one from those initial extra 4 http requests. Is that really such a huge gain? -- Chris Knowles *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org *** This is a confidential email. Tesco may monitor and record all emails. The views expressed in this email are those of the sender and not Tesco. Tesco Stores Limited Company Number: 519500 Registered in England Registered Office: Tesco House, Delamare Road, Cheshunt, Hertfordshire EN8 9SL VAT Registration Number: GB 220 4302 31 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
[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] IE7 overflow
Hi, Any suggestions? Maybe: word-wrap: break-word or overflow: hidden See: http://www.positioniseverything.net/explorer/expandingboxbug.html Hths? Micky *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE7 overflow
Lucien Stals wrote: Hi everyone. I have a paragraph with a width set on it (500px). The text inside the p includes one very long URL. IE7 and Safari (both mac a win) are wrapping the URL in the wrong place and part of it extends out beyond the edge of the p. Curiously IE6 displays correctly, as do FF3.6 and Opera. Any suggestions? Put it on a public server and provide a clickable link to it in your post. Best, ~d -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: memberh...@webstandardsgroup.org ***
Re: [WSG] IE7 overflow
Sorry, can't do that. The project isn't live yet, and I'd get in trouble :( I know that makes it harder to get help with. On 11/02/2010, at 3:05 PM, David Laakso wrote: Lucien Stals wrote: Hi everyone. I have a paragraph with a width set on it (500px). The text inside the p includes one very long URL. IE7 and Safari (both mac a win) are wrapping the URL in the wrong place and part of it extends out beyond the edge of the p. Curiously IE6 displays correctly, as do FF3.6 and Opera. Any suggestions? Put it on a public server and provide a clickable link to it in your post. Best, ~d -- desktop http://chelseacreekstudio.com/ mobile http://chelseacreekstudio.mobi/ *** 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] IE7 overflow
Bingo! word-wrap: break-word did the trick. Thanks for that. L. On 11/02/2010, at 2:49 PM, Micky Hulse wrote: Hi, Any suggestions? Maybe: word-wrap: break-word or overflow: hidden See: http://www.positioniseverything.net/explorer/expandingboxbug.html Hths? Micky *** 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 ***
