Re: [WSG] PNGs in CSS background images in IE6
IE rocks! :-)
It can get worse. Developing a website with a custom page visit logger
sometime last year I found .htc files being the most requested 'page' on
that site. After a lot of guessing I happened to check the Apache logs
on my development server and saw IE looking for the thing all over the
place. So called 'SEO friendly URLs' apparently made IE (only) think it
was in a different folder, and it went requesting the .htc fom the
non-existent folder it derived from the URL.
Solution: use absolute URLs or redirect with mod_rewrite...
djn
Geoff Pack wrote:
But this does:
img {
background:url(background.jpg);
behavior:url(styles/pngbehavior.htc);
}
With the obvious consequences. Why did they do this?
--
Dejan Kozina
Dolina 346 (TS) - I-34018 Italy
tel./fax: +39 040 228 436 - cell.: +39 348 7355 225
http://www.kozina.com/ - e-mail: [EMAIL PROTECTED]
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] PNGs in CSS background images in IE6
On 11/28/06, Geoff Pack [EMAIL PROTECTED] wrote: Has anyone had any success using AlphaImageLoader with PNGs in CSS background images in IE6? Any foreground links over the PNG are broken (not clickable), and the fixes I found through Google aren't doing the job. I was recently faced with the same issue. Searching google will return a lot of results...some good and some not so good. To combat all the trash out there I wrote a small article on my blog to chronicle my PNG24 findings: http://www.dontcom.com/2006/11/png-24-round-up/ I hope you're able to get some loving from the stuff I came across. Cheers D -- darren wood [EMAIL PROTECTED] http://www.dontcom.com *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] ***
Re: [WSG] PNGs in CSS background images in IE6
Hi, Have you tried adjusting the z-axis of your links above their parent element on which your background is held. This works for most conflicts arising from the different treatment PNGs get from different browsers. The other obvious problem is IE assuming margin and padding settings for your elements which distort how links are displayed over certain uses of different elements. - Original Message - From: Darren Wood [EMAIL PROTECTED] To: wsg@webstandardsgroup.org Sent: Monday, December 04, 2006 1:10 PM Subject: Re: [WSG] PNGs in CSS background images in IE6 On 11/28/06, Geoff Pack [EMAIL PROTECTED] wrote: Has anyone had any success using AlphaImageLoader with PNGs in CSS background images in IE6? Any foreground links over the PNG are broken (not clickable), and the fixes I found through Google aren't doing the job. I was recently faced with the same issue. Searching google will return a lot of results...some good and some not so good. To combat all the trash out there I wrote a small article on my blog to chronicle my PNG24 findings: http://www.dontcom.com/2006/11/png-24-round-up/ I hope you're able to get some loving from the stuff I came across. Cheers D -- darren wood [EMAIL PROTECTED] http://www.dontcom.com *** 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] PNGs in CSS background images in IE6
One further thing I noticed. The URL of CSS behaviours (in IE) is
relative to the parent HTML page, not the CSS file.
e.g. http://abc.net.au/test/png/ has five files:
default.htm
styles/logo2.png
styles/screen.css
styles/background.jpg
styles/pngbehavior.htc
This doesn't work:
img {
background:url(background.jpg);
behavior:url(pngbehavior.htc);
}
But this does:
img {
background:url(background.jpg);
behavior:url(styles/pngbehavior.htc);
}
With the obvious consequences. Why did they do this?
Geoff.
==
The information contained in this email and any attachment is confidential and
may contain legally privileged or copyright material. It is intended only for
the use of the addressee(s). If you are not the intended recipient of this
email, you are not permitted to disseminate, distribute or copy this email or
any attachments. If you have received this message in error, please notify the
sender immediately and delete this email from your system. The ABC does not
represent or warrant that this transmission is secure or virus free. Before
opening any attachment you should check for viruses. The ABC's liability is
limited to resupplying any email and attachments
==
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] PNGs in CSS background images in IE6
Usually I set the container element to position:relative, and the
container´s links to position:static . It works fine.
Geoff Pack escreveu:
Thanks guys, all fixed now.
Just seeing that it was possible was enough to make me to strip it back
and start again. The problem was that I had an errant
div {position:relative; ...}
in my CSS. Wouldn't have thought it would bugger anything up. Most of my
divs, and all of the content with the problematic backgrounds are
positioned anyway.
cheers,
Geoff.
c41.com.au - beautiful site btw.
-Original Message-
From: listdad@webstandardsgroup.org On Behalf Of Peter Ottery
Sent: Tuesday, 28 November 2006 13:56
To: wsg@webstandardsgroup.org
Subject: Re: [WSG] PNGs in CSS background images in IE6
Geoff wrote:
- Yeah. Position relative doesn't seem to work.
can you break it down to a basic stripped down version and post it
somewhere for us to check out?
I wrestled with it for ages on my site (http://c41.com.au) and
eventually arrived at applying position:relative to the links
specifically (in http://c41.com.au/css/lt_ie7.css) like:
#main a:link, #main a:visited, #main a:hover, #main a:active
{position:relative}
which worked for the links in that central content area...
pete o
==
The information contained in this email and any attachment is confidential and
may contain legally privileged or copyright material. It is intended only for
the use of the addressee(s). If you are not the intended recipient of this
email, you are not permitted to disseminate, distribute or copy this email or
any attachments. If you have received this message in error, please notify the
sender immediately and delete this email from your system. The ABC does not
represent or warrant that this transmission is secure or virus free. Before
opening any attachment you should check for viruses. The ABC's liability is
limited to resupplying any email and attachments
==
***
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] PNGs in CSS background images in IE6
Did the fixes you found include adding position: relative? On Tue, 28 Nov 2006 11:52:56 +1000, Geoff Pack [EMAIL PROTECTED] wrote: Has anyone had any success using AlphaImageLoader with PNGs in CSS background images in IE6? Any foreground links over the PNG are broken (not clickable), and the fixes I found through Google aren't doing the job. Any ideas? thanks, Geoff == The information contained in this email and any attachment is confidential and may contain legally privileged or copyright material. It is intended only for the use of the addressee(s). If you are not the intended recipient of this email, you are not permitted to disseminate, distribute or copy this email or any attachments. If you have received this message in error, please notify the sender immediately and delete this email from your system. The ABC does not represent or warrant that this transmission is secure or virus free. Before opening any attachment you should check for viruses. The ABC's liability is limited to resupplying any email and attachments == *** List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm Help: [EMAIL PROTECTED] *** -- Tyssen Design Web print design services 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] PNGs in CSS background images in IE6
On Nov 27, 2006, at 5:52 PM, Geoff Pack wrote:
Has anyone had any success using AlphaImageLoader with PNGs in CSS
background images in IE6?
Hi Geoff,
I did one sometimes ago.
for non IE
#header h2{
background: url(images/logo.png);
height: 205px;
width: 294px;
position: absolute;
z-index: 300;
left: 300px;
top: 88px;
}
#header h2 span {display: none;} /* FIR p/s. text indent with
-3px probably works better*/
for IE 6 and 5.5
#header h2{
height: 205px;
width: 294px;
position: absolute;
z-index: 300;
left: 300px;
top: 88px;
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader
(src='common_images/logo.png'), sizingMethod='scale');
}
and the markup looks like this:
div id=header
h2spanCompany logo/span/h2/div
The reasons I used the h2 with absolute positioning was because : 1)
company name for SEO; 2) I find placing image in a descendent of a
div easy to controlled as far as absolute positioning concerned
Hope this helps
tee
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] PNGs in CSS background images in IE6
Geoff wrote:
- Yeah. Position relative doesn't seem to work.
can you break it down to a basic stripped down version and post it
somewhere for us to check out?
I wrestled with it for ages on my site (http://c41.com.au) and
eventually arrived at applying position:relative to the links
specifically (in http://c41.com.au/css/lt_ie7.css) like:
#main a:link, #main a:visited, #main a:hover, #main a:active {position:relative}
which worked for the links in that central content area...
pete o
***
List Guidelines: http://webstandardsgroup.org/mail/guidelines.cfm
Unsubscribe: http://webstandardsgroup.org/join/unsubscribe.cfm
Help: [EMAIL PROTECTED]
***
Re: [WSG] PNGs in CSS background images in IE6
Yeah, there is a bug in IE. I faced it once. The problem occurs only for background with some particular dimensions (it sound weird, I know). Try to reduce width of the background by 1 px and test it. Oh, here is the link with better description: http://www.daltonlp.com/ daltonlp.cgi?item_type=1item_id=217 scroll down to “Addendum: IE Link bug”. Good luck! best regards, Dmitry Baranovskiy On 28/11/2006, at 12:52 PM, Geoff Pack wrote: Has anyone had any success using AlphaImageLoader with PNGs in CSS background images in IE6? Any foreground links over the PNG are broken (not clickable), and the fixes I found through Google aren't doing the job. Any ideas? thanks, Geoff == The information contained in this email and any attachment is confidential and may contain legally privileged or copyright material. It is intended only for the use of the addressee(s). If you are not the intended recipient of this email, you are not permitted to disseminate, distribute or copy this email or any attachments. If you have received this message in error, please notify the sender immediately and delete this email from your system. The ABC does not represent or warrant that this transmission is secure or virus free. Before opening any attachment you should check for viruses. The ABC's liability is limited to resupplying any email and attachments == *** 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] ***
