IE PNG Transparency
Well, as promised, I am here to post about how I got the transparent PNG files to work in IE, while keeping my XHTML and CSS valid.
Keeping the Valid XHTML and CSS came down to a simple matter of hiding all of IE’s crap. To do this, you will need to use multiple stylesheets. One (mine is ‘style.css’) is for all the styles, for every browser to see. The second one (mine is ‘ie.css’) is just for Internet Explorer. All you need to do is hide ie.css from standards compliant web browsers (like FireFox), and you can put all the IE crap you want in there without affecting the validity of your code. The best method I’ve found to do this is by using conditional statements. Your code to include ie.css would then look something like this.
<!--[if IE]>
<link rel="stylesheet" href="http://yoursite.com/styles/ie.css" type="text/css" media="screen" /<
< ![endif]-->
For those of you with WordPress 1.5, I will explain more about how to reconcile all this with themes a little later.
Make sure that you put the link for ie.css AFTER the link for style.css. This will allow you to overwrite stuff from ‘style.css’ that will make your page break in IE.Everything between <!--
and -->
is treated as a comment by standards compliant browsers, and is therefore ignored. However, Internet Explorer will see the [if IE]
and check to see if that statement is true. If it is, then IE will execute anything it finds until it hits < ![endif]-->
. So since the whole statement is technically a comment, it won’t invalidate your code! Pretty cool, eh ? Let’s move on to transperency…Making backgrounds transperent is very simple for standards-compliant browsers. Simply make a transperent png image, and set it as the background for a given division. In a stylesheet, it would look like this.
.post {
background-image:url(http://mysite.com/trans-tan.png);
}
Now, if you have an Internet Explorer stylesheet, the next part may go off without a hitch (but it’s not likely). The code I used for Internet Explorer was filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://mysite.com/trans-tan.png',sizingMethod='scale');
(all one line). Pretty scary, right ? And it’s not the same as having a background. So to make sure that IE won’t just throw an opaque background image on top of that, you’ll need to cancel out the background image that you defined in ‘style.css’. This can be done with a simple background-image:none;
in ‘ie.css’ (This is an example of why ‘ie.css’ needs to be executed after ‘style.css’).
Another thing you’ll probably need to do is add position:relative;
in ‘ie.css’. I’m not really sure why, but stuff tends to break when you don’t have it there. You may also have to mess around with width
to get the background image to actually appear. So here’s the coding in my ‘ie.css’ file to get the transparent tan color behind these posts.
.post {
position:relative;
width: 100%;
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://mysite.com/trans-tan.png',sizingMethod='scale');
}
Take a second right now to compare the coding for FireFox (one line) to the coding for Internet Explorer (above). See why I hate IE ? Another problem I ran into was the fact that I wanted to use some php commands for the url for some images, instead of having static url’s. Well, this actually turned out to be an easy thing to do. See, in a stylesheet (a css file), a browser won’t render php commands.
But if you’re using in-line styles, it will. So how do you make ie.css into inline styling ? I’m glad you asked. The answer is < ?php include(); ?>
. Instead of having <link rel="stylesheet" href="http://yoursite.com/styles/ie.css" type="text/css" media="screen" />
in the conditional statement, you could write it this way.
<style type='text/css'>
<?php include('ie.css');?>
</style>
In this case, the browser will simply replace <?php include('ie.css');?>
with all the text in ‘ie.css’, turning the stylesheet into inline styling! Yay!
WordPress Stuff
Of course, I was doing all of that hacking for the purpose of making a theme that any WordPress 1.5 user could simply plug in and use (called a “drop-in ready” theme). It took me a long time to find all the stuff I needed to find, so I decided to post it here for you.The biggest challenge was getting my stylesheets (namely ie.css) to be able to find the image files when the theme was dropped in to a folder that wasn’t pelled the same way as mine. The only way I could think of was using php commands (remember that php commands won’t work in stylesheets, so you’ll have to convert it to inline styling, demonstrated above)… but which ones ? To make a long story short, I found three commands that a WordPress 1.5 user needs to know about. They are:
<?php get_settings('siteurl');?>
(the root location. http://stevish.com/), <?php bloginfo('stylesheet_directory');?>
(Wherever the stylesheet is. wp-content/themes/stevish2-f/), and <?php bloginfo('template_directory');?>
(Wherever the templates are. wp-content/themes/stevish2-f/)
So with that information, instead of using src='http://stevish.com/wp-content/themes/stevish2-f/images/trans-tan.png')
, I would use src='<?php get_settings('siteurl');?><?php bloginfo('stylesheet_directory');?>/images/trans-tan.png'
. It’s a bit longer, but that way any WordPress user will be able to plug in the theme, and the php will spit out the correct url. If you’re wanting to add a second stylesheet to your WP 1.5 theme, and don’t know where to do it, look in ‘header.php’. All the stylesheet link stuff should be in there. If you have any questions, feel free to comment and I’ll try to answer them as quickly as possible.
Have fun!
March 24th, 2005 at 4:24 pm
Thanks for all the info! = )
Actually you can use php in stylesheets, you just need to change the name (or mess with apache) to end in
.php
and make sure when you link to it in yourhead
. Fun stuff!March 25th, 2005 at 12:06 am
Touché! Another reason Mr. Green is my favorite web designer.
March 25th, 2005 at 9:38 am
I have no idea what any of the above was talking about. Just wanted to use some big words of my own so people can think I’m smart too. I dont really know what they mean, so I cant really use them in a sentence, but the following are big words I know, which may or may not be spelled correctly: anomotpeia, antidisestablishmentarianism, cryptozoology, poignant, plethora, and elastodin.
November 10th, 2005 at 5:51 pm
Hey, I’ve been working with PNG’s and GIF’s for some time, and there is an alternative to PNG quality transperancy.
Make the PNG an animated .GIF, animated GIF’s are 32bit, so it has the same quality, but it isn’t effected by the alpha support problem in IE and IE based applications.
November 10th, 2005 at 5:56 pm
True, but can you have translucent images as gifs? I thought gifs have either color or transparency… not partially transparent color.
November 11th, 2005 at 10:06 am
Ah, I completely forgot about translucent images. Yeah, I havn’t been able to get a gif to be translucent, but there might be a way
Either way PNG is still the best for transperancy and translucent images, never said it wasn’t ;]
December 9th, 2005 at 5:08 pm
Ok I have a problem with this code. When I use it, it wont let my buttons or iframes or anything else work. For some reason the href links or my iframe is blocked. Coulde you guys help me out. You can view the site by clicking on my name.
Thanks
Nick