Avatar of addmarketing
addmarketing

asked on 

Alpha Image loader repeat and top left

I'm trying to get a star rating script working using a png file the htc fix gives me error messages and doesn't do what I want it to do because it eliminates position and and makes it where nothing is click able not counting the JavaScript alert that comes up. So im attempting to use the alpha image loader but I cant get the background position to repeat or goto top left. Anyone try this yet? Or a css star rating script using a transparent png thats compat with ie6 might work as well.
<style type="text/css">
	/*             styles for the star rater                */	
	.star-rating{
		list-style:none;
		margin: 0px;
		padding:0px;
		width: 150px;
		height: 30px;
		position: relative;
		background-repeat: top left repeat-x;
 
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='images/star_rating.png', enabled=true, sizingMethod='image');
 
            
	/*	background: url(images/star_rating.png) top left repeat-x;		*/
	}
	.star-rating li{
		padding:0px;
		margin:0px;
		height:30px;
		width: 30px;		
		/*\*/
		float: left;
		/* */
	}
	.star-rating li a{
		display:block;
		width:30px;
		height: 30px;
		line-height:30px;
		text-decoration: none;
		text-indent: -9000px;
		z-index: 20;
		position: absolute;
		padding: 0px;
		overflow:hidden;
	}
	.star-rating li a:hover{
		background: url(images/star_rating.png) left center;
		z-index: 2;
		left: 0px;
		border:none;
	}
	.star-rating a.one-star{
		left: 0px;
	}
	.star-rating a.one-star:hover{
		width:30px;
	}
	.star-rating a.two-stars{
		left:30px;
	}
	.star-rating a.two-stars:hover{
		width: 60px;
	}
	.star-rating a.three-stars{
		left: 60px;
	}
	.star-rating a.three-stars:hover{
		width: 90px;
	}
	.star-rating a.four-stars{
		left: 90px;
	}	
	.star-rating a.four-stars:hover{
		width: 120px;
	}
	.star-rating a.five-stars{
		left: 120px;
	}
	.star-rating a.five-stars:hover{
		width: 150px;
	}
	.star-rating li.current-rating{
		background: url(images/star_rating.png) left bottom;
		position: absolute;
		height: 30px;
		display: block;
		text-indent: -9000px;
		z-index: 1;
	}
	/* remove halo effect in firefox   */
	a:active{
		outline: none;
	}		
</style>

Open in new window

CSSHTML

Avatar of undefined
Last Comment
mreuring
Avatar of sedward5
sedward5

It's confused because background repeat doesn't know what to do with top left. Try this:
background-position: top left;
background-repeat: repeat-x;

Open in new window

Avatar of addmarketing
addmarketing

ASKER

I tried it and still no love :( I get image with 3 stars on it, the rest of the stars should hide underneath should hide and it should repeat x
	.star-rating{
		list-style:none;
		margin: 0px;
		padding:0px;
		width: 150px;
		height: 30px;
		position: relative;
		background-position: top left;
		background-repeat: repeat-x;
 
 filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
            src='images/star_rating.png', enabled=true, sizingMethod='image');
 
            
	/*	background: url(images/star_rating.png) top left;		*/
	}

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of mreuring
mreuring
Flag of Netherlands image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
HTML
HTML

HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.

62K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo