IE issue i've never seen. Background PNG image moving up 1px on hover.

http://jeffsimpsonphoto.com/

If you looks at the main header links (read, wedding, engagement, kudos, etc.) in IE they seem to have this ugly 'shadow' on mouse hover. There is definitely something off in my code. I just need each 'link' to move up 1px, it works fine in FF.

Any ideas?

Code is this:

#nav {
	width: 965px;
	height: 57px;
	position: absolute;
	left: 0;
	bottom: 0;
	background-image: url(../images/nav_bg.png);
	background-repeat: no-repeat;
	background-position: 0 0;
}

#nav li {
	float: left;
	margin: 0 51px 0 0;
}

#nav ul {
	margin: 24px 0 0 66px;;
	padding: 0;
}



.nav1 {
	display: block;
	width: 37px;
	height: 11px;
	background-image: url("http://jeffsimpsonphoto.com/images/read.png");
	background-repeat: no-repeat;
	background-position: 0 1px;
}

Code (markup):

ty!!

 

it's your css:


In all navs you have:

	background-position: 0 1px;

Code (markup):

On the hover you have:

	background-position: 0 0px;

Code (markup):

So there's your one pixel...... Change the navs to 0 0 or the hover to 0 1px

Cheers!~

 

I think it's the support for opacity PNG format issue for IE.

Did you try, msfilter for IE, i think you need to add

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

Code (markup):

to the class in your css.

alternatively, there is hack; a image behavior is added to the css and which makes sure PNG images are tranparent for iE 6 and IE browsers. May be you can give a try http://bjorkoy.com/2007/04/the-easiest-way-to-png/

 

For image quality, ==^ above is correct.... But the 1 pixel is because of the stylesheet. The image quality is displaying differently in Chrome, IE, Opera and FF because the output of the png isn't so hot...

Cheers!~

 

Hmm, well i'm using IE8.. it shouldn't need any PNG hack right?

The image displays correctly, up until you hover over it. So it's rendering fine.. up until that point. i DO want the image to move up by 1px.

thanks for the help thus far

 

I fixed it. for some reason there was a 50% opacity applied to the hover... oops

 

You know, I am so sorry - I completely brain farted on this one and misread your original post......... Sorry!!! ugh...