[Erledigt] CSS tooltip problem im IE img überlappt div

teewurst · 08.04.2011, 13:36

Einfaches Problem:
http://www.startexchange.de/index.ph...&part=register

geht man mit der maus über ein fragezeichen so wird ein tooltip eingeblendet.
kein problem mit ff chrome usw
nur der IE macht faxen...

Beim IE überlagert das Bild des nächsten tooltips die jeweiligen tooltips..
hab viel mit z-index rumprobiert: kommt aber zu keiner lösung...

Hier der HTML code: (bzw php)

PHP-Code:

  function tooltip($Art,$Head,$Text = false)
{
    switch ($Art){
        case c: $Art='critical'; break;
        case i: $Art='info'; break;
        case h: $Art='help'; break;
        case w: $Art='warning'; break;
    };
echo '
<a class="tooltip" href="#">             
         <div align="left" class="custom '.$Art.'">
             <img src="pictures/'.ucfirst($Art).'.png" class="inside" alt="'.ucfirst($Art).'" height="48" width="48" />
             <em>'.$Head.'</em>
             '.$Text.'
         </div>
         <img border=0 src="pictures/'.ucfirst($Art).'.png" style="z-index:1;" height="20px" width="20px">
     </a>';
}

das zugehörige css:

Code:

.tooltip { /* Deviniert die Box + Button*/
  color: #000000; outline: none;
  cursor: help; text-decoration: none;
  position: relative;
  border:0px;
}

.tooltip div { /*Zustand der box wenn nicht hover */
  margin-left: -999em;
  position: absolute;
   text-decoration: none;

}

.tooltip:hover div { /*Zustand der Box wenn hover*/
  color: #000000; text-decoration: none;
  font-family: Calibri, Tahoma, Geneva, sans-serif;
  position: absolute;
  left: 1em;
  top: 2em;
  z-index: 99;
  margin-left: 0;
  width: 250px;
}
.tooltip:hover div .inside { /*Positionierung des Bildes in der box (hier am zum teil außerhalb)*/
  border: 0;
  margin: -10px 0 0 -55px;
  float: left;
  position: absolute;
}
/********* jetzt im edit dazugefügt******/
/*Formatierung und design der verschidenen Tooltips*/
.classic { padding: 0.8em 1em; }
.custom { padding: 0.5em 0.8em 0.8em 2em; }
* html a:hover { background: transparent; }

