Изображения и ссылки не «выровнены»

0

У меня есть странная проблема с изображением, служащим ссылкой, в которой "кликабельная" область не выравнивается с самим изображением. Вот некоторые изображения, чтобы дать представление о том, что я имею в виду:

nonclickable http://www.lmnt5.com/01nonclickable.jpg clickable http://www.lmnt5.com/02clickable.jpg

В значке телефона слева положение курсора должно активировать ссылку, но это не так. Только когда я наводил курсор на верхнюю часть значка (а также в области, находящейся непосредственно над ним), активируется ли ссылка (как на фотографии справа).

Поэтому, прежде чем я попаду в депиляцию (или отправку кода), мне было интересно, знает ли кто-нибудь из головы, что может быть причиной этого. (В случае, если это имеет значение, есть три значка inline [телефон, Facebook, Twitter]).

[EDIT: для запроса кода] Вот соответствующий html:

<div id="socialButtonsWrap">
<div id="socialButtons" class="socialButtons">
<a href="http://www.example.com"><img src="assets/images/badgeFacebook.png" alt="Connect on Facebook"></a>
<a href="http://www.example.com"><img src="assets/images/badgeTwitter.png" alt="Connect on Twitter"></a>
<a href="tel:123456789"><img src="assets/images/badgePhone.png" alt="Click to call"></a>
</div>
</div><!-- close socialButtonsWrap -->

И css:

#socialButtons {
float: right;
width: 20%;
}

.socialButtons img {
position: relative;
float: right;
padding: 30px 0 0 15px;
max-width: 42px;
max-height: 42px;
}

#SocialButtonsWrap только вступает в игру в ответ, и проблема была там, прежде чем я добавил, что div.

  • 1
    Пожалуйста, добавьте свой HTML в вопросе.
  • 0
    Вы <img src="imagepath" width="Xpx" height="Ypx"> размер изображения в теге изображения аналогично ниже <img src="imagepath" width="Xpx" height="Ypx"> ?
Показать ещё 3 комментария
Теги:
hyperlink
image

1 ответ

0

Я попытался добавить z-index: 999 в класс.socialButtons img, и он сработал.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню