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!

This entry was posted on Thursday, March 24th, 2005 at 3:19 pm and is filed under Web Design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.