CSS: Firefox intepretiert Tooltip falsch

PsychoEagle · 28.11.2006, 16:33

Hi,

habe ein Problem. Ich mach mit Hilfe von CSS ein paar Tool Tips. Weiter unten kommt Quellcode.

Das Problem: Der Internet Explorer zeigt sie an der richtigen Stelle an. Der Firefox zeigt sie weiter unten an (die angegebene Position addiert mit der Pixelhöhe des Linkes (ein Bild)).

Hier der CSS-Code:

Code:

a.tooltip, a.tooltip:link, a.tooltip:visited, a.tooltip:active  {
  position: relative;
}
  
a.tooltip:hover {
  background: transparent;
  text-decoration:  none; 
}

a.tooltip span {
  display: none;  
  text-decoration:  none; 
}

a.tooltip:hover span {
  display:          block;
  position:         absolute; 
  top:              94px; 
  left:             0; 
  padding:          0px 4px;
  z-index:          100;
  color:            #4F4F4F; 
  border:           2px solid #BFA163; 
  background:       #E5CA8E;
  text-decoration:  none; 
}

In meiner HTML Datei sieht es dann so aus:

Code:

  <div style="position:relative;left:265px;">
    <a href="pdf/broschuere/parinobel.pdf" target="_blank" class="tooltip">
    [img]img/bilder/finanzcoaching/parinobel.jpg[/img]
    <span>PARI NOBEL</span>
    </a>
  </div>

und hier ein Bild, wie es aussehen soll (IE zeigt richtig an) und wie es im FF angezeigt wird.

Weiß jemand, wie ich das beheben kann? Falls ihr noch mehr Infos benötigt, bitte sagen.

Ich weiß nicht wie ich da eine Browserweiche oder ähnliches einbauen kann.

Danke fürs drüberschaun und helfen.

MFG

PsychoEagle · 29.11.2006, 14:50

Habs mit einer PHP Browserweiche jetzt schon mal so weit, dass es wenigstens richtig angezeigt wird.

PHP-Code:

  <?php

  if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'ff') OR strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'firefox')) {

    echo '  <link href="tooltip_ff.css" rel="stylesheet" type="text/css">'."\n";

  } else {

    echo '  <link href="tooltip_ie.css" rel="stylesheet" type="text/css">'."\n";

  }

?>

Jedoch bin ich nicht damit zufrieden, dass ich nun 2 CSS Files für den einfachen Tooltip hab. Gibt es keine andere Möglichkeit? Ansonsten muss ich mich damit abgeben. Der User selbst merkt davon ja nichts.

So Far

JEGO · 29.11.2006, 16:57

es gibt die möglichkeit den ff durch einen absichtlichen Fehler auszutricksen...

soll heissen. in deiner css datei erst die daten für ff
dann ein fehler ausgeben und die daten für IE dahinter schreiben.

ff hört beim Fehler auf auszugeben, IE nicht^^ daher wird der erste style überschrieben.

Code:

#test {
margin-bottom: 0px;
_margin-bottom: 3px;
}

FF wird nur bis zum "_" ausgeben, IE übersieht den "_" und gibt den rest aus.

PsychoEagle · 30.11.2006, 10:03

Gute Idee. Aber ist das denn valide? Denn das ist der nächste springende Punkt. Ich bin recht pingelig und ein kleiner perfektionist

Aber die Idee ist nicht schlecht, und ich spar mir 2 Files. Da kann ich bestimmt auch auf die Validität verzichten *g*

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
Firefox / IE - ungeahnte Statistik	pepe24	Off-Topic Diskussionen	10	30.04.2007 16:46
Firefox will mein 3-spaltiges Layout mit Footer nicht (CSS)!	vampsoftchef	HTML, Usability und Barrierefreiheit	1	28.02.2007 00:22
templates oder css mit firefox	rbs_phoenix	HTML, Usability und Barrierefreiheit	1	30.10.2006 15:24
[CSS] Firefox zeigt die Seite falsch an [CSS]	I-Spy	HTML, Usability und Barrierefreiheit	7	03.01.2006 11:51
[Erledigt] window.location.href mit firefox		HTML, Usability und Barrierefreiheit	15	18.11.2005 17:49
window.open mit firefox		HTML, Usability und Barrierefreiheit	3	14.11.2005 17:04
Problem mit Firefox	Diego1978	HTML, Usability und Barrierefreiheit	9	11.09.2005 21:17
[Erledigt] Container im Firefox falsch dargestellt		HTML, Usability und Barrierefreiheit	27	15.08.2005 23:18
[Erledigt] shiftKey bei Firefox abfragen		HTML, Usability und Barrierefreiheit	2	05.08.2005 15:08
Problem mit PFad Firefox - Verzeichnis löschen		PHP Tipps 2005-2	0	19.07.2005 16:05
Deer Park Alpha 1 (=Mozilla Firefox 1.1)		Off-Topic Diskussionen	15	09.07.2005 02:32
[Erledigt] verfluchter Firefox		HTML, Usability und Barrierefreiheit	5	08.07.2005 22:51
DIV IE opera und FireFox: Bei FF und O kein BG	silverghost	HTML, Usability und Barrierefreiheit	11	22.06.2005 20:15
[Erledigt] Script Interpretaion läuft falsch im Firefox		PHP-Fortgeschrittene	23	11.05.2005 19:01
Unterschiedliche Darstellung im IE und Firefox von Preloader		HTML, Usability und Barrierefreiheit	0	03.09.2004 18:27

