• Locked
5 replies [Last post]
Mon, 2010-01-18 20:37
nicholas.stephan
nicholas.stephan's picture
Offline
newbie
Last seen: 12 years 15 weeks ago
Timezone: GMT-8
Joined: 2010-01-07
Posts: 7
Points: 10

This has been dealt with a lot, so I'm sorry if this has already been answered.

I've got the following css: 

.pnav li {
	float: left;
	margin: 0px 16px;
	height: 7px;
	font-size:7px;
	line-height:7px;
	overflow:hidden;
}
 
.nav_home, .nav_portfolio, .nav_shop, .nav_press, .nav_news, .nav_about {
	background-image: url('../img/pnav.gif');
	text-indent: -9000px;
	background-repeat:no-repeat;
	cursor:pointer;
}
 
.nav_home { width: 31px; background-position: 0px 0px; }
.nav_home:hover, .nav_home.current { background-position: 0px -9px; }
 
.nav_portfolio { background-position: -64px 0px; width: 64px; }
.nav_portfolio:hover, .nav_portfolio.current { background-position: -64px -9px; }
 
.nav_shop { width: 29px; background-position: -161px 0px; }
.nav_shop:hover, .nav_shop.current { background-position: -161px -9px; }
 
.nav_press { width: 35px; background-position: -223px 0px; }
.nav_press:hover, .nav_press.current { background-position: -223px -9px; }
 
.nav_news { width: 86px; background-position: -289px 0px; }
.nav_news:hover, .nav_news.current { background-position: -289px -9px; }
 
.nav_about { width: 39px; background-position: -407px 0px; }
.nav_about:hover, .nav_about.current { background-position: -407px -9px; }

pretty standard stuff right?

But it DOESN'T WORK IN IE6!!!! Angry All the li's are fine in their rest state. But hover doesn't react at all, and .current puts the background-position at 0px 0px... Puzzled , which seems a bit odd.

Can anybody spot where I've gone wrong?

Thanks

Top
Tags:
Mon, 2010-01-18 21:14
#1
CupidsToejam
CupidsToejam's picture
Offline
Guru
Florida
Last seen: 6 years 35 weeks ago
Florida
Timezone: GMT-4
Joined: 2008-08-15
Posts: 2637
Points: 1556

IE6 doesnt support it

IE6 doesnt support it

Top
Mon, 2010-01-18 23:37
#2
nicholas.stephan
nicholas.stephan's picture
Offline
newbie
Last seen: 12 years 15 weeks ago
Timezone: GMT-8
Joined: 2010-01-07
Posts: 7
Points: 10

I thought background-position

I thought background-position was supported all the way back to 5.5!! -- http://reference.sitepoint.com/css/background-position

That sucks

Top
Mon, 2010-01-18 23:46
#3
nicholas.stephan
nicholas.stephan's picture
Offline
newbie
Last seen: 12 years 15 weeks ago
Timezone: GMT-8
Joined: 2010-01-07
Posts: 7
Points: 10

I've put together a demo at

I've put together a demo at nicholasstephan.com/huh that shows this. I see this sprite method all over the place. Is everyone just dropping IE6 then?

Top
Mon, 2010-01-18 23:55
#4
Verschwindende
Verschwindende's picture
Offline
Guru
Last seen: 18 weeks 2 days ago
Timezone: GMT-5
Joined: 2009-10-09
Posts: 2050
Points: 2282

nicholas.stephan wrote:I

nicholas.stephan wrote:

I thought background-position was supported all the way back to 5.5!! -- http://reference.sitepoint.com/css/background-position

He meant IE6 doesn't support :hover on anything other than <a>

nicholas.stephan wrote:

I've put together a demo at nicholasstephan.com/huh that shows this. I see this sprite method all over the place. Is everyone just dropping IE6 then?

Vhhhh, doctype? Even with IE6 still doesn't support :hover properly.

Top
Tue, 2010-01-26 23:27
#5
nicholas.stephan
nicholas.stephan's picture
Offline
newbie
Last seen: 12 years 15 weeks ago
Timezone: GMT-8
Joined: 2010-01-07
Posts: 7
Points: 10

Found a cool little fix for

Found a cool little fix for this:

/* to fix background image flickering in IE */
html {
  filter:expression(
    document.execCommand("BackgroundImageCache", false, true)
  );
}
 
/* to make :hover's, :active's and :focus's work in IE */
body {
   behavior: url("csshover3.htc");
}

that csshover3.htc file I found at: http://www.xs4all.nl/~peterned/csshover.html, a project called Whatever:hover.

pretty sweet.

someone needs to take that browser out back and shoot it.

Thanks

Top
  • Locked