Проблема с div-ссылкой в Firefox

bems · November 30, 2010

Суть такова. Делаем портал на php с одним человеком. Дизайн разработал я, а верстал он. Но мы оба не профессионалы в этом деле и так как я пользуюсь браузером Firefox, а он - Opera, то у нас сразу выяснилось много проблем. И вот одна из них, которую мы просто наглухо не можем решить.

Дело вот в чём. Разрабатываем топ юзеров, ну блок такой сбоку. Выглядит он примерно так:

При наведении курсора на каждый блок он весь как ссылка отображаться должен. То есть не только на текст ника или аватарку, а вообще ка каждый отдельный блок курсор наводишь, он цвет немного меняет и как ссылка отображается. Их CSS таков:

	.usertop-block-0 {
		font-family: tahoma, verdana, arial, sans-serif, Lucida Sans;
		font-size: 12px;
		color: #3e3e3e;
		display: block;
		padding: 0px;
		background-color: #cecece;
		border-top: 1px solid #ededed;
		border-bottom: 1px solid #868686;
		border-left: 1px solid #ededed;
		border-right: 1px solid #868686;
		text-decoration: none;
		margin: 0px;
	}
	.usertop-block-0:hover {
		font-family: tahoma, verdana, arial, sans-serif, Lucida Sans;
		font-size: 12px;
		color: #3e3e3e;
		display: block;
		padding: 0px;
		background-color: #dcdcdc;
		border-top: 1px solid #ededed;
		border-bottom: 1px solid #868686;
		border-left: 1px solid #ededed;
		border-right: 1px solid #868686;
		text-decoration: none;
	}

	.usertop-block-1 {
		font-family: tahoma, verdana, arial, sans-serif, Lucida Sans;
		font-size: 12px;
		color: #3e3e3e;
		display: block;
		padding: 0px;
		background-color: #b4b4b4;
		border-top: 1px solid #ededed;
		border-bottom: 1px solid #868686;
		border-left: 1px solid #ededed;
		border-right: 1px solid #868686;
		text-decoration: none;
		margin: 0px;
	}
	.usertop-block-1:hover {
		font-family: tahoma, verdana, arial, sans-serif, Lucida Sans;
		font-size: 12px;
		color: #3e3e3e;
		display: block;
		padding: 0px;
		background-color: #c2c2c2;
		border-top: 1px solid #ededed;
		border-bottom: 1px solid #868686;
		border-left: 1px solid #ededed;
		border-right: 1px solid #868686;
		text-decoration: none;
	}

Ну 1 и 0 отличаются только по цвету как идут - светло серый - темно серый. Теперь сам html код вывода таков:

<a style="text-decoration: none;" href="http://nullbox.ru/user1"><div class="usertop-block-0"><div>
		<div style="display: inline-block; width: 50px;"><img src="http://nullbox.ru/ava/ava_1.jpg" height="50" width="50" border="0"></div>
		<div style="display: inline-block; padding:2px; vertical-align: top">
		<b>Maldanii</b>
		</div>
		</div></div>
		</a>

		<a style="text-decoration: none;" href="http://nullbox.ru/user38"><div class="usertop-block-1"><div>
		<div style="display: inline-block; width: 50px;"><img src="http://nullbox.ru/ava/ava_38.jpg" height="50" width="50" border="0"></div>
		<div style="display: inline-block; padding:2px; vertical-align: top">
		<b>Mypuk</b>
		</div>
		</div></div>
		</a>

		<a style="text-decoration: none;" href="http://nullbox.ru/user3"><div class="usertop-block-0"><div>
		<div style="display: inline-block; width: 50px;"><img src="http://nullbox.ru/ava/ava_3.gif" height="50" width="50" border="0"></div>
		<div style="display: inline-block; padding:2px; vertical-align: top">
		<b>Drelariel</b>
		</div>
		</div></div>
		</a>

И так далее. Но в чём проблема. Дело в том что в браузерах Opera и Chrome всё друг за другом отображается без проблем - все ссылки-блоки рабочие. Но у меня Firefox постоянно про обновлении страниц пара-вторая ссылок оказываются нерабочими, тоесть просто при наведении на блок, курсор на руку не меняется и он отказывается отображаться как ссылка. Уже что только не делали - всё бесполезно. Причём, если в блоке убрать текст и оставить одну картинку с аватаром - всё нормально - все ссылки всегда работают. Но как только добавляется текст - Firefox упорно каждый раз пару блоков ссылками не делает. Причём каждый раз разные и разное кол-во! Может все нормально вывести, может один только упустить,а может вообще штук пять! Каждый раз новые! Что такое? Я просто ничего не понимаю! Почему только в Firefox так? Сменить браузер не советуйте - пользователям это глупо будет говорить, хотим чтоб везде по-нормальному работало, но не можем найти проблему.

Помогите, очень прошу! Или хотя бы посоветуйте что нибудь или скажите, отчего такое может быть?

Чтобы вам легче представить картину было вот вам скрин самой проблемы в Firefox'e. Три раза обновил страницу - три случайных вывода. Как раз там где ники пользователей отобразились синим цветом - блок-ссылка не работает, а перейти по ссылке получается только если навести курсор на сам текст.

Great Rash · November 30, 2010

FireFox делает совершенно правильно. У вас вообще нифига не должно работать. Просто потому, что нельзя запихивать <div> в <a>.

Плюс в ИЕ :hover работает только на ссылках (<a>) так что если вам интересны пользователи ИЕ, то придется это учитывать.

UPD: И незачем для :hover дублировать все остальные стили, они и так применятся...

Было:

