| Autor | Zpráva | ||
|---|---|---|---|
| kuba95 Profil |
#1 · Zasláno: 15. 3. 2014, 17:39:54
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;
}.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 |
#3 · Zasláno: 15. 3. 2014, 19:35:42
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 |
#4 · Zasláno: 15. 3. 2014, 21:17:08
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 |
||
|
Časová prodleva: 10 let
|
|||
0