Znikający odnośnik (div wewnątrz a)

[tynieja]

Witam.

Mam takie sobie linki (jest ich więcej):

Kod: Zaznacz cały

<a href="#"><div class="product" style="background-image: url('http://abc.ciemborowicz.pl/wp-content/themes/abc/images/bębny.png');"><span>bębny</span></div></a>
<a href="#"><div class="product" style="background-image: url('http://abc.ciemborowicz.pl/wp-content/themes/artonery/images/developery-i-wywoływaczki.png');"><span>developery-i-wywoływaczki</span></div></a>
<a href="#"><div class="product" style="background-image: url('http://abc.ciemborowicz.pl/wp-content/themes/abc/images/atramenty.png');"><span>atramenty</span></div></a>

i CCSik

Kod: Zaznacz cały

.product
{
  z-index: 30;
  text-indent: -9999px;
  position: relative;
  float: left;
  margin-right: 3px;
  margin-bottom: 2px;
  height: 132px;
  width: 136px;
  overflow: hidden;
  background-position: 0px 0px;
}

.product:hover
{
  background-position: -136px 0px;
}

W Chrome wszystko ładnie działa. W Firefoksie (3.6) zauważam jednak dziwny problem. Otóż... czasem jakiś jeden lub dwa divy przestaje być odnośnikiem. Nie wyświetla się nad nim łapka, tylko zwykła strzałka. <a> zmienia położenie z zewnątrz <div>, do wewnątrz <div>. Czyli z rodzica staje się dzieckiem. Ma ktoś pomysł, co z tym zrobić? (najwyżej zrobię na img zamiast tła, ale wolałbym tak).

[dexter]

<a> jest elementem liniowym, nie może zawierać elementów blokowych. Dlatego spróbuj dodać własność:

Kod: Zaznacz cały

a {
  display:block;
  max-width:100%;
  max-height:100%;
}


Później możesz się też pozbyć elementów <div> i <span>, staną się zbędne.

Po drugie, co to jest text-indent: -9999px;?

[Tomek]

text-indent: -9999px;?

Ujemne wcięcie tekstu. Umożliwia zastosowanie ładnego linku graficznego, który jest jednocześnie normalnym linkiem tekstowym - przykład http://www.klon-ogrody.kom.pl/
Stąd te divy i spany. display:block powinno pomóc.