.classic { background: #FFFFAA; border: 1px solid #FFAD33; }
.critical { background: #FFCCAA; border: 1px solid #FF3334; }
.help { background: #9FDAEE; border: 1px solid #2BB0D7; }
.info { background: #9FDAEE; border: 1px solid #2BB0D7; }
.warning { background: #FFFFAA; border: 1px solid #FFAD33; }

ich komm nicht weiter... jemand ne idee?
mit java kenn ich mich ned aus deswegen würde ich da nur ungerne umsteigen.

***EDIT***
Die lösung ist JS:

Code:

$(document).ready(function()
{
    $(function()
    {
        var zIndexNumber = 1000;
        $(’div’).each(function()
        {
            $(this).css(’zIndex’, zIndexNumber);
            zIndexNumber -= 10;
        });
    });
});

lg tee

mermshaus · 08.04.2011, 16:30

Java ist nicht JavaScript. (Angenommen, du meintest nicht tatsächlich Java.

)

Es ist mir außerdem nicht gelungen, irgendeine Form von sichtbarer Ausgabe zu produzieren. Du musst bedenken, dass wir lokal die Grafiken nicht vorliegen haben.

PHP-Code:

      switch ($Art){
        case c: $Art='critical'; break;
        case i: $Art='info'; break;
        case h: $Art='help'; break;
        case w: $Art='warning'; break;
    };

Setze die Buchstaben hier in Anführungszeichen.

Edit/@ChrisB: Oooops.

Soooorry.

ChrisB · 08.04.2011, 16:32

Zitat:

Zitat von mermshaus

Es ist mir außerdem nicht gelungen, irgendeine Form von sichtbarer Ausgabe zu produzieren. Du musst bedenken, dass wir lokal die Grafiken nicht vorliegen haben.

Und eine Maus/Tastatur zum Anklicken des Links zur Beispielseite hast du „lokal auch nicht vorliegen“ ...?

ChrisB · 08.04.2011, 16:36

Zitat:

Zitat von teewurst

ich komm nicht weiter... jemand ne idee?

Erst mal die zahlreichen Fehler beseitigen: http://validator.w3.org/check?uri=ht...art%3Dregister

Die von dir gewählte HTML-Versiopn erlaubt bspw. keine DIV- in A-Elementen, aber genau solche Konstrukte nutzt du für deine Tooltipps.

teewurst · 08.04.2011, 17:52

vielen dank für die antworten

verstehe. Also ist es nicht elaubt ein Blockelement in eine line-element zu packen. dennoch löst das nicht das problem.
selbst wenn ich das div durch ein span element ersetzte (sieht zwar schecklich aus aber es gibt um die "anzeigenreihenfolge") ist es immer noch so dass das der tooltip über dem bild steht

wie kann ich dies erlauben? insofern dies natürlich geht

nikosch · 08.04.2011, 17:52

Evtl. das hier: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

teewurst · 08.04.2011, 20:58

hey

also ich habe etwas gefunden was auch dieses problem behebt (der normae workaround geht hier nicht das das img im gleichen element ist) aber hiermit:

Code:

$(document).ready(function()
{
    $(function()
    {
        var zIndexNumber = 1000;
        $(’div’).each(function()
        {
            $(this).css(’zIndex’, zIndexNumber);
            zIndexNumber -= 10;
        });
    });
});

im head geht es wunderbar!

viel dank nikosch usste nicht das es bug des explorers ist und danke an die anderen für die mühe und tipps

nikosch · 08.04.2011, 21:10

Habs auch per Google gefunden „ie z-index bug“ …

nikosch · 08.04.2011, 21:11

Ach so ja, … erster Suchtreffer. Denk mal drüber nach.

teewurst · 08.04.2011, 21:16

naja ich bin auch google fan ^^ nur ich dachte das das an meiner leihenhaftigkeit lag

aber ok darauf hätte ich auch selber kommen können

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
ToolTip (JS ?)	dreamcatcher	JavaScript, Ajax und mehr	2	08.02.2011 17:45
Javascript / Ajax Tooltip Div Position	22hase	HTML, Usability und Barrierefreiheit	7	17.08.2010 10:27
HTML Code bei Tooltip zerstört programmierung	noop	HTML, Usability und Barrierefreiheit	4	09.08.2010 12:23
[Erledigt] ToolTip mit Grafik und spezielle Detail's anzeigen	localhost.	PHP Tipps 2010	32	09.06.2010 16:56
google map tooltip über link aufrufen	mqs	JavaScript, Ajax und mehr	1	18.03.2010 15:23
PHP Tooltip AJAX	webdino	PHP Tipps 2009	2	19.06.2009 11:26
CSS - Bild im div container überlappt andere container	Buschdieb	HTML, Usability und Barrierefreiheit	13	19.07.2007 23:17
CSS: Firefox intepretiert Tooltip falsch	PsychoEagle	HTML, Usability und Barrierefreiheit	3	30.11.2006 10:03
JavaScript Tooltip funktioniert nicht	<Daniel>	HTML, Usability und Barrierefreiheit	2	13.09.2006 13:02
[Erledigt] bild in tooltip		HTML, Usability und Barrierefreiheit	5	23.07.2005 12:43
Tooltip innderhalb einer Zelle ?	Cyberbob_at_tot	HTML, Usability und Barrierefreiheit	2	13.06.2005 21:04
CSS Tooltip		HTML, Usability und Barrierefreiheit	19	23.05.2005 15:49

08.04.2011, 13:36
teewurst Neuer Benutzer Registriert seit: 28.11.2010 Beiträge: 13 PHP-Kenntnisse: Anfänger	[Erledigt] CSS tooltip problem im IE img überlappt div Einfaches Problem: http://www.startexchange.de/index.ph...&part=register geht man mit der maus über ein fragezeichen so wird ein tooltip eingeblendet. kein problem mit ff chrome usw nur der IE macht faxen... Beim IE überlagert das Bild des nächsten tooltips die jeweiligen tooltips.. hab viel mit z-index rumprobiert: kommt aber zu keiner lösung... Hier der HTML code: (bzw php) PHP-Code: function tooltip($Art,$Head,$Text = false) { switch ($Art){ case c: $Art='critical'; break; case i: $Art='info'; break; case h: $Art='help'; break; case w: $Art='warning'; break; }; echo ' <a class="tooltip" href="#"> <div align="left" class="custom '.$Art.'"> <img src="pictures/'.ucfirst($Art).'.png" class="inside" alt="'.ucfirst($Art).'" height="48" width="48" /> <em>'.$Head.'</em> '.$Text.' </div> <img border=0 src="pictures/'.ucfirst($Art).'.png" style="z-index:1;" height="20px" width="20px"> </a>'; } das zugehörige css: Code: .tooltip { /* Deviniert die Box + Button/ color: #000000; outline: none; cursor: help; text-decoration: none; position: relative; border:0px; } .tooltip div { /Zustand der box wenn nicht hover / margin-left: -999em; position: absolute; text-decoration: none; } .tooltip:hover div { /Zustand der Box wenn hover/ color: #000000; text-decoration: none; font-family: Calibri, Tahoma, Geneva, sans-serif; position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px; } .tooltip:hover div .inside { /Positionierung des Bildes in der box (hier am zum teil außerhalb)/ border: 0; margin: -10px 0 0 -55px; float: left; position: absolute; } /****** jetzt im edit dazugefügt***/ /Formatierung und design der verschidenen Tooltips/ .classic { padding: 0.8em 1em; } .custom { padding: 0.5em 0.8em 0.8em 2em; } html a:hover { background: transparent; } .classic { background: #FFFFAA; border: 1px solid #FFAD33; } .critical { background: #FFCCAA; border: 1px solid #FF3334; } .help { background: #9FDAEE; border: 1px solid #2BB0D7; } .info { background: #9FDAEE; border: 1px solid #2BB0D7; } .warning { background: #FFFFAA; border: 1px solid #FFAD33; } ich komm nicht weiter... jemand ne idee? mit java kenn ich mich ned aus deswegen würde ich da nur ungerne umsteigen. *EDIT* Die lösung ist JS: Code: $(document).ready(function() { $(function() { var zIndexNumber = 1000; $(’div’).each(function() { $(this).css(’zIndex’, zIndexNumber); zIndexNumber -= 10; }); }); }); lg tee Geändert von teewurst (08.04.2011 um 21:04 Uhr). Grund: fehler gefudnen aber nachbehebung ummer noch das gleiche


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

08.04.2011, 16:30
mermshaus Erfahrener Benutzer Registriert seit: 14.06.2009 Beiträge: 1.725 PHP-Kenntnisse: Fortgeschritten	Java ist nicht JavaScript. (Angenommen, du meintest nicht tatsächlich Java. ) Es ist mir außerdem nicht gelungen, irgendeine Form von sichtbarer Ausgabe zu produzieren. Du musst bedenken, dass wir lokal die Grafiken nicht vorliegen haben. PHP-Code: `switch ($Art){ case c: $Art='critical'; break; case i: $Art='info'; break; case h: $Art='help'; break; case w: $Art='warning'; break; };` Setze die Buchstaben hier in Anführungszeichen. Edit/@ChrisB: Oooops. Soooorry. __________________ Blog \| Buch \| Kaloa Geändert von mermshaus (08.04.2011 um 16:39 Uhr).

08.04.2011, 17:52
teewurst Neuer Benutzer Registriert seit: 28.11.2010 Beiträge: 13 PHP-Kenntnisse: Anfänger	vielen dank für die antworten verstehe. Also ist es nicht elaubt ein Blockelement in eine line-element zu packen. dennoch löst das nicht das problem. selbst wenn ich das div durch ein span element ersetzte (sieht zwar schecklich aus aber es gibt um die "anzeigenreihenfolge") ist es immer noch so dass das der tooltip über dem bild steht wie kann ich dies erlauben? insofern dies natürlich geht

08.04.2011, 17:52
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Evtl. das hier: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

08.04.2011, 20:58
teewurst Neuer Benutzer Registriert seit: 28.11.2010 Beiträge: 13 PHP-Kenntnisse: Anfänger	hey also ich habe etwas gefunden was auch dieses problem behebt (der normae workaround geht hier nicht das das img im gleichen element ist) aber hiermit: Code: $(document).ready(function() { $(function() { var zIndexNumber = 1000; $(’div’).each(function() { $(this).css(’zIndex’, zIndexNumber); zIndexNumber -= 10; }); }); }); im head geht es wunderbar! viel dank nikosch usste nicht das es bug des explorers ist und danke an die anderen für die mühe und tipps

08.04.2011, 21:10
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Habs auch per Google gefunden „ie z-index bug“ … __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

08.04.2011, 21:11
nikosch moderatives Dielektrikum Registriert seit: 21.05.2008 Beiträge: 35.987 PHP-Kenntnisse: Fortgeschritten	Ach so ja, … erster Suchtreffer. Denk mal drüber nach. __________________ -- One pixel is still too big. Please make it smaller. ASAP. Initiative Mittelstand. Die wichtigste Gestaltungsregel im Screendesign ist Pi mal Daumen des Arbeitgebers. --

08.04.2011, 21:16
teewurst Neuer Benutzer Registriert seit: 28.11.2010 Beiträge: 13 PHP-Kenntnisse: Anfänger	naja ich bin auch google fan ^^ nur ich dachte das das an meiner leihenhaftigkeit lag aber ok darauf hätte ich auch selber kommen können