1 px Hüpfer

[Red5]

Hallo

mit diesem CSS-Code generiere ich einen Tooltip für einen Link.

Im IE klappt das klasse, aber im FF hüpft mir der restliche Code beim hovern ca. 1 px nach Links.

Hat jemand ne Ahnung, warum?

Grüße, Red5

[MudGuard]

Hi,

mit diesem CSS-Code generiere ich einen Tooltip für einen Link.

Mit welchem Code?

Im IE klappt das klasse, aber im FF hüpft mir der restliche Code beim hovern ca. 1 px nach Links.
Hat jemand ne Ahnung, warum?

Nö, wie auch?

cu,
Andreas

[Red5]

.tip { border-bottom:1px dotted #000000; cursor:help; }
a.tip,
a.tip:link,
a.tip:visited,
a.tip:active { color: #616161; text-decoration: none; position: relative; }
a.tip:hover { background: transparent; z-index: 100; }
a.tip span { display: none; text-decoration: none; }
a.tip:hover span {
display: block;
position: absolute;
top: 40px;
left: -50;
width: 100px;
z-index: 100;
color: #2f2f2f;
font-family: Verdana;
padding: 2px 10px;
background-color: #ebebeb;
text-align: left;
border-color: #780303;
border-style: solid;
border-width: 1px; }

-----------------------------------------------------

  
<A class=\"tip\" HREF=\"suche".$prefix.".php?xyz=".$row[0]."&amp;abc=".$row[2]."\">  
<img src=\"./mein_bild.gif\" border=0>  
<span>Text<br/>der Hilfe</span></a>  

[Malcolm Beck´s]

hi,

<A class="tip" HREF="suche".$prefix.".php?xyz=".$row[0]."&amp;abc=".$row[2]."">
<img src="./mein_bild.gif" border=0>
<span>Text<br/>der Hilfe</span></a>

  
Das ist ungültiges HTML, es wäre ein Wunder, wenn überhaupt ein Browser bei diesem HTML ein Bild anzeigen würde.  
  
~~~html
<a class="tip" href="suche.php?xyz=wau&amp;abc=wai">  
<img src="./mein_bild.gif" alt="Dein bild">  
<span>Text<br />der Hilfe</span></a>

Was verwendest du, HTML oder XHTML?
Du hast von beidem etwas in deinem HTML -- entweder das Bild wird falsch eingebunden, wenn es sich um XHTML handelt, oder der Zeilenumbruch ist Fehlerhaft (wobei das wohl kein Problem darstellen sollte), wenn du mit HTML arbeiten solltest.

Lesetipp: http://1ngo.de/web/infobox.html

mfg

[Red5]

Lesetipp: http://1ngo.de/web/infobox.html

mfg

Nett. Wenigstens dann, wenn der Tooltip relativ zum Link auftauchen würde und nicht absolut an Stelle XY ;)

Was muss ich hierzu ändern? Weißt Du das eventuell?

[Detlef G.]

Hallo Red5

Nett. Wenigstens dann, wenn der Tooltip relativ zum Link auftauchen würde und nicht absolut an Stelle XY ;)

Dann hast du etwas falsch gemacht. Er taucht bei mir immer direkt unterhalb des gehoverten Links auf.
Welche Ausrichtung er in horizontaler Richtung haben soll, kannst du mit der Angabe für left unter a.infobox:hover span, a.infobox:focus span, a.infobox:active span {} angeben.

Wenn er komplett relativ zum Link auftauchen soll, dann kannst du diesem position:relative mitgeben, aber Achtung, wenn der Link zufällig am Fensterrand steht, dann könnte der Infotext dann durch diesen abgeschnitten werden. (links kann man eventuell scrollen, rechts wäre er dann unerreichbar)

Auf Wiederlesen
Detlef

[Malcolm Beck´s]

hi,

Was muss ich hierzu ändern? Weißt Du das eventuell?

Siehe Detlefs Post, dem kann ich mich nur anschliessen.

Ich verstehe zwar, was du möchtest, nur ist deine Idee mit nur CSS nicht lösbar.

Wenn du die einzublendende Box immer direkt am Link ausrichtest, der das einblenden auslöst, dann müsstest du vorher wissen, ob nach Rechts hin genügend platz für die Box exisitiert, ansonsten müsste die Box verschoben werden, damit sie auch ganz zu sehen ist -- mit CSS wird das in dieser Form nicht zu lösen sein.

mfg