Monatskalender mit Terminen als Tooltip; Probleme im IE!

Status
Nicht offen für weitere Antworten.

Marokaner

Mitglied
Ich habe auf unserer Vereinshomepage http://www.weisachtaler-blasmusik.de/start.php eine Terminverwaltung eingebaut. Dabei sind die Tage an denen ein Termin stattfindet farblich hervorgehoben. Beim MouseOver sollen die Infos zu dem Termin per ToolTip angezeigt werden. Schaut's euch am besten mal an!
Während das ganze im Firefox und Opera problemlos funktioniert, macht der IE nicht mit!

Die Tooltips sollen durch CSS dargestellt werden und basieren auf das Beispiel von http://www.ohne-css.gehts-gar.net/0012.php
Komischerweise funktioniert auf dieser Seite der Tooltip auch im IE.

Ich finde aber meinen Fehler nicht. Vielleicht findet ihr ihn ja. Ich bitte um Hilfe.

Hier mein verkürzter Quellcode der kalendertooltip.php:

In der Fallunterscheidung wird im 1. Fall ein Tooltip erzeugt, weil für den aktuellen Tag ein Termin vorhanden ist.
PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="de">
<head>
   ...
<style type="text/css">
 div.info{
position:relative;
z-index:11;
text-decoration:none;
}

div.info:hover{
z-index:12;
}

div.info span{
display: none;
}

div.info:hover span{
display:block;
position:absolute;
top:2em;
left:2em;
width:20em;
border:1px solid #12127D;
color:#000;
text-align: left;
padding: 5px;
}

</style>
<body>

...

    <?php
    // *** START Monatskalender ***

      // ... Kalenderkopf wird generiert
	
	/**
	*  Termine aus der Datenbank holen
	*/

	// Verbindung zu Datenbank herstellen
	$db = new mysqli("host", "nutzername", "passwort", "datenbankname");
	if(mysqli_connect_errno())
		die(mysqli_connect_error());
	if($result = $db->query("select DATE_FORMAT(Datum, '%d'), DATE_FORMAT(Datum, '%d.%m.%y'),  DATE_FORMAT(Datum, '%H.%i' ), Ort, Bezeichnung, Beschreibung, Farbe from wbmtermin t1, wbmterminart t2 where t1.ArtNr=t2.ArtNr ORDER BY Datum"))
	{
		$i = 0;
		$arrayzaehler = 0;
		while($data = $result->fetch_array(MYSQLI_BOTH))
		{
			$tage[$i]=$data["0"];
			$farbe[$i] =$data["Farbe"];
			$taginfo[$i] =$data["1"];
			$zeitinfo[$i] =$data["2"];
			$ort[$i] =$data["Ort"];
			$bez[$i] =$data["Bezeichnung"];
			$beschreibung[$i] =$data["Beschreibung"];
			$i++;
		}	
		$result->close();
	}
	$db->close();
		
	// Füllung der Kalendertabelle: i ist der aktuell einzutragende Tag
    $i=1;
    while($i<=$insgesamt)
    {
	    // Ermitlung des Wochentags für den Tag i
	    $rest=($i+$erster-1)%7;
	    // erstmalige Unterscheidung zwecks Layout Heute oder nicht!
	    if($i==$heute){
		    echo "<td style=\"font-size:11px; font-family:Arial; background:#ff0000;\" align=center>";
		    // Wenn es an diesem Tag einen Termin gibt muss der Array-Zähler erhöht werden
		    if($tage[$arrayzaehler] == $i){
					$arrayzaehler++;
			}	
		}
		// nicht heute
		else{
			// Nur wenn Termine für diesen Monat vorhanden sind wird in diese Schleife gesprungen
			if($tage[0]!=""){
				// 1. Fall: Für den aktuellen Tag i ist ein Termin vorhanden -> Tooltip erzeugen!
				if($tage[$arrayzaehler] == $i){
						echo "<td style=\"font-size:11px; font-family:Arial; background:".$farbe[$arrayzaehler].";\" align=center>";    
						echo "<div class=\"info\">";
				}		
				// 2. Fall: Für den aktuellen Tag i ist kein Termin vorhanden
				else{
					echo "<td style=\"font-size:11px; font-family:Arial\" align=center>";
				}				
			}	
			// Es sind keine Termine mehr in diesem Monat vorhanden
			else{
				echo "<td style=\"font-size:11px; font-family:Arial\" align=center>";
			}
		}



		// Prüfe ob Termine für diesen Tag vorhanden sind. Dann wird der Tooltip angezeigt!
			if($tage[0]!=""){
				//Für den aktuellen Tag i ist ein Termin vorhanden
				if($tage[$arrayzaehler] == $i){
						echo "<span style=\"background-color:".$farbe[$arrayzaehler].";\"><b>Datum: </b>".$taginfo[$arrayzaehler].", ".$zeitinfo[$arrayzaehler]." Uhr<br/><b>Ort:</b> ".$ort[$arrayzaehler]."<br/><b>Bez.:</b> ".$bez[$arrayzaehler];
						if($beschreibung[$arrayzaehler] != null) { 
							echo "<br/><b>Info:</b><br/>".$beschreibung[$arrayzaehler];
						}
						echo "</span></div>";
						$arrayzaehler++;
				}	
		}

		// Schließen der Zellen
	    echo "</td>\n";
	    // neue Zeile einfügen
	    if($rest==0){
		    echo "</tr>\n<tr>\n";
		}
	    $i++;
    }
    echo "</tr>\n";
    echo "</table>\n";
    // *** ENDE Monatskalender ***
        
    ?> 

