Форум Сайтостроение Веб-строительство

В Firefox съезжают изображения спрайта

D
На сайте с 01.02.2010
Offline
75
Demcheg
667

Сделал иконки спрайтом, во всех браузерах (даже в IE) отображается нормально, в Firefox съезжают. Если классу idea-icon дописываю "margin-top: -23px" - съезжает во всех браузерах, в FF становится нормально:

Подскажите, пожалуйста, в чем может быть проблема?

CSS: 

.idea-icon{

	width: 30px;

	height: 30px;

	background: url("../images/idea-icons.png") no-repeat;

    position: absolute;

}



.auto .idea-icon{

	background-position: -156px -31px ;

}



.auto a:hover .idea-icon{

	background-position: -125px -31px ;

}



.building .idea-icon{

	background-position: -125px -31px ;

}



.education .idea-icon{

	background-position: -94px -31px ;

}



.factory .idea-icon{

	background-position: -63px -31px ;

}



.fun .idea-icon{

	background-position: -31px -31px ;

}



.home .idea-icon{

	background-position: 0 -31px ;

}



.hotel .idea-icon{

	background-position: -188px -31px ;

}



.misc .idea-icon{

	background-position: -219px -31px ;

}



.pills .idea-icon{

	background-position: -219px 0;

}



.realty .idea-icon{

	background-position: -188px 0;

}



.restaurant .idea-icon{

	background-position: -156px 0;

}



.retail .idea-icon{

	background-position: -125px 0;

}



.service .idea-icon{

	background-position: -94px 0;

}



.technology .idea-icon{

	background-position: -63px 0;

}



.travel .idea-icon{

	background-position: -31px 0;

}



.vending .idea-icon{

	background-position: 0 0;

}



#category-ideas {

}



#category-ideas > ul {

    list-style: none outside none;

    font-size: 16px;

    margin:0 0 0 1em;

}



#category-ideas > ul > li {

    height: 2.25em;

}



#category-ideas > ul > li > a {

    color: #0867b9;

    padding: 0 0 0 40px;

    vertical-align: -7px;

}



#category-ideas > ul > li > a:hover {

    text-decoration: none;

    color: #228b22;

    font-weight: bold;

}

HTML: 

<div class="block" id="category-ideas">

<h4 class="btl">Бизнес идеи по разделам</h4>

	<ul>

        <li class="auto"><a href="/biznes-idei/avtobiznes/"><div class="idea-icon"></div>Автобизнес</a></li>

        <li class="vending"><a href="/biznes-idei/vending/"><div class="idea-icon"></div>Вендинговый бизнес</a></li>

        <li class="hotel"><a href="/biznes-idei/hotels/"><div class="idea-icon"></div>Гостиничный бизнес</a></li>

        <li class="home"><a href="/biznes-idei/home-business/"><div class="idea-icon"></div>Домашний бизнес</a></li>

        <li class="pills"><a href="/biznes-idei/medicine/"><div class="idea-icon"></div>Медицина и здоровье</a></li>

        <li class="realty"><a href="/biznes-idei/realty/"><div class="idea-icon"></div>Недвижимость</a></li>

        <li class="education"><a href="/biznes-idei/education/"><div class="idea-icon"></div>Образование</a></li>

        <li class="travel"><a href="/biznes-idei/rest/"><div class="idea-icon"></div>Отдых и туризм</a></li>

        <li class="factory"><a href="/biznes-idei/manufacture/"><div class="idea-icon"></div>Производство</a></li>

        <li class="fun"><a href="/biznes-idei/fun/"><div class="idea-icon"></div>Развлечения</a></li>

        <li class="misc"><a href="/biznes-idei/misc/"><div class="idea-icon"></div>Разное</a></li>

        <li class="restaurant"><a href="/biznes-idei/restaurant/"><div class="idea-icon"></div>Ресторанный бизнес</a></li>

        <li class="building"><a href="/biznes-idei/building/"><div class="idea-icon"></div>Строительство</a></li>

        <li class="technology"><a href="/biznes-idei/technologies/"><div class="idea-icon"></div>Технологии и разработки</a></li>

        <li class="retail"><a href="/biznes-idei/trading/"><div class="idea-icon"></div>Торговля</a></li>

        <li class="service"><a href="/biznes-idei/services/"><div class="idea-icon"></div>Услуги</a></li>

	</ul>

</div>
LovelAss
На сайте с 05.06.2009
Offline
96
LovelAss
#1

Попробуйте добавить top: 0; к классу .idea-icon, а лучше уберите дивы оттуда и добавьте бэкграунд к пунктам списка li. Ибо блочные элементы внутри строчных - это зло! Учитесь верстать правильно.

D
На сайте с 01.02.2010
Offline
75
Demcheg
#2
LovelAss:
Попробуйте добавить top: 0; к классу .idea-icon, а лучше уберите дивы оттуда и добавьте бэкграунд к пунктам списка li. Ибо блочные элементы внутри строчных - это зло! Учитесь верстать правильно.

Увы, не сработало - вообще пропали картинки.

Получилось с такими изменениями:

#category-ideas > ul > li > a {
    color: #0867b9;
}

.idea-icon {
    background: rgba(0, 0, 0, 0) url("../images/idea-icons.png") no-repeat scroll 0 0;
    display: inline-block;
    height: 30px;
    margin: 0 10px 0 0;
    vertical-align: middle;
    width: 30px;
}

П.С. Да, я вообще профан в верстке( И мне надо сделать так, чтобы кликабельной была и картинка, и текст, при этом - это не должны быть две ссылки на одну и ту же страницу.

[DLE] как сделать изображения Текст на фото Помогите с яваскриптом
LovelAss
На сайте с 05.06.2009
Offline
96
LovelAss
#3
Demcheg:
И мне надо сделать так, чтобы кликабельной была и картинка, и текст, при этом - это не должны быть две ссылки на одну и ту же страницу

Добавьте ссылкам display: block; или бэкграунд и padding-left, а также пропишите line-height. Вариантов реализации масса, а то что сотворили вы - неправильно, отсюда и проблемы.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий