IE Probleme mit Links auf Bildern im Header

textgalerist

Hallo,

hab mal wieder ein Problem mit diesem Blog. Verlinke ich die Header-Bilder mit einer Zuordnung der einzelnen Größen, sind die im IE nicht mehr klickbar, während sie im Firefox und Safari wie eingestellt funktionieren. Was ich kann ich da tun?

Hier der Header-Bereich:

HTML

<div id="header">
        <div id="header-links">
            <img src="wp-content/themes/jk/images/head-logo.jpg" alt="Home" height="189" width="180"/>
            <img src="wp-content/themes/jk/images/head-theater.jpg" alt="Theater" height="189" width="270"/>
            <img src="wp-content/themes/jk/images/head-film.jpg" alt="Film" height="189" width="275"/>
            <img src="wp-content/themes/jk/images/head-oper.jpg" alt="Oper" height="189" width="275"/>
            <a id="home-link" href="http://www.jessica-karge.de/blog/"></a>
            <a id="theater-link" href="http://www.jessica-karge.de/blog/?page_id=58"></a>
            <a id="film-link" href="#"></a>
            <a id="oper-link" href="#"></a>
        </div>
</div>

Alles anzeigen

Hier die css-Anweisungen:

Code

#home-link { position: absolute; top: 0; left: 0; width:180px; height:120px; }
#theater-link { position: absolute; top: 0; left: 180px; width:275px; height:155px; }
#film-link { position: absolute; top: 0; left:450px; width:275px; height:155px; }
#oper-link { position: absolute; top: 0; left:725px; width:275px; height:155px; }


#header-links a,
#header-links img{ display: block; float:left; }
#header #oper-link {position: absolute; top:0; right:0;}

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

marX

Wenn du die Links absolut positionierst, dann solltest du den Header (#header-links) zuvor relativ positionieren, sonst greift die absolute Positionierung nicht so wie du dir das vorstellst. Dann würde ich dir raten, gib den Links zum Testen eine Hintergrundfarbe oder einen Rahmen, dann siehst du genau wo sich jeweils der Block gefindet.

Übrigens: warum nicht so wie üblich die Bilder direkt mit den Links umschließen? :confused:

HTML

<div id="header-links">
            <a id="home-link" href="http://www.jessica-karge.de/blog/">
               <img src="wp-content/themes/jk/images/head-logo.jpg" alt="Home" height="189" width="180"/></a>
            <a id="theater-link" href="http://www.jessica-karge.de/blog/?page_id=58">
               <img src="wp-content/themes/jk/images/head-theater.jpg" alt="Theater" height="189" width="270"/></a>
            <a id="film-link" href="#">
               <img src="wp-content/themes/jk/images/head-film.jpg" alt="Film" height="189" width="275"/></a>
            <a id="oper-link" href="#">
               <img src="wp-content/themes/jk/images/head-oper.jpg" alt="Oper" height="189" width="275"/></a>
        </div>

textgalerist

Ja, habe ich alles schon probiert, setzte ich die Links relativ rutschen sie runter, und binde ich die Links ein, sind sie groß wie die Bilder, was hier nicht so gut aussieht. Und es klappt ja nur beim IE nicht. Gibt's nicht noch eine Möglichkeit?

Viele Grüße - man kommt ja kaum zum Obama-Schauen

textgalerist

marX

Ist dir klar, wie absolute und relative Positionierung in CSS eigentlich funktioniert? Lies dir vielleicht mal folgendes Tutorial durch, dann verstehst du auch, warum #header-img relativ positioniert sein muss.
mediaevent.de :: CSS und HTML :: Absolute und relative Positionierung für das Layout von Webseiten

textgalerist

Na ja, vielen Dank für den Hinweis. Muss mich da wirklich noch mehr reinknien. Könnte man vorüber gehend auch imaps setzen?

Viele Grüße

textgalerist

moloko

mit dem IE habe ich auch so meine probleme!!! für den IE habe ich eine
eigene formatierung gamacht. funktioniert ganz gut.

zu deinem image proplem: hatte ich auch, ich habe eine

HTML

<ul>
<li id="linkimage"><a href="#">&nbsp;</a></li><li>usw</li><li>usw</li>
</ul>

gamacht und die bilder in den background #linkimage glegt.

allerdings ist das auch nicht ganz zufriedenstellend, wegen dem   aber für den anfang .... g.m.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

IE Probleme mit Links auf Bildern im Header

Jetzt mitmachen!