Someday, us developers will not need to worry about IE6 fixes…but until that day comes we all must suffer!

Anyways, if you are using a superfish menu in Joomla then you may have noticed that in IE6, you can’t see the vertical drop-down menu because it is being covered up by the main content of the page. Turns out this is called the Z-Index Bug, which is only associated with IE6 and IE7. Awesome.

The FIX:

If your HTML looks something like this:

1
2
3
4

<div id="header">
<div id="nav" class="sf-menu">Here the menu</div>
</div>
<div id="content">Here the content</div>

Then you should add the following CSS to each of these elements:

1
2
3
4
5
6

#header {
    z-index:2;
}
#content {
    z-index:1;
}

This ensures that the entire header div, which contains the superfish menu, has a z-index that is greater than the main content div, which was overlapping the drop-down menu. Worked for me!

This is usually occurs when there is an embedded youtube video and a Lightbox gallery on the same page. The flash video player will jump above the Lightbox images. You’d think that changing the z-index of elements would fix this but, nope.

The way to fix this problem is with a couple of additions to the Object and Embed tags used when embedding the youtube video.

The Fix:

Add the following code after the Object tag

1

<param name="WMode" value="transparent"></param>

And add the following code just before the type=”application/x-shockwave-flash”

1

wmode="transparent"

Together it should look something like this:

1
2

<object width="300" height="220"><param name="WMode" value="transparent"></param><param name="movie" value="http://www.youtube.com/v/NnMgg4nygSY&hl=en&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed wmode="transparent" src="http://www.youtube.com/v/NnMgg4nygSY&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="300" height="220"></embed></object>

Take it easy, this is actually a pretty easy fix.

Basically the functions involved with paging are using a global variable called $wp_query. When we create our own instantiation of WP_Query ( the object $wp_query is an instance of ), we don’t have this global variable which is why paging is not working.

SO…

Add the following code directly above the main while loop:

1
2
3
4
5
6

<?php
$temp = $wp_query;
$wp_query= null;
$wp_query = new WP_Query();
$wp_query->query('showposts=5'.'&paged='.$paged);
?>

Also change this:

1

<?php while (have_posts()) : the_post(); ?>

To this:

1

<?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>

So it all together should look something like this:

1
2
3
4
5
6
7
8
9
10

...
	<?php if (have_posts()) :
             $temp = $wp_query;
             $wp_query= null;
             $wp_query = new WP_Query();
             $wp_query->query('showposts=5'.'&paged='.$paged);
         ?>
	 <?php while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
...