Cross-Browser Problems Once Again

[apostrophe]

Must admit I’m struggling here. :?

You could try adding this:

Code:

.top-navigation ul li a:hover, .top-navigation ul li a#active {
background-position:center bottom;
margin:0;
padding:0;
}

[miker1961]

Sorry. No dice. I too am struggling as I know this has been done before. Typically I’ve seen these images in one file though and through background positioning they move the entire image around. I have created separate graphics for each of the nav buttons and am only positioning up and down. Would this have anything to do with it?

Thanks
Mike

[apostrophe]

I can’t see that making a difference. I’ve never had this problem with navigation in ie6. I’ll sleep on it and have another go in the morning.

[apostrophe]

Ok, how about this?

Code:

.maincontainer {
height:auto;
margin:0 auto;
overflow:hidden;
padding:0;
position:relative;
width:1045px;
}

.np-consulting-header {
background:transparent url(../images/home/np-consulting-header.jpg) no-repeat scroll 0 0;
height:222px;
left:0;
position:absolute;
top:91px;
width:1045px;
}

.content-wrapper {
background:transparent url(../images/bg-page.png) repeat-y scroll center center;
left:0;
position:relative;
top:222px;
width:1045px;
}

[miker1961]

The header is now staying in position however the background graphic for the content-wrapper is now moving down on the hover state. Also the absolute positioning cuts off the bottom of the text on the main content. I originally set the height to auto but this doesn’t seem to have an impact on it now. I am going to change it back to what I originally had for now.

This one definitely has me baffled.

Thanks
Mike

[apostrophe]

I didn’t notice the cut-off because I’m on a large monitor, but that appears to be caused by the overflow:hidden on the main container, which you don’t really need anyhow.

Let’s nail the content-wrapper in place as well.

So now we have:

Code:

.maincontainer {
height:auto;
margin:0 auto;
padding:0;
position:relative;
width:1045px;
}

.np-consulting-header {
background:transparent url(../images/home/np-consulting-header.jpg) no-repeat scroll 0 0;
height:222px;
left:0;
position:absolute;
top:91px;
width:1045px;
}

.content-wrapper {
background:transparent url(../images/bg-page.png) repeat-y scroll center center;
left:0;
position:absolute;
top:313px;
width:1045px;
}

[miker1961]

OK this is whacky. When you hover the whole page moves down. So in essence the header is now lining up with the background image but when you hover the entire page shifts down about 10 pixels. So it seems to be getting closer but still weird. Also, on IE6 my footer is now not displaying. Thanks for digging into this.

Mike

[miker1961]

I was able to get the footer back. I just needed to move it into the content-wrapper div tag.

Mike

[apostrophe]

I was getting so frustrated with this I just booted up the pc (now I feel dirty, had to have a wash before I came back to the mac :roll: ) I’ve tested the page in ietester(6, 7 and 8), a standalone version of ie6, ie7 and ie8 and I don’t see any problems, no page shift on hover, nothing!

So now I really am at a loss. If you are still seeing a problem, about the only other thing I can suggest is, for ie6 only, you use 2 separate images for each nav link and replace the image on hover.

[miker1961]

Well if you’re not seeing the problem, I have no idea what is going on. Since it seems to be working on every other browser I’ve tested I may just put this one to bed. Thanks for taking the time to help troubleshoot. I think what code suggestions you’ve given have done the job.

Thanks Again,
Mike

[Author]

Posts