Рейтинг краткой и полной новости разползается.

[-=Kostya=- 0]

Захотел сменить картинку звёздочек рейтинга.

1. Нарисовал 3 звёздочки и запихнул их в изображение 10х30 —

2. Отредактировал CSS:

/*Рейтинг*/

.rating {

		color: #666666;

		font-family: Tahoma, helvetica, sans-serif;

		font-size: 11px; 

		width: 50px;

		height: 10px;

	}

	.unit-rating{

		list-style:none;

		margin: 0px;

		padding:0px;

		width: 50px;

		height: 10px;

		position: relative;

		background: url('../dleimages/rating.gif') top left repeat-x;		

	}


	.unit-rating li{

		text-indent: -90000px;

		padding:0px;

		margin:0px;

		float: left;

	}

	.unit-rating li a{

		display:block;

		width:10px;

		height: 10px;

		text-decoration: none;

		text-indent: -9000px;

		z-index: 17;

		position: absolute;

		padding: 0px;

	}

	.unit-rating li a:hover{

		background: url('../dleimages/rating.gif') left center;

		z-index: 2;

		left: 0px;

	}

	.unit-rating a.r1-unit{left: 0px;}

	.unit-rating a.r1-unit:hover{width:10px;}

	.unit-rating a.r2-unit{left:10px;}

	.unit-rating a.r2-unit:hover{width: 20px;}

	.unit-rating a.r3-unit{left: 20px;}

	.unit-rating a.r3-unit:hover{width: 30px;}

	.unit-rating a.r4-unit{left: 30px;}	

	.unit-rating a.r4-unit:hover{width: 40px;}

	.unit-rating a.r5-unit{left: 40px;}

	.unit-rating a.r5-unit:hover{width: 50px;}

	.unit-rating li.current-rating{

		background: url('../dleimages/rating.gif') left bottom;

		position: absolute;

		height: 10px;

		display: block;

		text-indent: -9000px;

		z-index: 1;

}

Смотрю результат и очень огорчаюсь.

Уже и так и сяк пробовал, но всё равно не правильное отображение идёт. Помогите пожалуйста.

Сайт http://datalife-engine.net / лицензия куплена.

[celsoft 6 076]

engine/modules/functions.php

$rating = $rating * 17;

17 это пикселей в ширину поменяйте в двух местах на 10 ну и незабудьте кеш очистить.

[-=Kostya=- 0]

Сменил.

На изображении, сверху-вниз - Рейтинг выставлен / при наведении курсором / не выставлен

http://datalife-engine.net/functions.rar

/*Рейтинг */

.ratxt {font-size:11px; color:#1f2126;}

.rating {color:#1f2126; font-family:Arial, Helvetica, sans-serif; font-size:13px; width:50px; height:10px;}

.unit-rating{list-style:none; margin: 0px; padding:0px; width: 50px; height: 10px; position: relative; background: url('../dleimages/rating.gif') top left repeat-x;}

.unit-rating li{text-indent: -90000px; padding:0px;	margin:0px;	float: left;}

.unit-rating li a{display:block; width:10px; height: 10px; text-decoration: none; text-indent: -9000px;	z-index: 17; position: absolute; padding: 0px;}

.unit-rating li a:hover{background: url('../dleimages/rating.gif') left center;	z-index: 2;	left: 0px;}

.unit-rating a.r1-unit{left: 0px;}

.unit-rating a.r1-unit:hover{width:10px;}

.unit-rating a.r2-unit{left:10px;}

.unit-rating a.r2-unit:hover{width: 20px;}

.unit-rating a.r3-unit{left: 20px;}

.unit-rating a.r3-unit:hover{width: 30px;}

.unit-rating a.r4-unit{left: 30px;}	

.unit-rating a.r4-unit:hover{width: 40px;}

.unit-rating a.r5-unit{left: 40px;}

.unit-rating a.r5-unit:hover{width: 50px;}

.unit-rating li.current-rating{background: url('../dleimages/rating.gif') left bottom; position: absolute; height: 10px; display: block; text-indent: -9000px; z-index: 1;}

shortstory.tpl

<table><tr><td class="nts">{date}&nbsp;[edit]<img src="{THEME}/images/edit.png" title = "Редактировать новость" border="0">[/edit] {favorites}</td><td class="ntl">{author}</td><td class="ntl">[com-link]Комментарии: {comments-num}[/com-link]</td><td class="ntl">{rating}</td></tr></table>


+


CSS shortstory.tpl


.nts, .ntl {border:1px solid #ededed; padding:4px 7px 4px 7px; font-size:11px; color:#1f2126;}

.ntl {border-left:none;}

В Опере 9.24 и IE7 аналогичная ситуация, в Firefox всё нормально. Кеш Оперы и IE чистил.

Помогите пожалуйста разобраться, где собака зарыта.