zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit ToolTip im IE

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 13.01.2007, 00:06
t2x t2x ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.01.2007
Beiträge: 3
t2x befindet sich auf einem aufstrebenden Ast
Standard Problem mit ToolTip im IE

Hallo Leute,

ich hab in letzter Zeit dieses Forum sehr stark gelesen.
Oftmals hab ich bereits meine Probleme loesen koenne, aber
dieses mal komm ich nicht weiter.

Ich will einen Tooltip per CSS einblenden lassen. Das ganze
funktioniert soweit auch ueber die :hover-Methode. Fuer den
IE hab ich noch folgende IEFixes.htc eingebunden
Code:
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="DoHover()" />
<PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="RestoreHover()" />
<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="DoActive()" />
<PUBLIC:ATTACH EVENT="onmouseup"   ONEVENT="RestoreActive()" />
<SCRIPT LANGUAGE="JScript">
function DoHover()
  { element.className += ' hover';    
  }

function DoActive()
  { element.className += ' active';
  }

function RestoreHover()
  { element.className = element.className.replace(/\shover\b/,'');
    element.className = element.className.replace(/\sactive\b/,'');
  }

function RestoreActive()
  { element.className = element.className.replace(/\sactive\b/,'');
    element.className = element.className.replace(/\shover\b/,'');
  }
</SCRIPT>
Das Problem ist nun, dass im IE zwar der Hover-Effekt funktionert,
aber irgendwie bei einem <span> mit Hintergrundfarbe der Rahmen
dahinter durchscheint. Auch ein z-index hat nix gebracht.
Zu sehen ist das ganze hier http://fabisch.org/temp/index.html
wenn man ueber die farbigen Balken faehrt.

Eine Reihe in der ein Tooltip angezeigt werden soll sieht dabei so aus
Code:
<div class="result">
  <div class="outer">
    <span class="inner" style="min-width:0em;background-color:green;width: 33.3333333333%;">
      <span class="innerText">25 % (1 Stimme)
	 <span class="toolTip">
		<span class="fett">User:</span>User23 und noch ganz viel weitere Text der jetzt umgebrochen wird
		</span>
	</span>
    </span>
  </div>
  <div class="clear"></div>
</div>
Das komplette CSS-Style liegt in http://fabisch.org/temp/style.css
Die meiner Meinung nach wichtigen Dinge sind
Code:
#AbstErgebnisse .result{margin-top:1em;margin-bottom:1em;behavior: url('IEFixes.htc');}
#AbstErgebnisse .result .toolTip{font-size:10pt;display:none;border: 1px solid black;background-color:white;}
#AbstErgebnisse .result:hover .toolTip, #AbstErgebnisse .result.hover .toolTip{
	display:block;
	border: 1px solid black;
	position:relative;
	left:7em;
	width:10em;
	top:0em;
	white-space:normal;
        z-index:2;
	}
#AbstErgebnisse .fett{font-style: italic;font-weight:600;}
Kann mir irgendeiner erklaeren warum es dazu kommt und noch besser
wie ich das abstellen kann? Waere echt super

Vielen Dank
t2x
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 13.01.2007, 11:34
CMS-Entwickler
XHTMLforum-Mitglied
 
Registriert seit: 26.08.2006
Beiträge: 499
javaFreak befindet sich auf einem aufstrebenden Ast
Standard

Warum benutzt du nicht das title-Attribut?
__________________
Liebe Grüße,
Lukas aus Bocholt
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 13.01.2007, 12:04
t2x t2x ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.01.2007
Beiträge: 3
t2x befindet sich auf einem aufstrebenden Ast
Standard

Ich möchte ja gerne noch Formatierungen an den ToolTips vornehmen und das ist soviel ich weiss bei nem title-Attribut nicht möglich.
Oder funktioniert dort sowas ala
Code:
title="<span class=fett>Text1</span> anderer Text"
Das dürfte wohl nicht gehen. Lass mich da aber auch gerne eines besseren
belehren. Achja und nicht zu vergessen ich möchte weitestgehend auf JavaScript und co. verzichten wann immer das möglich ist.

gruss
t2x
Mit Zitat antworten
  #4 (permalink)  
Alt 13.01.2007, 14:22
CMS-Entwickler
XHTMLforum-Mitglied
 
Registriert seit: 26.08.2006
Beiträge: 499
javaFreak befindet sich auf einem aufstrebenden Ast
Standard

Nein, das geht auch nicht. Alle Browser bis auf den IE ignorieren Formatierungen innerhalb des title-Attributs. Das title-Attribut ist dafür da, um Elemente genauer zu beschreiben.
__________________
Liebe Grüße,
Lukas aus Bocholt
Mit Zitat antworten
  #5 (permalink)  
Alt 13.01.2007, 15:06
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.779
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zitat:
Zitat von t2x Beitrag anzeigen
Das Problem ist nun, dass im IE zwar der Hover-Effekt funktionert, aber irgendwie bei einem <span> mit Hintergrundfarbe der Rahmen dahinter durchscheint.
Der Tooltip liegt immer hinter dem nachfolgenden Ergebnis, weil der IE bei jedem positionierten Element (bei dir ab .outer) auch ohne z-index-Angabe einen Stacking Context beginnt.
http://www.aplus.co.yu/lab/z-pos/

Das Problem sollte sich lösen lassen, indem du bei .hover den äußersten positionierten Container per z-index nach vorne holst:
Code:
#AbstErgebnisse .result.hover .outer {
    z-index:1;
    }
[Falls der IE7 das Problem auch noch hat, dann auch für :hover]
Mit Zitat antworten
  #6 (permalink)  
Alt 13.01.2007, 16:46
t2x t2x ist offline
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 12.01.2007
Beiträge: 3
t2x befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von fricca Beitrag anzeigen
Das Problem sollte sich lösen lassen, indem du bei .hover den äußersten positionierten Container per z-index nach vorne holst:
Code:
#AbstErgebnisse .result.hover .outer {
    z-index:1;
    }
Geht einwandfrei.
Vielen Dank da wär ich alleine nie draufgekommen
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Problem mit Text neben Navigationsleiste andi01 CSS 6 08.06.2011 17:54
IE8 Problem - CSS tooltip verschiebt Menüpunkte kenobi CSS 1 17.02.2011 16:34
Design zu CSS/HTML verarbeiten - Problem häufen sich. Grafikamateur CSS 2 06.08.2007 10:57
Problem mit Tooltip und Bild s6-roXx CSS 6 03.04.2007 15:32
Problem bei Div's - zwei mal das gleiche und doch nicht ... Niriel CSS 10 09.06.2005 18:39


Alle Zeitangaben in WEZ +2. Es ist jetzt 15:01 Uhr.