Re: [WSG] IE, alpha transparency and sliding doors...
There is a way to do that but it won't be CSS valid, since you'd have to use custom mozilla transparency and since the child will inherit the transparency properties make it outside the transparent div and movie it with position left right top and bottom, that should work I have a site that should launch anytime now done that way On 8/22/07, Nick Cowie [EMAIL PROTECTED] wrote: Stephen asked: Could you use solid background gif and then the opacity filter in your IE6 style sheet? I'm not sure if you can make the child of a translucent parent opaque though. Yes and Yes, I was lazy and chose to do it via background colour rather than image (is was easier to get a colour match) and you can make the child of a translucent parent opaque. I had to go find the IE CSS for that page. But that is what I did. http://www.docep.wa.gov.au/presentation/style/wlieonly.css I could not agree with Joe more: Impossible? Not if you have a huge amount of time to put towards ironing out the issues. It will consume a couple of days to get it right in IE 5.5 and 6 if that is what the client / boss wants and is willing to pay for then do it. You will know for next time. Otherwise use conditional comments and feed a gif with no shadow to IE 6 and below. Half and hour of your time instead of days. Nick *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- http://www.Mjama.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE, alpha transparency and sliding doors...
/Slightly/ off-thread, but... On 21/8/07 (04:02) Joseph said: Safari will sometimes show a different hue of your color than other browsers will when .png images set as backgrounds. I believe that this is a product of PNGs containing a built-in gamma profile; many browsers ignore it (as they ignore other colour profile info) but Safari (and maybe some others?) adjust the colour render accordingly, meaning that the image is displayed with a slightly different gamma to 'non-gamma' elements (eg. GIFs and background colours set in HTML/CSS). A solution to this is reported to be GammaSlamma http://tinyurl.com/ yuchvh which strips out the gamma information. I say 'reportedly' because although I've downloaded it and plan to give it a whirl, I have not, as yet, had opportunity to try it out. But just thought in case it helps anybody. -- Rick Lecoat *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE, alpha transparency and sliding doors...
On 21/8/07 (04:02) Joseph said: Safari will sometimes show a different hue of your color than other browsers will when .png images set as backgrounds. On Wed, 22 Aug 2007 1, Rick Lecoat replied: /Slightly/ off-thread, but... I believe that this is a product of PNGs containing a built-in gamma profile; many browsers ignore it (as they ignore other colour profile info) but Safari (and maybe some others?) adjust the colour render accordingly, meaning that the image is displayed with a slightly different gamma to 'non-gamma' elements (eg. GIFs and background colours set in HTML/CSS). A solution to this is reported to be GammaSlamma http://tinyurl.com/ yuchvh which strips out the gamma information. I say 'reportedly' because although I've downloaded it and plan to give it a whirl, I have not, as yet, had opportunity to try it out. But just thought in case it helps anybody. In the same spirit, I can tell you that PNGOUTWin also removes this gamma information. Out of the box, it also safely removes all the gunk with which Adobe products infest PNG files. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE, alpha transparency and sliding doors...
On 21/8/07 (04:02) Joseph said: Safari will sometimes show a different hue of your color than other browsers will when .png images set as backgrounds. On Wed, 22 Aug 2007 1, Rick Lecoat replied: /Slightly/ off-thread, but... I believe that this is a product of PNGs containing a built-in gamma profile; many browsers ignore it (as they ignore other colour profile info) but Safari (and maybe some others?) adjust the colour render accordingly, meaning that the image is displayed with a slightly different gamma to 'non-gamma' elements (eg. GIFs and background colours set in HTML/CSS). A solution to this is reported to be GammaSlamma http://tinyurl.com/ yuchvh which strips out the gamma information. I say 'reportedly' because although I've downloaded it and plan to give it a whirl, I have not, as yet, had opportunity to try it out. But just thought in case it helps anybody. In the same spirit, I can tell you that PNGOUTWin also removes this gamma information. Out of the box, it also safely removes all the gunk with which Adobe products infest PNG files. Cordially, David -- *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE, alpha transparency and sliding doors...
On Aug 22, 2007, at 1:00 PM, David Hucklesby wrote: ...all the gunk with which Adobe products infest PNG files. I may be mistaken here, but I think the gunk can be dispensed with by using Save For Web rather than simply Save or Save As. Although it may be gunk on the web, this information is essential to achieving consistent high quality in print. Andrew *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE, alpha transparency and sliding doors...
On 22/8/07 (20:15) Andrew said: I may be mistaken here, but I think the gunk can be dispensed with by using Save For Web rather than simply Save or Save As. I believe that a PNG's gamma information is retained in a Save For Web operation -- certainly I've seen colour casts in PNGs that I've used in web pages (eg. a flat hex colour in a PNG placed beside the same hex colour specified in the CSS), the PNG having been saved for web in Photoshop (I can't always be bothered going via ImageReady). Other things such embedded icon information /are/ removed, however, and can mean considerable savings in file size. Although it may be gunk on the web, this information is essential to achieving consistent high quality in print. Indeed, primarily colour profiles. -- Rick Lecoat *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
[WSG] IE, alpha transparency and sliding doors...
Hi all - I've been set what I believe to be an impossible challenge, but before I admit defeat I thought I should cast it out into the wilds of the internet and see if others agreed or could suggest a solution. The challenge is this: to create a flexible (vertical and horizontal) content-containing box with rounded corners and drop shadows (three sides) - over a patterned background. The problem, of course, is IE 5.5 and 6 - I've investigated the AlphaImageLoader filter and I can't see any way to make it do what I want - if I use the sliding-doors method, neither left nor right borders show up, even though the top and bottom work OK (barring the fact that you can see the underneath sliding image in the transparent bit going around the topmost rounded corner). I have also tested trying to make this work using side-by-side spans, which again could be made to work OK for the top level (fixing the over/under thing), but which then left me with the issue where the left border showed up OK, but the right border either didn't (because to make it stretch the full length of the content meant I had to put it in a div surrounding the content, but then AlphaImageLoader doesn't allow positioning, so I couldn't shift it to the right) so it was hidden by content, or only showed up 23px high because IE doesn't implement height: 100% unless the bounding box's height is expressed in pixels - no good where you have no clue how tall your content will be. I even tried using IE's proprietary dropshadow filter with transparent gifs for the rounded corners minus the photoshop dropshadow, but the results were too hideous to even contemplate. SO: Does anyone know of a way to implement such a thing, or is this indeed, as it seems, totally impossible? I'd appreciate either sort of response :-) Thanks, Caitlin. Caitlin Rowley, B. Mus. (Hons), Gr. Dip. Design Composer, musicologist, web designer http://www.minim-media.com/listen/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE, alpha transparency and sliding doors...
We're probably going to need to see your code and/or a link to the page to be able to make any reasonable comment. On Wed, 22 Aug 2007 10:28:57 +1000, minim [EMAIL PROTECTED] wrote: Hi all - I've been set what I believe to be an impossible challenge, but before I admit defeat I thought I should cast it out into the wilds of the internet and see if others agreed or could suggest a solution. The challenge is this: to create a flexible (vertical and horizontal) content-containing box with rounded corners and drop shadows (three sides) - over a patterned background. The problem, of course, is IE 5.5 and 6 - I've investigated the AlphaImageLoader filter and I can't see any way to make it do what I want - if I use the sliding-doors method, neither left nor right borders show up, even though the top and bottom work OK (barring the fact that you can see the underneath sliding image in the transparent bit going around the topmost rounded corner). I have also tested trying to make this work using side-by-side spans, which again could be made to work OK for the top level (fixing the over/under thing), but which then left me with the issue where the left border showed up OK, but the right border either didn't (because to make it stretch the full length of the content meant I had to put it in a div surrounding the content, but then AlphaImageLoader doesn't allow positioning, so I couldn't shift it to the right) so it was hidden by content, or only showed up 23px high because IE doesn't implement height: 100% unless the bounding box's height is expressed in pixels - no good where you have no clue how tall your content will be. I even tried using IE's proprietary dropshadow filter with transparent gifs for the rounded corners minus the photoshop dropshadow, but the results were too hideous to even contemplate. SO: Does anyone know of a way to implement such a thing, or is this indeed, as it seems, totally impossible? I'd appreciate either sort of response :-) Thanks, Caitlin. Caitlin Rowley, B. Mus. (Hons), Gr. Dip. Design Composer, musicologist, web designer http://www.minim-media.com/listen/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design www.tyssendesign.com.au Ph: (07) 3300 3303 Mb: 0405 678 590 *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE, alpha transparency and sliding doors...
Caitlin It should be possible, depends on how much time you are willing to invest. I have always had problems applying AlphaImageloader to background images. So I don't even try. I would build the site so it worked in all modern browser. The using conditional comments apply a special CSS for IE 5.5 6 that replaces the transparent background .png files with transparent background .gif and use the Gradient Filter http://msdn2.microsoft.com/en-us/library/ms532997.aspx AlphaImageLoader Filter where necessary. You can see the basic idea in the CSS here http://www.docep.wa.gov.au/lr/worklife/overview.html (it is now an ugly invalid site now, but three years ago when I last touched it it was clean and valid). If you change your font size, it is an elastic site, the background image still appears through the semi-transparent menu background. In IE (including 7 I built this 3 years ago) the background is a gif and AlphaImageloader is used on the menu div to make the whole div semi-transparent. In all other modern browsers because the background is a semi-transparent png Using that technique with both AlphaImageloader and Gradient filter should get you the results you need Nick *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE, alpha transparency and sliding doors...
Could you use solid background gif and then the opacity filter in your IE6 style sheet? I'm not sure if you can make the child of a translucent parent opaque though. Nick Cowie wrote: Caitlin It should be possible, depends on how much time you are willing to invest. I have always had problems applying AlphaImageloader to background images. So I don't even try. I would build the site so it worked in all modern browser. The using conditional comments apply a special CSS for IE 5.5 6 that replaces the transparent background .png files with transparent background .gif and use the Gradient Filter http://msdn2.microsoft.com/en-us/library/ms532997.aspx AlphaImageLoader Filter where necessary. You can see the basic idea in the CSS here http://www.docep.wa.gov.au/lr/worklife/overview.html http://www.docep.wa.gov.au/lr/worklife/overview.html (it is now an ugly invalid site now, but three years ago when I last touched it it was clean and valid). If you change your font size, it is an elastic site, the background image still appears through the semi-transparent menu background. In IE (including 7 I built this 3 years ago) the background is a gif and AlphaImageloader is used on the menu div to make the whole div semi-transparent. In all other modern browsers because the background is a semi-transparent png Using that technique with both AlphaImageloader and Gradient filter should get you the results you need Nick *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] IE, alpha transparency and sliding doors...
Impossible? Not if you have a huge amount of time to put towards ironing out the issues. Realistically, however: Not only is getting .png's to work by themselves in IE a difficult task, but the flow of related problems is even worse. You have problems with hyperlinks that appear over any .png images and sometimes other places too. Hand cursor doesn't work in IE. Safari will sometimes show a different hue of your color than other browsers will when .png images set as backgrounds. Links won't activate. There's plenty of others I cannot think of right now. Sure, these can be overcome with combinations of well-placed position:relatives and other IE pacifiers, but in most cases today I recommend using your alternate stylesheets to have your cake and eat it too. Set up a separate stylesheet for anything lower than IE7. Substitute out the .pngs that are the trouble items and replace with .gifs in your stylesheet. You may need to add a container div or 2 to your markup to make it happen. I won't scold you for it. Example: http://seaislerealty.com Uses transparent .pngs all over the front page, but uses .gifs instead for IE. Best solution? I'm not claiming that. I am claiming that it works and those who use the newer browsers enjoy a lightly enhanced experience. Sites by Joe, LLC http://sitesbyjoe.com [EMAIL PROTECTED] John Faulds wrote: We're probably going to need to see your code and/or a link to the page to be able to make any reasonable comment. On Wed, 22 Aug 2007 10:28:57 +1000, minim [EMAIL PROTECTED] wrote: Hi all - I've been set what I believe to be an impossible challenge, but before I admit defeat I thought I should cast it out into the wilds of the internet and see if others agreed or could suggest a solution. The challenge is this: to create a flexible (vertical and horizontal) content-containing box with rounded corners and drop shadows (three sides) - over a patterned background. The problem, of course, is IE 5.5 and 6 - I've investigated the AlphaImageLoader filter and I can't see any way to make it do what I want - if I use the sliding-doors method, neither left nor right borders show up, even though the top and bottom work OK (barring the fact that you can see the underneath sliding image in the transparent bit going around the topmost rounded corner). I have also tested trying to make this work using side-by-side spans, which again could be made to work OK for the top level (fixing the over/under thing), but which then left me with the issue where the left border showed up OK, but the right border either didn't (because to make it stretch the full length of the content meant I had to put it in a div surrounding the content, but then AlphaImageLoader doesn't allow positioning, so I couldn't shift it to the right) so it was hidden by content, or only showed up 23px high because IE doesn't implement height: 100% unless the bounding box's height is expressed in pixels - no good where you have no clue how tall your content will be. I even tried using IE's proprietary dropshadow filter with transparent gifs for the rounded corners minus the photoshop dropshadow, but the results were too hideous to even contemplate. SO: Does anyone know of a way to implement such a thing, or is this indeed, as it seems, totally impossible? I'd appreciate either sort of response :-) Thanks, Caitlin. Caitlin Rowley, B. Mus. (Hons), Gr. Dip. Design Composer, musicologist, web designer http://www.minim-media.com/listen/ *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***begin:vcard fn:Joseph Taylor n:Taylor;Joseph org:Sites by Joe, LLC adr:;;408 Route 47 South;Cape May Court House;NJ;08210;USA email;internet:[EMAIL PROTECTED] title:Designer / Developer tel;work:609-335-3076 tel;cell:609-335-3076 x-mozilla-html:TRUE url:http://sitesbyjoe.com version:2.1 end:vcard
Re: [WSG] IE, alpha transparency and sliding doors...
Stephen asked: Could you use solid background gif and then the opacity filter in your IE6 style sheet? I'm not sure if you can make the child of a translucent parent opaque though. Yes and Yes, I was lazy and chose to do it via background colour rather than image (is was easier to get a colour match) and you can make the child of a translucent parent opaque. I had to go find the IE CSS for that page. But that is what I did. http://www.docep.wa.gov.au/presentation/style/wlieonly.css I could not agree with Joe more: Impossible? Not if you have a huge amount of time to put towards ironing out the issues. It will consume a couple of days to get it right in IE 5.5 and 6 if that is what the client / boss wants and is willing to pay for then do it. You will know for next time. Otherwise use conditional comments and feed a gif with no shadow to IE 6 and below. Half and hour of your time instead of days. Nick *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***