</td></tr>
</table>

</body>

</html>
 

Anhänge

  • kalendertooltip.zip
    2,3 KB · Aufrufe: 25
Hi,

der IE6 unterstützt nicht die allgemeine Pseudoklasse div.info:hover.

Dass es hingegen im Original-Beispiel funktioniert, liegt daran, dass dort Links verwendet werden, und demnach a.info:hover zum Einsatz kommt, was der IE6 wiederum unterstützt.

mfg Maik
 
Ich hatte es am Anfang auch mit Links! Da hatte es ebenfalls im IE nicht funktioniert! Und im Opera auch nicht. Nur im Firefox!
Wie gesagt: Ich habe mich anfangs komplett an dem o. g. Beispiel orientiert und auch alles so übernommen.
Erst als es nicht funktioniert hat, hab ich auf die divs umgestellt! Dann ging's wenigstens im Opera!

Daran liegt es also nicht!

Aber trotzdem danke!
 
Du darfst mir ruhig vertrauen, dass es daran liegt.

Wenn es bei den Links nicht mehr funktioniert hat, dann hat entgegen dem Original-Beispiel in diesem Selektor wohl die background-color-Deklaration gefehlt, womit der CSS-Tooltip im IE ebenfalls nicht mehr funktioniert.

Code:
a.info:hover
{
z-index:2;
background-color:#C0FF3E;
}
Der Eigenschaftswert kann auch auf none umgestellt werden, wenn hier keine Hintergrundfarbe erwünscht ist. Ebenso gibt sich der IE6 hier anstelle dieser Angabe mit border:none zufrieden.

mfg Maik
 
Gut dass du so hartnäckig geblieben bist. Es funktioniert wirklich!
Aber noch nicht so wie ich es mir vorgestellt habe!

1.) Ich möchte eben nicht, dass sich beim MouseOver der Link grün einfärbt. Deshalb hatte ich wirklich die Farbangabe weggelassen. Gibt es da einen Trick das zu umgehen?

2.) Jetzt spinnt der Opera-Browser. Die Toolitpps erscheinen nur beim MouseKlick und nicht beim MouseOver. Und wenn ich auf ein zweites Datum gehe, bleiben Reste des Tooltipps vom vorherigen Datum auf dem Bildschirm stehen. Sieht dann aus wie ein Grafikfehler!

3.) Im Opera hab ich noch einen Fehler, den man aber in der von mir hochgeladenen Datei nicht sieht. Wenn ich die PHP-Datei in meine o.g. Webseite einbaue, dann zeigt er mir (wieder erst nach dem MouseKlick) die Tipps an der völlig falschen Stelle mitten im Bildschirm an. Das hat wohl was mit der absoluten Positionierung und der Angabe von Left und Top-Werten zu tun. Wenn ich diese auskommentiere hab ich das Problem nicht.
Aber ich brauche die Abstände.
Was kann man da tun?
 

Anhänge

  • kalendertooltip.zip
    2,3 KB · Aufrufe: 16
Sorry, dass hab ich wirklich nicht wahrgenommen! Liegt vielleicht daran, dass ich schon seit ner halben Ewigkeit damit mit dieser Terminverwaltung fertig sein sollte und ich allmählich so richtig genervt bin.

Aber wie löse ich jetzt das Problem mit dem Opera-Browser? In dem Beispiel gab's doch auch keine Probleme mit Opera
 
Lad doch bitte mal die aktuelle Version auf deinen Webspace, denn ohne die erforderliche DB-Anbindung lässt sich mit deinen Attachments nichts anfangen.
Warning: mysqli::mysqli() [function.mysqli]: (HY000/2005): Unknown MySQL server host 'host' (11001) in D:\WebPublish\XAMPP\xampp\htdocs\test\php\kalendertooltip.php on line 85
Unknown MySQL server host 'host' (11001)


mfg Maik
 
Hab jetzt die aktuelle Version auf meinen Webspace hochgeladen.

Was ganz komisch ist:
Auf meinem localhost treten die oben geschilderten Probleme auf (Tooltip wird nach Klick an falscher Stelle angezeigt), auf meinem Webspace wird der Tooltip im Opera gar nicht angezeigt!

Keine Ahnung warum?
 
Hi,

Opera 9.5 zeigt mir den Tooltip (ohne Mausklick) an, und auch die Positionsangaben stimmen mit den übrigen Browsern überein.

mfg Maik
 
Status
Nicht offen für weitere Antworten.
Zurück