Supersleight, or better?

JavaScript
1

Hola,

I’m tweaking the IE6 design of a page using some transparent pngs. Reading around, it seems there’s a lot of opinions about doing this correctly. I’m currently using the supersleight script, as it is a jQuery plugin and I understand that pretty well; however, I notice that background position fails. I get the same (top left) portion of the graphic on every button of the nav, rather than the positioning (shown below in my provided code).

Anyone with experience dealing with Supersleight and background positioning? Any tips? Or does anyone have a better system?

For your browsing interest, here’s the css involved in the positioning:

#nav {
	float: right;
	margin: 2.5em -124px 0 1em;
	padding: 0;
}
#nav li {
	margin: 0;
	padding: 0;
}
#nav a {
	display: block;
	padding: 0;
	margin: 0;
	width: 182px;
	height: 52px;
	background: url('../images/nav.png') top left no-repeat;
	text-indent: -999em;
}
#nav a, #nav a:hover {
	border: none;
}
#index a {
	background-position: -2px 0;
}
.index #nav li#index a {
	background-position: -362px 0;
}
.index #nav li#index a:hover, #nav li#index a:hover {
	background-position: -182px 0;
}
#gallery a {
	background-position: -2px -52px;
}
.gallery #nav li#gallery a {
	background-position: -362px -52px;
}
.gallery #nav li#gallery a:hover, #nav li#gallery a:hover {
	background-position: -182px -52px;
}
#pricing a {
	background-position: -2px -104px;	
}
.pricing #nav li#pricing a {
	background-position: -362px -104px;
}
.pricing #nav li#pricing a:hover, #nav li#pricing a:hover {
	background-position: -182px -104px;
}
#contact_us a {
	background-position: -2px -156px;
}
.contact_us #nav li#contact_us a {
	background-position: -362px -156px;
}
.contact_us #nav li#contact_us a:hover, #nav li#contact_us a:hover {
	background-position: -182px -156px;
}
#order a {
	background-position: -2px -208px;
}
.order #nav li#order a {
	background-position: -362px -208px;
}
.order #nav li#order a:hover, #nav li#order a:hover {
	background-position: -182px -208px;
}

and a link to supersleight

2

It might be a good idea to simplify the case to bare essentials and see if it works. If the background works as intended without the script in action then its most likely the script.

3

I think DD_BelatedPNG script is good alternative for Supersleight script.

4

And does belated png respect background position?

5

Ok…dumb statement…I see that’s its claim to fame. I’ll try it out and report back.

6

It’s working ok. The css is solid for sure, and I’ve dealt with the most obvious IE6 bugs, but I get weird spacing on my nav bar. I’ll be playing with positioning and such to try tweaking it.

If anyone is willing to take a peek, here’s the live site: countrybear

There, you can see it working correctly in any standards compliant browser, and what it currently looks like in IE6.

7

I believe the nav is broken in IE8 compatibility mode which is IE7 for the most part. The gap I believe has to do with having an inline element such as a turned in to a block inside a block level element such as li. Its a browser rendering bug.

8

Ah. Thanks…I’ll check it out. I’ve gotten a lot of it working now, but there’s those random gaps.

The gallery is having some IE issues too. Now I know the whole thing is validating at least. Getting there…

9

Ok…checked things out. I still can’t identify the gap problem. I tried playing around with different block/inline settings…etc, but couldn’t get much to work.

And my understanding of the CSS involved allows an element to be manipulated with display after the fact…as long as you used things validly in the first place. But that might mean setting off a browser bug.

I think I’ll give the CSS forum a shout-out.

10

I use pngfix with support for positioning and a little assistance from jQuery because once pngfix is applied hover effect is lost.

http://dfizz.com/menu

Works in IE 6,7, & 8, ff, chrome, safari and opera.