css Pop-up / im IE auch ohne <ul> <li> realisierbar?

**themaster3000** · 19.05.2010 16:40

Hallo,

Kurzform: Ein Layer (hier popup) soll ,beim überfahren der Maus über einer Grafik, erscheinen. Im FF und Chrome auch ohne lästige <ul><li>-Aufzählungslisten möglich. Im IE sind die Aufzählungslisten jedoch erfoderlich.
Ich kann bzw. darf die Aufzählungslisten <ul><li> nicht verwenden (Layoutbedingt, weil der Layer in ein anderes Layout integriert wird und mit <ul><li> das Gesamt-Layout verunstaltet).

Gibt es eine Alternative die Layerfunktion ohne Aufzählungslisten für den IE gerecht zu gestalten?

Danke für die Vorschläge im Voraus.

Anbei das CSS/HTML:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

<style type="text/css"><!--
body {padding:0; margin:0; background:#cccccc; font-family:arial; font-size:12px; color:#000;}
#arritier {width:1000px; text-align:left;}
.popup ul li {list-style-type: none;float:left;border:1px solid #000;}
.popup ul li a, .popup ul li a:visited {display:block;text-decoration:none;color:#000;background:#fff;}
.popup ul li a img, .popup ul li a:visited img {border:0;}
.popup ul li dl {visibility:hidden;position:absolute;}

.popup dl {width:200px; margin:0; padding:5px 15px; color:#000; font-size:1em; border:1px solid #000; border-width:1 1px; background:#fff url(http://i45.tinypic.com/vyqd61.jpg) no-repeat bottom right;}
.popup dl p {padding:0; margin:10px 0; line-height:1.5em;}

/* arritierung des popups speziell für nicht IE */
.popup ul li:hover,
.popup ul li a:hover {color:#000; position:relative;cursor: pointer;cursor:hand;}

/* popup erscheinen lassen */
.popup ul li:hover dl,
.popup ul li a:hover dl {visibility:visible;color:#000;top:-75px;left:120px;cursor:default;}

/* position des popups */
.popup ul li:hover dl em,
.popup ul li a:hover dl em {display:block;position:absolute;left:-35px;top:75px;width:36px; height:36px;background:transparent url(http://i47.tinypic.com/kd7290.gif);}

/* betrifft nur inhalt des popup */
.popup ul li:hover dl a,
.popup ul li a:hover dl a {height:0.8em;color:#606;background:transparent;text-decoration:underline;display:inline;}

/* siehe oben, für hover */
.popup ul li:hover dl a:hover,
.popup ul li a:hover dl a:hover {text-decoration:none;background:transparent;}
--></style>
</head>



<body>
<p>-<p>-<p>-<p>
<div id="arritier">
 <div class="popup">
  <ul>
   <li>
      <a href="http://www.meine website.xx/"><img src="http://i47.tinypic.com/2yweqh5.jpg" alt="Bild1" title="Unsere Referenzen"><!--[if IE 7]><!--></a><!--<![endif]-->
    <dl>
      <p>Viele Informationen über unsere referenzen </p> <p>findest du </p> <p>durch klick</p> auf unsere Partnerseiten<p></p>
      <a href="http://www.meine website.xx/">Partner 1</a><br>
      <a href="http://www.meine website.xx/">Partner 2</a><br>
    </dl>
        <!--[if lte IE 6]></a><![endif]-->
   </li>
  </ul>
 </div>
</div>

</body>

**themaster3000** · 19.05.2010 17:06

Hallo,

anbei der schnelle Beweis, dass der IE nur mit Aufzählungslisten <ul><li> eine korreke Darstellung wiedergibt.

In diesem Fall wird "ul li" durch "blablub" ersetzt. Alle Browser bis auf den IE stellen den Layer korrekt dar:

HTML-Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head><meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">

<style type="text/css"><!--
body {padding:0; margin:0; background:#cccccc; font-family:arial; font-size:12px; color:#000;}
#arritier {width:1000px; text-align:left;}
.popup blablub {list-style-type: none;float:left;border:1px solid #000;}
.popup blablub a, .popup blablub a:visited {display:block;text-decoration:none;color:#000;background:#fff;}
.popup blablub a img, .popup blablub a:visited img {border:0;}
.popup blablub dl {visibility:hidden;position:absolute;}

.popup dl {width:200px; margin:0; padding:5px 15px; color:#000; font-size:1em; border:1px solid #000; border-width:1 1px; background:#fff url(http://i45.tinypic.com/vyqd61.jpg) no-repeat bottom right;}
.popup dl p {padding:0; margin:10px 0; line-height:1.5em;}

/* arritierung des popups speziell für nicht IE */
.popup blablub:hover,
.popup blablub a:hover {color:#000; position:relative;cursor: pointer;cursor:hand;}

/* popup erscheinen lassen */
.popup blablub:hover dl,
.popup blablub a:hover dl {visibility:visible;color:#000;top:-75px;left:120px;cursor:default;}

/* position des popups */
.popup blablub:hover dl em,
.popup blablub a:hover dl em {display:block;position:absolute;left:-35px;top:75px;width:36px; height:36px;background:transparent url(http://i47.tinypic.com/kd7290.gif);}

/* betrifft nur inhalt des popup */
.popup blablub:hover dl a,
.popup blablub a:hover dl a {height:0.8em;color:#606;background:transparent;text-decoration:underline;display:inline;}

/* siehe oben, für hover */
.popup blablub:hover dl a:hover,
.popup blablub a:hover dl a:hover {text-decoration:none;background:transparent;}
--></style>
</head>



<body>
<p>-<p>-<p>-<p>
<div id="arritier">
 <div class="popup">
  <blablub>
      <a href="http://www.meine website.xx/"><img src="http://i47.tinypic.com/2yweqh5.jpg" alt="Bild1" title="Unsere Referenzen"><!--[if IE 7]><!--></a><!--<![endif]-->
    <dl>
      <p>Viele Informationen über unsere referenzen </p> <p>findest du </p> <p>durch klick</p> auf unsere Partnerseiten<p></p>
      <a href="http://www.meine website.xx/">Partner 1</a><br>
      <a href="http://www.meine website.xx/">Partner 2</a><br>
    </dl>
        <!--[if lte IE 6]></a><![endif]-->
  </blablub>
 </div>
</div>

</body>

**Adromir** · 21.05.2010 05:11

blablub ist kein valider Webtag, wie soll der IE den dann auch korrekt darstellen? Was spricht denn gegen ul und li?

**themaster3000** · 21.05.2010 06:02

Hallo Adromir,

gegen <ul> <li> spricht, dass die Aufzählungslisten nicht mit dem Layout, in welche die Popups integriert werden werden, harmonieren, warum auch immer.

Du schreibst: "blablub ist kein valider Webtag, wie soll der IE den dann auch korrekt darstellen?"

Sollte das ein IE-Bug sein, wie sieht dann der Bugfix aus? Andere Browser kommen mit blablub problemlos zurecht!

Danke und Gruß

**themaster3000** · 21.05.2010 06:32

Wenn du wissen willst, welcher Darstellungsfehler genau durch das <ul><li> beim IE zustande kommt.

Die Grafik auf welchem die mouseover-popup-Funktion angewendet werden soll ist um 80px nach rechts verschoben, erst wenn über das Grafik gefahren wird positioniert sich die Grafik richtig und das Popup öffnet sich, so stellt sich das zumindest dar wenn die HTML für das Popup in meine Website integriert wird.

Ansonsten funktioniert das Popup im IE Problemlos.

Den Emulatator auf IE7 (siehe head oben) habe ich zwischenzeitlich herausgenommen. Im IE7 erscheint das Popup hinter den Grafiken der nachfolgenden Boxen (obwohl korrekt mit z-index gearbeitet wurde).

Wie auch immer, wäre toll wenn jemand ein IE-Bugfix kennt!

**themaster3000** · 21.05.2010 21:49

Hallo, weiß da draußen jemand vielleicht eine Lösung?

Die Frage lautet wie folgt:

Ist es möglich, dass der IE, das popup wie im 1.Beitrag bargestellt auch ohne aufzählungslisten darstellen kann?

Danke u. Gruß

**hero-master** · 21.05.2010 21:52

Google doch mal nach "Tooltip CSS". Da wirste ein paar Beispiele finden, die auch im IE klappen und das ganz ohne Listen

**themaster3000** · 22.05.2010 18:15

Hallo hero-master,

dank für den Tip. Ich habe mich nun mit den Tool-Tips intensiv auseinandergesetzt aber trotzdem nicht ganz verstanden wieso diese der IE auch ohne Aufzählungslisten darstellen kann.

Die Pop-Up Funktion wurde zwischenzeitlich erfolgreich in das Website-Layout integriert. Auch der IE8 und IE7 stellen es korrekt dar (der IE6 noch nicht). Für den IE7 gab es wohl Vererbungsprobleme, daher wurde z-index in einigenen DIV neu definiert. Und damit sich Popup nicht mit Layout überschneidet die Konstellation der DIV im HMTL umpositioniert. Das ganze hat mich eine ganze Nacht Arbeit gekostet!

zur Startseite vom TP

Thema: css Pop-up / im IE auch ohne <ul> <li> realisierbar?

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

css Pop-up / im IE auch ohne <ul> <li> realisierbar?

Ähnliche Themen

Auch ohne Formular möglich?

GeoMap auch ohne Forum?

Sicherheit auch ohne https?

Gehts auch ohne?

Rechnung auch ohne Gewerbeschein ?

Aktive Benutzer

Aktive Benutzer