Autor Zpráva
kuba95
Profil
Zdravím,
mám problém s pozicováním schovaného <span> ve Firefoxu. V ostatních prohlížečích to jede normálně. Na webu http://m.mzf.cz/rezervace/ se mi po najetí krysou na buňku v kalendáři zobrazí nad kalendářem políčko s nějakým textem. Tak to funguje ve všech prohlížečích kromě FF. Ten to políčko srovnává podle levého horního okraje stránky a ne podle té buňky tabulky jako všechny ostatní prohlížeče.

buňka vypadá takto:
<td width="30" class="tooltip" title="Tento týden již nelze vybrat" id="r3" style="background-color: #ff1919">9<span>Pája,Markéta,Adam,Pája</span></td>

CSS:

.tooltip {
  z-index: 0;
    position: relative;
}

.tooltip span {
  display: none;
    position: relative;
}

.tooltip:hover span {
  display: block;
  left: -20px;
  background: #bcc37d;
    position: absolute;
    color: #000000;
    padding: 10px;
    z-index: 10;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
}

Tady na diskusi jsem si našel, že by mělo stačit dát position: relative; tomu .tooltip span ale nějak mi to nefunguje.

Prosím o pomoc.
rafej
Profil
odstranit
.tooltip: span{
  position: relative;
}
a
.tooltip:hover span{
  left: -20px;
}

Mimochodem IE9 ti nebude zobrazovat border-radius u .tooltip:hover span a taky tam máš místo background-color pouze background.
Bubák
Profil
rafej:
tam máš místo background-color pouze background
Pokud kuba95 ví, že pokud použije background, tak tím nastaví všechny hodnoty pro pozadí, kromě deklarovaných, na výchozí hodnoty, tak to ničemu nevadí. Já osobně upřednostňuji background, background-něco deklaruji třebas při hoveru.
kuba95
Profil
Děkuji za radu, bohužel to pořád nefunguje... Neví někdo co s tím? (aktuální stav stále na http://m.mzf.cz/rezervace/ )
kuba95
Profil
Tak jsem to nakonec vyřešil jinak...
Řešení pro náhodné návštěvníky tohoto vlákna:

<td width="30" class="tooltip" title="Tento týden již nelze vybrat" style="background-color: #ff1919">9<span>Pája,Markéta,Adam,Pája</span></td>

.tooltip:hover>span {
  visibility: visible;
  opacity: 1;
}

.tooltip span {
  visibility: hidden;
  position: absolute;
  display: block;
  background: #bcc37d;
  color: #000000;
  padding: 10px;
  z-index: 10;
  border-radius: 15px;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;

}

Živá ukázka

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: