| Autor | Zpráva | ||
|---|---|---|---|
| Tori Profil |
#1 · Zasláno: 23. 7. 2012, 08:39:29
Pěkný den přeju. Mám na stránce x odkazů, každý má nějakou třídu a podle ní dostane obrázek na pozadí. U některých odkazů se ale obrázek nezobrazuje. Odkazy bez obrázky jsou (v rámci jedné stránky) vždy tytéž, i po znovunačtení stránky či promazání cache, v kódu se imho nijak neliší od těch, kterým se obrázek zobrazil. Projevuje se v MSIE 8, v IE Testeru ve ver. 8, 7, 6, 5.5. Nesetkali jste se s podobným problémem? Nevíte, čím by to mohlo být? ukázka 1, ukázka 2
Rozdíl mezi verzemi je jen v tom, že ve verzi 5.5 (IE Tester) je trochu větší písmo, čímž se některé odkazy dostanou do jiné části řádku a bez obrázků jsou pak trochu jiné odkazy než ve vyšších verzích. Vypadá to, že všechny chybějící ikonky jsou u levého okraje bloku, ale nenašla jsem nic, co by to mohlo nějak překrývat. Díky moc za radu. |
||
| Keeehi Profil |
#2 · Zasláno: 23. 7. 2012, 09:17:05
http://2i.cz/2i/i/500d0554/57795d6b08dfe1aa44c1375675e5300b/6fc33e14c7.f.png
Ten tag a se roztáhne přes celou šířku a 100% se pak počítá právě z celé šířky. Když jsem to změnil na 6%, tak trochu vykukuje. Nejjednodušší řešení je nenechat odkaz zalomit. |
||
| Tori Profil |
Keeehi:
Jako horizontální pozici na 6%? To ale pak je obrázek přes text místo vedle něj. Co je ten odkázaný 1x1px obrázek? Nezalamování jsem zkusila (white-space: nowrap), obrázkům nepomohlo. Zajímavé je, že při malé hodnotě horizont.pozice (třeba 1%) se to u různých odkazů počítá jinak - u těch, které začínají na zač. řádku (nebo jsou zalomené přes 2 řádky) je obrázek výrazně dál, než u ostatních. Asi podle toho, jestli se 1% počítá ze šířky odkazu nebo stránky. Napadlo mě pozicovat obrázek na right 60%, ale kombinace klíč.slov s procenty prý funguje až od CSS 2.1. Ještě si s tím pohraju. Každopádně děkuju za potvrzení, že to je problém jen těch odkazů a ne ještě něčeho dalšího.
|
||
| Keeehi Profil |
#4 · Zasláno: 23. 7. 2012, 13:21:31
Tori:
„Co je ten odkázaný 1x1px obrázek?“ To měl být tento obrázek. Nějak zmiznul. Když jsem zkoušel right a nějaký textový k tomu, stejně tomu right nepomohl. „Nezalamování jsem zkusila (white-space: nowrap), obrázkům nepomohlo.“ Takže i když se odkaz nezalomil, obrázek se neobjevil? Tomu se mi nechce věřit. |
||
| margin Profil * |
#5 · Zasláno: 23. 7. 2012, 13:26:05
Tori:
„Napadlo mě pozicovat obrázek na right 60%, ale kombinace klíč.slov s procenty prý funguje až od CSS 2.1.“ Některé starší prohlížeče měly s takovou kombinací problémy. right 60% lze zapsat jako 100% 60%, další info v CSS specifikaci - http://www.w3.org/TR/CSS21/colors.html#propdef-background-position
|
||
| Tori Profil |
Keeehi:
Musím teď od stroje, ale ještě na to odpoledne kouknu a ověřím to nezalamování. Pořád nevím, jak odlišit odkazy, kde se šířka počítá ze šířky stránky. Na tom screenu nad zakroužkováním - Jaroslav Putík - nezalamuje se uprostřed odkazu, ale začíná normálně na zač.řádku, a přesto je 6% ze šířky stránky. margin: 100% 60% je právě ta původní zlobivá verze.
|
||
| panther Profil |
Tori:
„ale kombinace klíč.slov s procenty prý funguje až od CSS 2.1“ nevim, od kdy presne funguje, ale minimalne od IE6 bys problem mit nemela nikde. Navzpominam si, ze bych nekdy na nejaky takovy nekde narazil. Ted to netestuji, ale o zadnem takovem prohlizeci aktualne nevim, mozna me nekdo opravi. |
||
| Keeehi Profil |
#8 · Zasláno: 23. 7. 2012, 13:41:10
Tori:
Tak jsem zakouzlil a vykouzlil jsem toto: zoom: 1; - Když jsem to přidal k odkazu, spravilo se to.
|
||
| Tori Profil |
#9 · Zasláno: 23. 7. 2012, 20:55:05
panther:
Zběžně jsem zkusila right x% v IE a pozicování funguje ok. Dohledám si nějakou tabulku podpory CSS v různých verzích prohlížečů. (chybu pozadí to ale neovlivnilo)
Keeehi: To je moc pěkný kouzlo, funguje. :-) Děkuju velmi pěkně. Jen by mě ještě zajímalo, proč zoom zároveň funguje jako white-space: nowrap a navíc řeší problém s pozadím. Má to něco společného s has-layout?
„Takže i když se odkaz nezalomil, obrázek se neobjevil? Tomu se mi nechce věřit.“ Tak tak. Screeny z Win Vista, pro white-space: nowrap: v5.5, v6, v7, v.8 stejná jako v.7.
Zkoušela jsem i white-space: pre a potvrzuji chybu zmíněnou na JPW („pokud nastavíte white-space: pre; řádkovému (inline) prvku, chová se celý vnější blokový prvek, jako by měl toto nastavení“), s tím, že jako jeden řádek se mi zobrazil nikoli celý odstavec, ale jen jeho část - od prvního odkazu, který je na zač.řádku nebo se zalamuje, až do konce odstavce. Prostě i přes toto nastavení dokázal MSIE odkaz zalomit, sláva mu! :) screeny: v5.5 (stejné jako s hodnotou nowrap), v6 (rozbitý layout jako bonus), v7, v8.
|
||
| Chamurappi Profil |
#10 · Zasláno: 23. 7. 2012, 21:43:16
Reaguji na Tori:
„Zběžně jsem zkusila right x% v IE a pozicování funguje ok.“ Explorer s tolerováním podobného zápisu začal již hodně dávno navzdory CSS 2. Vzpomínám si, že ostatní prohlížeče takovou laxnost docela dlouho tvrdě kritizovaly… pak nakonec couvnuly a prosadily změnu ve specifikaci. Dalším novým uvolněním v CSS 2.1 je, že background-position smí fungovat i na řádkových elementech, byť není vůbec definováno jak přesně. Takže jsou dvě možné interpretace a Explorer si bohužel vybral zrovna tu, která je v drtivé většině případů úplně k ničemu :-)
„Jen by mě ještě zajímalo, proč zoom zároveň funguje jako white-space: nowrap a navíc řeší problém s pozadím. Má to něco společného s has-layout?“ Ano. Některé vlastnosti (včetně zoomu) způsobují, že se element začne chovat, jako by měl display: inline-block. Pak vlastně už není řádkový, vnitřek se nezalamuje (není-li zadaná šířka), ale přesto celek leží na řádku.
Já podobný problém řeším většinou tak, že upravím HTML — přidám na konec odkazu prázdný element a obrázek nastavím do něj. |
||
| Petr ZZZ Profil |
#11 · Zasláno: 23. 7. 2012, 21:59:32
Reaguji na Chamurappiho:
„Já podobný problém řeším většinou tak, že upravím HTML — přidám na konec odkazu prázdný element a obrázek nastavím do něj.“ Například takhle nějak? <a href="#"><span><img src="obrazek.jpg"></span></a> Nebo takhle? .pozadi { background-image:url(obrazek.jpg); }
<a href="#"><span class="pozadi"></span></a> |
||
| panther Profil |
#12 · Zasláno: 24. 7. 2012, 08:55:30
Petr ZZZ:
nestudoval jsem cele vlakno, ale k tomu, co napsal Chamurappi: z tebou uvedenych druha moznost, protoze, pokud vim, bavime se o pozadi. V prvnim prikladu uvadis <img>, ktery se pro pozadi nepouziva, navic by tam byl zbytecny ten obalovy span. Ke vsemu neni prazdny, psalo se o prazdnem elementu.
|
||
|
Časová prodleva: 1 měsíc
|
|||
| Tori Profil |
Nakonec jsem přece jen použila Chamurappiho řešení ([#10], děkuju), protože pozadí bylo špatně pozicované i v Opeře (ver.12, 11, 10, 9, 8, 7.23). white-space ani zoom v Opeře nepomohly, kupodivu se ale vždy správně zobrazily odkazy v seznamech - oproti rozbitým odkazům v odstavcích. Prázdné
<span>y mají display: inline-block (a zoom: 1 pro MSIE), a pevné rozměry podle obrázku na pozadí.
|
||
|
Časová prodleva: 12 let
|
|||
0