IE6 / 7 + Verbindung überlappende Text Einrückung

Question

Ich brauche eine wenig Anleitung hier ...

Ich habe 2 Links:

<div class="tarjBodyHolder">
    <div class="imageHolder">
        <a href="#" onclick="alert('picture link'); return false;">
           <img border="0" src="/picture.jpg" />
        </a>
    </div>
    <div class="linkTransp">
       <a href="#" onclick="alert('family link'); return false;">RAM Moudles</a>
    </div>
</div>

Die Css:

.tarjBodyHolder{
    position: relative; 
    clear: both; 
    height: 152px;
 }

.tarjBodyHolder .linkTransp{
     position: absolute; 
     bottom: 0px; 
     left: 0px; 
     width: 120px;
     height: 15px;
     z-index: 6; /*IE bug*/
}
.tarjBodyHolder .linkTransp a {
     display: block;
     text-indent: -9999px; 
     width: 120px; 
     height: 15px;
     overflow: hidden;
     z-index: 6;
 }
 .tarjBodyHolder .imageHolder{
     position: absolute; 
     bottom: 0px; 
     left: 0px;/*IE 7 bug*/
 }

Dies ist die nächste:

Der img Link ist ein Bild von einem Elemente. und dieses Bild hat es die Kategorie gedruckt, wo die Elemente gehören. Zum Beispiel: DDR-RAM-Modul hat das Bild und die Zeichenfolge „<< RAM-Module“ aufgedruckt. Die Idee dabei ist, dass, wenn Sie diese Zeichenfolge klicken Sie diese von diesem Artikel zu dieser Kategorie nimmt und Sie können alle Produkte auf darin enthaltenen sehen; aber wenn Sie das Bild des Produktes klicken, erhalten Sie in der Produktbeschreibung Seite beenden. was ich brauche, ist die folgende:

Overlap die "unsichtbar" (*) Kategorie Link und das Bild Link. Das ist der Grund, warum ich verwendet habe, Position: absolute; Auf Firefox wirklich toll es .. aber ich kann nicht herausfinden, wie dies zu tun auf IE6 / 7. Egal, was ich tue es nicht mit dem text-indent arbeiten: -9999px .. wenn ich diesen Kommentar der Text sichtbar wird und ich kann darauf klicken .. aber kann nicht anders. Ich habe sogar versucht, die eine Breite und Höhe zu erklären !!

(*) Ich sage „unsichtbar“, weil diese Verbindung den Text haben soll .. aber Sie sollen sehen können es nicht, weil es gegliederte -9999px ist.

Answer 1

Klingt für mich wie du und altmodisches Bild Karte möchten. Überlappende verknüpften Elemente wie diese selten eine gute Idee ist.

Was ich höre, ist, dass Sie ein Bild haben. Ein Teil des Bildes (das Bild Teil) Links zu der Seite mit der Beschreibung. Der andere Teil (der Textteil) Links zu einer anderen URL der Kategorien.

Entweder mit 1 Bild leben oben und einen Text-Link unten, oder verwenden Sie die

Es ist ziemlich einfach, es in etwas wie ein Feuerwerk / Dreamweaver zu tun. Allerdings, wenn Sie möchten, heres die Dokumentation einen guten altmodischen Text-Editor auszubrechen:

http://www.w3schools.com/TAGS/tag_map.asp