Shiba WordPress Theme Release 2.1 - IE6 Compatibility

What?! Another theme release already?

Usually I would wait – but this one is a compatibility release. After much hair pulling, kicking, and banging my head against the monitor, …

the Shiba WordPress Theme is now tested and compatible with IE-6, IE-7, IE-8, and FireFox.

There could still be layout weirdness here and there, so please report any bugs that you see to me. Your help with bug squashing will be greatly appreciated.

The two key issues with making the theme work with IE-6 are -

1. Layout

There are very many layout bugs in IE-6 and they appear most often when you are using floating containers.

Most of these issues were solved by doing the hasLayout bug fix (e.g. adding a zoom:1; to the containers).

Others were solved by careful setting of the right container widths. Make sure to insert conditionals into your WordPress theme so that you only generate these additional fixes for IE-6 and don’t complicate your theme in other instances.

2. Transparent PNGs

The Shiba WordPress Theme relies heavily on the use of transparent PNGs. Some of these options are turned off for IE-6 because it does not support repeating transparent PNGs.

Single transparent PNGs are enabled by using the non-standard MS filter command in your CSS file. Below are some examples for setting a transparent PNG background and a transparent PNG image for IE-6.

This is what I used for setting a transparent PNG background. The code goes in your WordPress theme functions.php file -

<?php
if (IS_IE6) :
?>
	.widget_search #searchsubmit {
		background: none;
		filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='<?php echo get_bloginfo('url');?>/wp-content/themes/shiba/images/sbutton2.png', sizingMethod='fixed');
	}
<?php
endif;
?>

This is what I used for setting a transparent PNG image -

<?php
$img_file = 'blah.png';
?>
    <div class="comment-img"
    	<?php if (IS_IE6)
			echo "style=\"filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" . $img_file . "', sizingMethod='fixed'); padding-top:200px;\"";
		?>
    >
    	<img src='<?php echo  $img_file;?>' width="200" height="200"/>
    </div>
<?php
?>

3. Check for IE-6

You will also need a function to check for the client browser type.

<?php
function is_ie($version='6')
{
    $version_str = 'MSIE ' . $version;
    if (isset($_SERVER['HTTP_USER_AGENT']) && 
    (strpos($_SERVER['HTTP_USER_AGENT'], $version_str) !== false))
        return true;
    else
        return false;
}
 
define('IS_IE6', is_ie('6'));
?>

If you don’t have to, you really don’t want to muck with IE6 compatibility theme issues. Just find a WordPress theme that is already pre-tested with old versions of Internet Explorer.

In this way you only need to worry about IE6 compatibility for your own add-ons, which will result in less hair loss and head trauma.

Related Articles

<< Previous Next >>

Shiba WordPress Theme Release 1.8

Shiba WordPress Theme 1.8 now supports a variety of blog background effects and comment threading! Here are the key features added to theme 1.8 - Comment threading and number of comments. If you go to Settings >> Discussion on your WordPress dashboard (release 2.7+), you can set whether to allow comment threading, as well as the number of comments...

<< Previous Next >>

Shiba WordPress Theme Release 2.0

Shiba WordPress Theme Release 2.0 includes some new styling capabilities. We now have styled excerpts for all multi-post pages, as well as a styled WordPress search widget. Here are the key new features for Shiba 2.0 - 1. Styled Excerpts All multi-post pages (e.g. blog front-page, category page, search page) will feature nicely styled blog...

<< Previous Next >>

Shiba WordPress Theme Release 2.4

Shiba WordPress Theme Release 2.4 gives you greater flexibility in customizing your theme images. 1. Custom Thumbnail Support The Shiba WordPress Theme now supports custom post thumbnails (introduced in WordPress 2.9). You can set a post thumbnail while in your Edit Post screen. This thumbnail will be used while showing your post excerpts...

<Playback Stop Play >

Shiba WordPress Theme Release 1.8

Shiba WordPress Theme Release 2.0

Shiba WordPress Theme Release 2.4