I also seem to run into these problems at the 11th hour. In any case, I have attached three screen shots and as you will notice, the header image is not aligning correctly with my page background in both IE7 and 6, along with Firefox on the PC. The screen shot that is correct is from Firefox 3.0 on my MAC. Since I develop on the MAC it is a bit frustrating when I go to test on the PC and come up with these issues. I know it's not a new problem for anyone, but nonetheless frustrating.
Hopefully someone has an idea of what I may be doing incorrectly here. I'm sure it is a simple oversight on my part, but I can't seem to locate the issue.
It looks like the problem is arising from your navigation bar varying in height depending on the browser.
This is what I try to do in cases like these:
Set all the different top and bottom paddings and margins to 0. Assign a height to the .top-navigation. That should make all of your browsers looking the same (even if they are all wrong, at least they are the same). Then you can add one margin or padding (or increase the .top-navigation height) to bring down the image until it lines up.
It will require a little bit of guess and checking to be perfect, but let me know how it goes, Ashton Sanders
Hey Ashton that worked! I was able to set everything from a top and bottom margin and padding perspective to zero and then work my way backwards. I am still having a bit of an issue with IE 6.0 on the image hover. When a user rolls over the image the spacing gets all out of whack under the top navigation. I think this is probably an easy fix once I dig a bit deeper.
Sorry about that. My hosting services were down for a couple of days. The site is back up now and I've got everything working just fine now but I can't figure out the hovering issue with IE6. Could you take a look again to see if you know what it may be?
Thanks Ashton. I have been combing through the code as well. Thanks for the tips on simplifying some of the code. I will definitely do this in hopes of making it easier to troubleshoot along with more efficiency. I'll keep checking back to see if you find anything.
I tried simplifying the css a bit based on your suggestions in the second example you supplied, however the hover now doesn't seem to be working in terms of the image changing its background-position. Any ideas of what I am doing wrong?
Never mind. Stupid me, it was something simple that I missed. But on a separate note, I still haven't been able to resolve the IE 6 issue. Any luck with this?
I don't have access to ie6 at the moment (actually it's Friday afternoon and I can't be bothered to boot up the pc ;) ) but I can offer a bit of educated guesswork if you're game.
I know that ie6 does have some issues with negative margins and you have a negative top margin on the np-consulting-header div. Thing is, you really don't need that margin at all. Try removing that and reducing the bottom padding on the top-navigation div by 2 pixels instead.
When you hover over the top navigation (one of the buttons) I am changing the image with a background-position class. This is working fine on all browsers except IE 6. On IE 6 when you hover over the button, while the image changes fine, the entire <div> for the top navigation pushes the header image down about 20px. Since I need this header to align with my image background it looks all out of whack. See the screen shot below.
Well I can't see anything that would obviously cause it. So the only thing I can suggest is a slightly different approach to achieve the same effect. You could be a little more specific in the css and a bit more general with your bg positions.
This definitely helps clean the css up a bit but I'm sorry to say I am still running into the same issue. It's almost as if the hover state has some sort of padding or margin associated with it that keeps pushing whatever is above it down. Very frustrating :evil: . So if you can thin of anything else let me know. Thanks again for trying.
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?
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.
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.
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.
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.
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.
Here is a link to the testing site:
http://www.corvairflair.com/np-consulting
Hopefully someone has an idea of what I may be doing incorrectly here. I'm sure it is a simple oversight on my part, but I can't seem to locate the issue.
Please defer to the attached screen shots.
[attachment=2]Firefox_MAC.png[/attachment]
[attachment=1]ie7.png[/attachment]
[attachment=0]firefox3_PC.png[/attachment]
Thanks You,
Mike
It looks like the problem is arising from your navigation bar varying in height depending on the browser.
This is what I try to do in cases like these:
Set all the different top and bottom paddings and margins to 0.
Assign a height to the .top-navigation.
That should make all of your browsers looking the same (even if they are all wrong, at least they are the same). Then you can add one margin or padding (or increase the .top-navigation height) to bring down the image until it lines up.
It will require a little bit of guess and checking to be perfect, but let me know how it goes,
Ashton Sanders
Edit:
I would do 70px height:
I really appreciate the help on this.
Thanks Again,
Mike
It sounds like you have an incorrect setting in a :hover somewhere. Your testing site changed, so I can't check it.
Sorry about that. My hosting services were down for a couple of days. The site is back up now and I've got everything working just fine now but I can't figure out the hovering issue with IE6. Could you take a look again to see if you know what it may be?
http://www.corvairflair.com/np-consulting
Thanks for all of your help,
Mike
I haven't found the source of the Hover problem in IE6, but here are some notes that may help in general:
You have this in your css file:
this is the same as:
You probably meant to do it like this:
Secondly, you have all this code:
which in this case is exactly the same as:
Keeping the code simplified can sometimes help with these kinds of problems. I'll look at it again in a bit
Thanks,
Mike
I tried simplifying the css a bit based on your suggestions in the second example you supplied, however the hover now doesn't seem to be working in terms of the image changing its background-position. Any ideas of what I am doing wrong?
Thanks
Mike
Thanks
Mike
I know that ie6 does have some issues with negative margins and you have a negative top margin on the np-consulting-header div. Thing is, you really don't need that margin at all. Try removing that and reducing the bottom padding on the top-navigation div by 2 pixels instead.
It should look like this:
.top-navigation {
height:53px;
padding:20px 41px 18px;
}
.np-consulting-header {
background:transparent url(../images/home/np-consulting-header.jpg) no-repeat scroll 0 0;
height:222px;
margin:0;
}
Thanks,
Mike
[attachment=0]IE6.jpg[/attachment]
Thanks,
Mike
.top-navigation {
height: 53px;
padding: 19px 43px;
}
.top-navigation ul li {
float: left;
text-align: center;
padding: 0 4px 0 0;
display: inline;
}
.top-navigation ul li a {
background-position: center top;
height: 50px;
text-indent: -9999px;
display: block;
}
.top-navigation ul li.home a {
background: url(../images/navigation/home.png) no-repeat;
width: 153px;
}
.top-navigation ul li.therapeutic-services a {
background: url(../images/navigation/therapeutic-services.png) no-repeat;
width: 263px;
}
.top-navigation ul li.program-development a {
background: url(../images/navigation/program-development.png) no-repeat;
width: 263px;
}
.top-navigation ul li.training-and-supervision a {
background: url(../images/navigation/training-and-supervision.png) no-repeat;
width: 263px;
}
.top-navigation ul li a:hover, .top-navigation ul li a#active {
background-position: center bottom;
}
It certainly won't break anything and it may just help.
Mike
You could try adding this:
.top-navigation ul li a:hover, .top-navigation ul li a#active {background-position:center bottom;
margin:0;
padding:0;
}
Thanks
Mike
.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;
}
This one definitely has me baffled.
Thanks
Mike
Let's nail the content-wrapper in place as well.
So now we have:
.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;
}
Mike
Mike
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.
Thanks Again,
Mike