У меня есть странная проблема с изображением, служащим ссылкой, в которой "кликабельная" область не выравнивается с самим изображением. Вот некоторые изображения, чтобы дать представление о том, что я имею в виду:
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.
Я попытался добавить z-index: 999 в класс.socialButtons img, и он сработал.
<img src="imagepath" width="Xpx" height="Ypx">
размер изображения в теге изображения аналогично ниже<img src="imagepath" width="Xpx" height="Ypx">
?