IE6 & 7 Link nicht anklickbar

EuerAbi · #1 (**permalink**) 27.01.2010, 01:30

Hallo allerseits,

an mehreren Stellen im Code einer Seite sind die Links im IE6 und IE7 nicht anklickbar. Durch testen scheint es mir so, als ob es was mit der Verschachtelung der Elemente zu tun hat, denn bei einer der Problemstellen (nicht das Beispiel was folgt) ist der Link an einer ganz kleinen Stelle doch anklickba, und zwar ist es die Stelle an der das Bild zu klein ist um den a-Tag auszufüllen.

Hier ein anderes, einfaches Beispiel:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"  >

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>TODO supply a title</title>
    </head>
    <body>
       <div>
                            <div style="float: right;">

                                <div style="background: #a20b00; height: 117px; width: 164px; text-align: center;"><span style="display: block; color: #FFFFFF; font-size: 12px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: bold; padding: 5px 0 5px 0;">Bla</span>
                                    <a href="#" style="display: block;"><img src="home_journal.jpg" /></a>
                                </div>
                                
                                <div style="background: #a20b00; height: 117px; width: 164px; text-align: center; margin-top: 3px;"><span style="display: block; color: #FFFFFF; font-size: 12px; font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-weight: bold; padding: 5px 0 5px 0;">Blobb</span>
                                    <a href="#" style="display: block;"><div style="background: #FFFFFF; height: 90px; width: 158px; margin: 0 0 1px 3px;"><img src="home_partnerlinks.jpg" /></div></a>
                                </div>


                            </div>
       </div>
    </body>
</html>

Beim ersten Link habe ich das umschließende DIV beim IMG Tag entfernt und es funktioniert. Warum ist das so (in diesem Fall könnte ich sogar auf das div verzichten, warum dies so ist würde mich dennoch interessieren)?
Beim anderen Problem ist die Reihenfolge so: div->ul->li->a->span->img und daran kann ich leider nichts ändern da es vom CMS vorgegeben wird. In diesem Fall hat das a Tag sagen wir ne Breite von 100 px und das Bild 70px, der Link ist dann in den 30 px welche das Bild nicht "bedeckt" anklickbar. Da wo das Bild ist ändert sich zwar der Cursor, aber anklicken geht dann doch nicht.

Danke schonmal für die Tipps und Ratschläge.

EvT · #2 (**permalink**) 27.01.2010, 01:56

<a> darf keine Blockelemente (div) enthalten.

EuerAbi · #3 (**permalink**) 27.01.2010, 02:07

Auch nicht wenn bei a die eigenschaft display auf block gesetzt wird? Und ist das die Ursache für den Fehler? Ich kenne das nämlich schon mit dieser Regel, habe aber nie ein solches Problem deswegen gehabt.
Beim anderen Fehler auf der Seite enthalt das A nur SPAN und das IMG tag, und dort gehts ebenfalls nicht.

threadi · #4 (**permalink**) 27.01.2010, 23:32

Ja, auch wenn der Link per CSS zum Blockelement gemacht wird ist ein div darin nicht zulässig. Nimm statt dessen wie im anderen Link ein span und mache dieses per CSS zum Blockelement, wenn Du sowas brauchst.

EuerAbi · #5 (**permalink**) 31.01.2010, 01:21

Danke, wie gesagt ich habe das schonmal gelesen dass es nicht erlaubt ist, aber solch ein Problem nie deswegen gehabt.

Dennoch bleibt das Problem bestehen, denn im anderen Beispiel gibts keine Blockelemente innerhalb von Inlineelementen, und der Fehler ist genau der gleiche.

Ich bin auch selbst nicht weitergekommen in der Zwischenzeit, wäre über jeden anderen Tipp dankbar.

threadi · #6 (**permalink**) 31.01.2010, 01:29

Welches andere Beispiel?

EuerAbi · #7 (**permalink**) 31.01.2010, 13:33

Das andere Beispiel war nur die Reihenfolge der Tags welche ich gepostet hatte, da gibts keine Inlineelemente welche Blockelemente enthalten.
Hier der Vollständige HTML Code dazu:

HTML-Code:

<ul class="menu">
    <li level="1">
        <a href="#">
            <span>
                <img src="/images/menuimages/138_hover.png" alt="">
            </span>
        </a>
    </li>
    <li level="1">
        <a href="/anmelden">
            <span>
                <img src="/images/menuimages/81.png" alt="" onmouseover="this.src='/images/menuimages/81_hover.png'" onmouseout="this.src='/images/menuimages/81.png'">
            </span>
        </a>
    </li>
</ul>

threadi · #8 (**permalink**) 31.01.2010, 13:54

Dieser Code wird in XHTML-Dokumenten (was du laut dem obigen Doctype hast) nicht valide sein da Du die img-Tags falsch schreibst. Korrekt wäre:

Code:

<img src="/images/menuimages/138_hover.png" alt="" />

EuerAbi · #9 (**permalink**) 31.01.2010, 15:33

Sorry, ich habe den Code vom Firebug aus kopiert, was ich nicht wusste ist dass dieser wohl den Code nochmal formatiert.
Wenn ich mir den Quelltext genau anschaue, dann ist dort der img tag richtig abgeschlosse, hatte mich auch gewundert weil ich beim coden drauf geachtet habe, aber wenn man sich den Code im Firebug anschaut, zeigt er ihn komischerweise so an.

Also, daran liegt es auch nicht

Es ist auch leichter sich das ganze am ersten Beispiel zu veranschaulichen, ich weiss da ist der Fehler mit dem div innerhalb vom a tag, aber das ist ziemlich sicher nicht die Ursache des von mir beschriebenen Fehlers, weil ich das so schon sehr oft gehandhabt habe.

Könnt ihr das erste Beispiel auch ohne die Bilder nachvollziehen, also seht ihr den Fehler oder soll ich die Bilder noch uppen hier?

Edit:
habe noch vergessen zu erwähnen, dass wenn ich beim IE über den Link fahre, dass der Link unten angezeigt wird, aber ein Klick darauf löst eben keine Aktion aus.
Also das Bild scheint irgendwie den Link selbst nicht zu verdecken, weil sich der Cursor zur Hand ändert und unten der Llink angezeigt wird...

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
IE6 und border-bottom im Link	GN	CSS	6	24.06.2010 22:11
IE6 - abgeschnittene Hintergrundbilder	shredder01	CSS	2	09.04.2010 15:58
link hover soll weitere definierte links hovern	Andreas1977	CSS	17	07.10.2009 22:03
Link im zweiten LI verschwindet (IE6)	ven	CSS	1	16.04.2008 13:59
IE6 Link mit wechselndem PNG Hintergrund	ven	CSS	2	10.04.2008 16:54