Template CSS/Javascript Issues WordPress

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:

http://www.jessesutherland.com/downloads/ie6problem2/

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?

Thanks!

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: http://www.jessesutherland.com/downloads/ie6problem2/training.html, 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?

Thanks!

idt

Jesse Sutherland comments:

Thanks idt, I'm finally getting somewhere.

http://www.jessesutherland.com/downloads/ie6problem2/

<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?

$(document).ready(function(){
// Position footer depending on window height
$(window).bind("load", function() {
var footerHeight = 0,
footerTop = 0,
$footer = $("#footer");
positionFooter();
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()) {
$footer.css({
'position': 'absolute',
'bottom': '0px',
'left':'0px',
'width': '' + footerWidth + 'px'
})
} else {
$footer.css({
'position': 'relative',
'bottom': '',
'left':'0px',
'width': ''
})
}
}
$(window)
//.scroll(positionFooter)
.resize(positionFooter)
});

});

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

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.