28.11.2006, 16:33
PsychoEagle there's only one psycho Registriert seit: 21.08.2007 Beiträge: 1.283 PHP-Kenntnisse: Anfänger	CSS: Firefox intepretiert Tooltip falsch Hi, habe ein Problem. Ich mach mit Hilfe von CSS ein paar Tool Tips. Weiter unten kommt Quellcode. Das Problem: Der Internet Explorer zeigt sie an der richtigen Stelle an. Der Firefox zeigt sie weiter unten an (die angegebene Position addiert mit der Pixelhöhe des Linkes (ein Bild)). Hier der CSS-Code: Code: a.tooltip, a.tooltip:link, a.tooltip:visited, a.tooltip:active { position: relative; } a.tooltip:hover { background: transparent; text-decoration: none; } a.tooltip span { display: none; text-decoration: none; } a.tooltip:hover span { display: block; position: absolute; top: 94px; left: 0; padding: 0px 4px; z-index: 100; color: #4F4F4F; border: 2px solid #BFA163; background: #E5CA8E; text-decoration: none; } In meiner HTML Datei sieht es dann so aus: Code: <div style="position:relative;left:265px;"> <a href="pdf/broschuere/parinobel.pdf" target="_blank" class="tooltip"> [img]img/bilder/finanzcoaching/parinobel.jpg[/img] <span>PARI NOBEL</span> </a> </div> und hier ein Bild, wie es aussehen soll (IE zeigt richtig an) und wie es im FF angezeigt wird. Weiß jemand, wie ich das beheben kann? Falls ihr noch mehr Infos benötigt, bitte sagen. Ich weiß nicht wie ich da eine Browserweiche oder ähnliches einbauen kann. Danke fürs drüberschaun und helfen. MFG __________________ "Weaseling out of things is important to learn. It's what separates us from the animals ... except the weasel." (Homer J. Simpson)


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

29.11.2006, 14:50
PsychoEagle there's only one psycho Registriert seit: 21.08.2007 Beiträge: 1.283 PHP-Kenntnisse: Anfänger	Habs mit einer PHP Browserweiche jetzt schon mal so weit, dass es wenigstens richtig angezeigt wird. PHP-Code: `<?php if(strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'ff') OR strpos(strtolower($_SERVER['HTTP_USER_AGENT']), 'firefox')) { echo ' <link href="tooltip_ff.css" rel="stylesheet" type="text/css">'."\n"; } else { echo ' <link href="tooltip_ie.css" rel="stylesheet" type="text/css">'."\n"; } ?>` Jedoch bin ich nicht damit zufrieden, dass ich nun 2 CSS Files für den einfachen Tooltip hab. Gibt es keine andere Möglichkeit? Ansonsten muss ich mich damit abgeben. Der User selbst merkt davon ja nichts. So Far __________________ "Weaseling out of things is important to learn. It's what separates us from the animals ... except the weasel." (Homer J. Simpson)

29.11.2006, 16:57
JEGO Erfahrener Benutzer Registriert seit: 01.12.2003 Beiträge: 2.555 PHP-Kenntnisse: Anfänger	es gibt die möglichkeit den ff durch einen absichtlichen Fehler auszutricksen... soll heissen. in deiner css datei erst die daten für ff dann ein fehler ausgeben und die daten für IE dahinter schreiben. ff hört beim Fehler auf auszugeben, IE nicht^^ daher wird der erste style überschrieben. Code: #test { margin-bottom: 0px; _margin-bottom: 3px; } FF wird nur bis zum "_" ausgeben, IE übersieht den "_" und gibt den rest aus. __________________ Gruß JEGO Ein PHP Script tut, was Du schreibst, nicht was Du willst.

30.11.2006, 10:03
PsychoEagle there's only one psycho Registriert seit: 21.08.2007 Beiträge: 1.283 PHP-Kenntnisse: Anfänger	Gute Idee. Aber ist das denn valide? Denn das ist der nächste springende Punkt. Ich bin recht pingelig und ein kleiner perfektionist Aber die Idee ist nicht schlecht, und ich spar mir 2 Files. Da kann ich bestimmt auch auf die Validität verzichten g __________________ "Weaseling out of things is important to learn. It's what separates us from the animals ... except the weasel." (Homer J. Simpson)