.usertop-block-0 {
		font-family: tahoma, verdana, arial, sans-serif, Lucida Sans;
		font-size: 12px;
		color: #3e3e3e;
		display: block;
		padding: 0px;
		background-color: #cecece;
		border-top: 1px solid #ededed;
		border-bottom: 1px solid #868686;
		border-left: 1px solid #ededed;
		border-right: 1px solid #868686;
		text-decoration: none;
		margin: 0px;
	}
	.usertop-block-0:hover {
		font-family: tahoma, verdana, arial, sans-serif, Lucida Sans;
		font-size: 12px;
		color: #3e3e3e;
		display: block;
		padding: 0px;
		background-color: #dcdcdc;
		border-top: 1px solid #ededed;
		border-bottom: 1px solid #868686;
		border-left: 1px solid #ededed;
		border-right: 1px solid #868686;
		text-decoration: none;
	}

Стало:

.usertop-block-0 {
		font: 12px tahoma, verdana, arial, sans-serif, Lucida Sans;
		color: #3e3e3e;
		display: block;
		padding: 0px;
		background: #cecece;
		border-top: 1px solid #ededed;
		border-bottom: 1px solid #868686;
		border-left: 1px solid #ededed;
		border-right: 1px solid #868686;
		text-decoration: none;
		margin: 0px;
	}
	.usertop-block-0:hover {
		background: #dcdcdc;
	}

bems · November 30, 2010

CSS писал не я, если поменять DIV и A местами - разницы никакой, всё так же. Самое главное если так вообще не должно работать, почему же у него всё работает на всех браузерах включая firefox? У меня так же на всех работает, только кроме firefox, причём меня смущает тот факт что ладно бы он вообще не работал. А он работает, но только каждый раз выкидывает парочку нерабочих их них, причём каждый раз разные.

Great Rash · November 30, 2010

У вас есть 2 выхода:

1) продолжать искать проблему

2) переверстать по нормальному

Блочный элемент вкладывать в инлайн-элемент нельзя.

http://www.jsfiddle.net/G755B/

bems · December 2, 2010

Наконец разобрался как надо всё это дело правильно делать, благодаря вашему варианту, но теперь столкнулся с такой проблемой. Кабинет пользователя у нас выполнен тоже в таком стиле, только ссылки все не вертикально расположены, а горизонтально-вертикально. Тоесть три блока в строку, выглядеть это должно вот так:

Но это неправильной вариант с divaми с ссылках, который так же глючит на firefox. Я решил его переделать по такому же принципу как вы мне дали:

<a class="cabinet-link-0" href="{link_project}">
		<span class="img"><img src="{image_project}" height="50" width="50" border="0"></span>
		<span style="padding-left:3px;display:block;" class="font-block-usertop-title"><b>{name_project}</b></span>
		<span style="padding-left:3px;display:block;" class="font-block-usertop-content">{info_project}</span>
	</a>

	<a class="cabinet-link-1" href="{link_blog}">
		<span class="img"><img src="{image_blog}" height="50" width="50" border="0"></span>
		<span style="padding-left:3px;display:block;" class="font-block-usertop-title"><b>{name_blog}</b></span>
		<span style="padding-left:3px;display:block;" class="font-block-usertop-content">{info_blog}</span>
	</a>

	<a class="cabinet-link-0" href="{link_lesson}">
		<span class="img"><img src="{image_lesson}" height="50" width="50" border="0"></span>
		<span style="padding-left:3px;display:block;" class="font-block-usertop-title"><b>{name_lesson}</b></span>
		<span style="padding-left:3px;display:block;" class="font-block-usertop-content">{info_lesson}</span>
	</a>

И так далее. Единственное отличие от того стиля, что я сделал в Топе пользователей, как вы мне показали, это то что в display вместо block я поставил inline-block, чтобы блоки шли в строчку по горизонтали. Но между ними начали появляться отступы пикселей в пять. Я уж там все свойства перебрал, и им в dive, в котором они находятся поставил и margin и padding по нулю - всё бесполезно. Потом я решил их сделать обычными блоками, то есть опять превратить из inline-block в block и засовывать их уже в div inline блоки. Но результат тот же. Разве что теперь вниз они без отступов друг за другом идут, а вправо - опять отступ пикселей в пять. Вот так вот выглядит:

Помогите решить проблему!

psywalker · December 2, 2010

А нахрена ты снова там чё то делал блочным? Чем тебя инлайн-блоки не устроили?

bems · December 2, 2010

Да говорю же, отступы берутся не пойми откуда если писать inline-block для <a>:

Egorrkaxl · March 2, 2011

Эх, а у меня и с валидностью все окей. Вот только помещенные в Див ссылки внутри друго дива некликабельны и только в Лисе. Если я див с ссылками двигаю паддингами вне пределов родительского дива они начинают работать. В чем проблема не пойму.

swetlana · March 2, 2011

Egorrkaxl, чудеса!

Хотя тут вроде есть телепаты третьей степени, но они нынче отдыхают.

Можно посмотреть на сайт, где такие чудеса происходят?

klierik · March 2, 2011

Egorrkaxl

у тебя поверх дива с о ссылкой лежит другой абсолютный или релативный див.

Egorrkaxl · March 2, 2011

Egorrkaxl
у тебя поверх дива с о ссылкой лежит другой абсолютный или релативный див.

Спасибо большое. В одном из выше стоящих блоков убрал релиативность и ссылки заработали. Хотя по идее с точки зрения координат тот блок вроде на ссылки не залазил. Верстка сильная вещь. Пока дедушку ИЕ6 поборол назрели проблемы в нормальных браузах.

Sign In

Проблема с div-ссылкой в Firefox

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information