Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Template CSS/Javascript Issues WordPress


I'm developing a CSS template for use with a Wordpress website. I'm almost done with it, but there are a couple issues that are driving me up the wall. If you can help me clean a couple of them up I'll give you the reward, thanks.

Here's the link: [[LINK href=""]][[/LINK]]

<strong>Issue 1: Navigation IE6&7</strong>
My main navigation is being killed by IE6&7. I'm having trouble getting the subnav that pops open to appear over the rest of the content. I've been trying to read up on IE6 z-index issues, but nothing seems to work for me. There is also an issue where a strange gap appears underneath each li on the main navigation in IE6, I have no idea which element is causing it. Help me clean up those two issues and its worth $40 of the prize money.

<strong>Issue 2: Footer Javascript</strong>
I'm trying to always position the footer at the bottom. I tried some CSS techniques, but I felt that a jQuery solution would improve it. Right now the jQuery switches it between relative and absolute positioning based on the height of the browser. It's almost working. There's a small miscalculation going on (in all browsers) when the browser is just barely high enough to need to change to absolute positioning. Then, also in IE6, if the page is too high, the absolute positioning is off completely in the center of the page. This is worth $20 of the prize money.

Thanks, let me know if you have questions.

Answers (4)


idt answers:

For issue #1: if you could add an inlinde z-index say 100 to the main li on hover then that would certainly fix it at least for IE7(haven't tried on IE6).

Another method would be via css if you determine the classes used for those menu beforehand as what you have now. Example for your current setup:

li.product1 {z-index: 1000;}
li.product2 {z-index: 999;}
li.product3 {z-index: 998;}
li.product4 {z-index: 997;}
li.product5 {z-index: 996;}{z-index:995}

Adding just z-index to the li won't work because all of them would just have the same z-index and would still cover the upper menu. The upper li needs to have at least 1 z-index value more than the li below it.

That's not probably the ideal solution for you but try it out so you get an idea on what you need to do depending on your script.

idt comments:

Also, you would need to add z-index to your sidebar so that for example you're on the training page, the hover will not display behind the image on that page.

#navsidebar{z-index: 1000;}

idt comments:

For item #2, have you tried adding
<div style="clear:both"></div>
just below the #mainarea div?

Jesse Sutherland comments:

Hey idt, thanks for your suggestions, unfortunately it only cleaned up the IE7 version, the IE6 version looks only a little better. I posted a duplicate with your changes here:

idt comments:

Unfortunately I don't have IE6 to test the issue out. Can you please attached a screen shot of the IE6 issue?

Can you also try setting the z-index for #navsidebar to a value lower than the li z-index, 500 for example?


idt comments:

Ok, was able to find an IE6 browser and able to test the IE6 issue. The z-index fix I gave was working well. In IE6 though #navsidebar has an overflow-x:hidden style and that's causing the issue. It's not in and any other browsers but removing that should have the hover items display properly on the top of the elements on the right. If you added that specifically for IE6 then you may need to adjust that.

idt comments:

The overflow-x: hidden style is from your ie.css style.

idt comments:

For item #2, as per your original post
<blockquote>Right now the jQuery switches it between relative and absolute positioning based on the height of the browser.</blockquote>

Looking on the style of the footer on a page where I can replicate the issue you have above:, the footer was actually given position:static not relative. That probably is the reason. Setting it to position:relative and left: 0 fixed the issue.

Can you please try that out?



Jesse Sutherland comments:

Thanks idt, I'm finally getting somewhere.

<strong>Issue 1:</strong>
Mostly cleaned up, the overflow-x:hidden was really throwing me off. Didn't even think to look for that property in the Blueprint styles. Thanks! However, I still can't seem to get rid of that annoying bottom space when you hover over nav element. The only clue I have is that its somewhere in the LI, not the A. I've tried specifically changing the height, line-height, padding-bottom, and margin-bottom. Any other ideas?

<strong>Issue 2:</strong>
Thanks for catching the static thing, probably should have been relative the whole time. Unfortunately that didn't fix it, but adding a specific left:0px did. Now the only remaining issue is with all browsers it doesn't apply the style until too late? As you drag the window down there seems to be a gap between when it changes between relative and absolute.

idt comments:

For item #2, try removing the height: 45px from the #footer. If that works, then you just have to manipulate the content of the footer div to achieve the same effect as when it had the height attribute.

Jesse Sutherland comments:

I think I generally figured out what the problem is for the footer. When the footer is absolutely positioned, it is not part of the document height. When it is relatively positioned, it is part of the document height. How could I rewrite that if statement to get around this?

// Position footer depending on window height
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $("#footer");
function positionFooter() {
footerHeight = $footer.height();
footerWidth = $(window).width();
footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
//alert('Footer top is ' + footerTop);
if ( ($(document.body).height()) < $(window).height()) {
'position': 'absolute',
'bottom': '0px',
'width': '' + footerWidth + 'px'
} else {
'position': 'relative',
'bottom': '',
'width': ''


idt comments:

Since by default your footer is set to absolute I think you can just subtract footer height with document height. So please try this, replace this line:

if ( ($(document.body).height()) < $(window).height()) {

with this

if ( ($(document.body).height()-footerHeight) < $(window).height()) {

Jesse Sutherland comments:

Okay, I think I'm happy with the footer. Any ideas on the extra space in the navigation on IE6?

idt comments:

Hi Jesse,

No idea yet. Still looking...


idt comments:

I suspect it is in your li.sfHover style. Can you please try adding margin-bottom: 0 and padding-bottom:0 style to li.sfHover?

Jesse Sutherland comments:

I'm awarding the money to you because you were the most helpful, though I'm disappointed that not very many of my problems were solved.

Jesse Sutherland comments:

Cool, I appreciate your help. I updated the site with your code, but it still acts the same way, unfortunately.


Pippin Williamson answers:

For the first issue, in regards to the z-indexing issue, try adding this to your style.css:

.nav li {
z-index: 9999;


Pau answers:

<strong>on the issue #1:</strong>

try adding this in your css

#navsidebar {
#navsidebar .nav ul {

<strong>on the issue #2:</strong>

you need to get your footer height using jquery then using jquery to modify the main container css by adding margin-bottom equal to the height of the footer and your footer should be position absolute with a value of 0 to bottom


Ali Hussain answers:

seems the footer sticks to bottom now if it still doesn't try the following css fix.
thie below goes in the css file</strong>

.wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -60px; /* the bottom margin is the negative value of the footer's height */

.footer, .push {
height: 60px; /* .push must be the same height as .footer */

.footer {
width: 100%;

<strong>html file</strong>
<div class="wrapper">
your content all above the footer
<div class="push"></div>
<div class="footer">footer stuff