SitePoint Sponsor |
|
User Tag List
Results 1 to 17 of 17
Thread: IE png transparency hack
-
Apr 11, 2007, 03:35 #1
IE png transparency hack
Hello good pple of the forum,
I've searched the forum and found some solution that should work for this problem. Basically, i have some couples of transparent background pngs on my site which needs to be displayed correctly in IE 6.
css code:
PHP Code:#wrapper div#leftcontent div#verticalnavbar {
width:215px;
font-size:14px;
float:left;
margin-bottom:1px;
margin-top:1px;
height: 204px;
background-image: url(images/menubg1.png);
padding: 0px;
margin-top:4px;
font-family: "Trebuchet MS", Tahoma, sans-serif;
line-height: 1.5em;
text-align: center;
background-repeat: no-repeat;
margin-left:2px;
}
PHP Code:* html #wrapper div#leftcontent div#verticalnavbar{
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/menubg1.png", sizingMethod='scale');
}
-
Apr 11, 2007, 03:54 #2
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
If those are separate IDs being applied to separate elements (which I'm sure they are), then you'll have to separate the selectors with commas. Then do the same with the Star HTML hack. The hack for example, would look like this:
Code:* html #wrapper, * html div#leftcontent, * html div#verticalnavbar{ filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/menubg1.png", sizingMethod='scale'); }
Of course, I'm just grasping at straws here since I can't even see the HTML code you're using.Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Apr 11, 2007, 04:03 #3Code:
* html #wrapper div#leftcontent div#verticalnavbar { background-image: none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/menubg1.png", sizingMethod='scale'); }
-
Apr 11, 2007, 04:03 #4
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Originally Posted by Dan
I would add that you will also need to cancel out the original background image or it will overwrite the filter image.
e.g.
Code:* html #wrapper, * html div#leftcontent, * html div#verticalnavbar{ background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="images/menubg1.png", sizingMethod='scale'); }
http://www.pmob.co.uk/temp/transparent-test3.htm
-
Apr 11, 2007, 04:30 #5
Thanks everybody from dan,logic_earth and paul, it worked.
Thanks once again Cheers
-
Apr 11, 2007, 04:46 #6
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Cool. Glad to hear (ok, read) it.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 14, 2007, 07:25 #7
Not working for me
I've got a png background issue in IE as well but I tried the solution posted here and all it does is make the background dissapear in IE6.
Am I missing something?
http://ns3.practisinc.com/~concordemed.com/content.htmlThe blog: ChrisMonnat.com
-
Sep 14, 2007, 09:10 #8
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
The element needs "haslayout"
Code:* html #content {height:1%; background:none; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://ns3.practisinc.com/~concordemed.com/images/bg_content.png',sizingMethod='scale'); }
-
Sep 14, 2007, 09:37 #9
Thats what I first thought too... but it still doesn't work. I reuploaded the updated css with the height:1%; and it still doesn't show the background in IE6.
The blog: ChrisMonnat.com
-
Sep 14, 2007, 13:30 #10
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
I have it working locally ok with the original code I gave.
Use an asbolute reference to the image or change the path as I believe the image path is relative to the page that displays it and not the css file as per usual.
-
Sep 17, 2007, 06:12 #11
Referencing the image absolutely did the trick!!
Thanks.The blog: ChrisMonnat.com
-
Sep 19, 2007, 07:56 #12
I just realized that I have a larger problem now than the background. Things are "looking" good but I can't click any links or select anything that has that background in IE6. Any idea why this is?
The blog: ChrisMonnat.com
-
Sep 19, 2007, 08:55 #13
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Any idea why this is?
It's a known problem with the filter and why I avoid using it unless absolutely necessary.
Try this fix (which isn't 100% guaranteed to work):
Code:#content a{position:relative}
-
Sep 19, 2007, 09:04 #14
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Try setting position: relative; and then apply a z-index to see if it works (just as a test at first). Sounds like you may have a depth sorting error, but I can't tell without the code.
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 19, 2007, 09:26 #15
- Join Date
- Jan 2003
- Location
- Hampshire UK
- Posts
- 40,556
- Mentioned
- 183 Post(s)
- Tagged
- 6 Thread(s)
Sounds like you may have a depth sorting error,
http://www.satzansatz.de/cssd/tmp/al...nsparency.html
http://www.daltonlp.com/view/217
The fix I gave should work in this case though
-
Sep 19, 2007, 09:52 #16
- Join Date
- May 2006
- Location
- Aurora, Illinois
- Posts
- 15,476
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
I forgot about the filter, actually. (Just woke up around the time that was posted.)
Save the Internet - Use Opera | May my mother rest in peace: 1943-2009
Dan Schulz - Design Team Advisor | Follow me on Twitter
SitePoint References: HTML CSS JavaScript | Become A Guru
WordPress SEO Checklist | What WordPress Plugins Do You Use?
Web Standards Curriculum | Image Free Equal Height Columns
-
Sep 20, 2007, 05:41 #17
That did the trick... thanks again!
The blog: ChrisMonnat.com
Bookmarks