Google Chrome vaikuttaa toimivan virheellisesti määritteen position suhteen. Kyseessä on siis linkki, joka on tehty painikkeen näköiseksi ja sen sisällä on kuvakefonttikuvake. Kuvakke on aseteltu absoluttisella sijainnilla paikalleen.
Kun linkki on :active-tilassa kuvakkeen pitäisi olla 3 pikseliä alempana. Jostain syystä sen sijaiti muuttuu paljon enemmän, mikä ajattlin johtuvan yläkehyksestä (border). Näyttääkin siltä, että positionin top-arvon pitää olla linkin :active-tilassa sama kuin ennen kyseistä tilaa. Chrome kuitenkin näyttää kuvakkeen virheellisesti samalla paikalla kuin ennen linkin :active tilaa.
Linkki koodiin: http://codepen.io/anon/pen/dofsC
Mitä siis teen väärin?
Älä käytä position: absolutea tuolla .fa:ssa
vaan mieluummin jotain tällaista:
a.login .fa {
font-size:18px;
paddin-top:9px;
padding-left:14px;
}
a:active.login .fa {} /* <-- Ongelmakohta */HTML5 kirjoitti:
Näyttääkin siltä, että positionin top-arvon pitää olla linkin :active-tilassa sama kuin ennen kyseistä tilaa.
Tietenkin top-arvon pitää pysyä samana: se mitataan sisältöalueesta, jolloin borderin lisääminen siirtää jo sisältöä.
HTML5 kirjoitti:
Chrome kuitenkin näyttää kuvakkeen virheellisesti samalla paikalla kuin ennen linkin :active tilaa.
Ilmeisesti olet löytänyt bugin selaimesta. Näkyyhän, että jos asetat tuossa ongelmakohdassa top-arvoksi vaikka 9.001px tai 8.999px, Chrome laskee sijainnin uudestaan ja elementti siirtyy oikeaan kohtaan, kun taas arvolla 9px Chrome ilmeisesti jättää uuden sijainnin laskematta, koska jostain syystä se ei rekisteröi, että on tapahtunut muutos.
Hauskasti bugin ilmeneminen vaatii, että alareunasta häviää saman verran reunaa, kuin yläreunaan lisätään. Jos elementin korkeus muuttuu, sisältö sijoitellaan uudestaan.
Tein bugista mallikoodin. Jonkun pitäisi varmaan lähettää aiheesta bugiraportti.
<!DOCTYPE html>
<style>
#top, #a, #b {
border: 1px solid black;
position: absolute;
width: 3em;
height: 3em;
}
#a, #b {
top: 1px;
}
#a {
left: 4em;
}
#b {
left: 8em;
}
#top:not(:hover) {
border-bottom-width: 16px;
}
#top:hover {
border-top-width: 16px;
}
/* When border changes (above), #a fails to move but #b moves correctly. */
#top:hover #a {
top: 1px;
}
#top:hover #b {
top: 1.000001px;
}
</style>
<div id="top"><div id="a">A</div><div id="b">B</div></div>Itse asiassa bugi kävi minullakin mielessä, mutta en ollut uskoa, sillä sama ongelma toistuu Chromen lisäksi myös Internet Explorerilla ja Firefoxilla.
HTML5 kirjoitti:
Itse asiassa bugi kävi minullakin mielessä, mutta en ollut uskoa, sillä sama ongelma toistuu Chromen lisäksi myös Internet Explorerilla ja Firefoxilla.
Ei toistu Firefoxilla ainakaan minulla. Jos toistuisi, en tuota bugia kovin herkästi ehdottaisikaan.
Testaapa vielä esimerkkikoodiani esim. tästä. Odotettu tulos on, että A ja B liikkuvat samalla tavalla, ja näin tapahtuukin minulla mm. Firefoxilla ja Operalla. Sen sijaan Chromiumilla A ei liiku mutta B liikkuu.
Toki jos tarkoitat ”ongelmalla” sitä itse aiheuttamaasi vikaa, että top-arvo vaihtuu 9px:stä 12px:ään, se on ihan oma virheesi. Kuten äsken selitin, top-arvoa ei pidä muuttaa vaan sen pitää olla koko ajan 9px.
Yhdyn Lebe80:n näkemykseen, että absoluuttinen asettelu ylipäänsä on väärä ajatus. Kuva voi aivan hyvin olla tekstin seassa (inline-block), ja asetteluun riittävät margin, line-height ja vertical-align vähän tilanteesta riippuen.
Bugi on WebKit-pohjaisissa selaimissa. IE:t, Firefox ja Opera 12.15 (Presto) toimii OK. Nykyiset Operat, Chrome ja tässä kohtaa jo ikivanha Safari 5.1.7 bugittaa.
Tässä tosiaan se parempi ratkaisu:
a.login .fa {
display: inline-block;
font-size: 18px;
line-height: 1;
margin-right: 5px;
vertical-align: middle;
}Muuttamalla line-heightia pystyy säätämään pystysuuntaista asemointia varsin hyvin.
HTML5 kirjoitti:
Kyseessä on siis linkki, joka on tehty painikkeen näköiseksi ja sen sisällä on kuvakefonttikuvake.
– –
Mitä siis teen väärin?
Teet väärin sen, että yrität tehdä linkistä painikkeen näköisen. Se on rikkoo käytettävyyden ja esteettömyyden. Sivuvaikutuksena saatat sitten saada selainten bugeja silmillesi.
Kirjautuminen on operaatio, joka sopii tehdä painikkeella. Linkki ilmaisee relaation, painike toiminnan.
On noin ziljoona tapaa tehdä painikkeesta halutunlainen. Yksi simppeli tapa on input type=image.
Höpöhöpö. Se miltä se näyttää ei ole mitään väliä käytettävyyden saati esteettömyyden kannalta. CSS:n koko pointtihan on irroittaa rakenne ja ulkoasu toisistaan. Jos rakenne on kunnossa, niin ei se ainakaan esteettömyyttä haittaa. Käytettävyys taas... no, se on nappula/linkki. Sitä klikataan. Sillä ei vielä yksinään ole mitään väliä, millä tavalla kirjautumiseen päädytään.
Esteettömyys tulee vastaan vasta sitten, mikäli uusi avautuva sisältö ei olekaan saavutettavissa muutoin kuin visuaalisesti. Eli karkea esimerkki voisi olla vaikka se, että haetaan kirjautumislomake AJAXilla, mutta fokus jää nappulaan ja uusi sisältö on ainoastaan nähtävissä, mutta esim. puhesyntikka ei pääse kertomaan siitä kun se fokus on edelleen nappulassa eikä mikään muukaan informoi selainta kertomaan uudesta olennaisesta rakenteesta.
Käytettävyysongelma voi taas tulla vaikka siitä, että näppikselläkään ei pääse hyppäämään siihen lomakkeeseen vaan on pakko klikata hiirellä. Tai siitä, että lomake on liian iso mahtuakseen puhelimeen näkyville ja skrollaaminen on estetty.
Yucca kirjoitti:
Teet väärin sen, että yrität tehdä linkistä painikkeen näköisen. – – Sivuvaikutuksena saatat sitten saada selainten bugeja silmillesi.
On totta, että painike on viisainta tehdä painikkeena eikä linkkinä. Tällä ei ole silti mitään tekemistä kysyjän ongelman kanssa: täsmälleen sama bugi ilmenee, vaikka a-elementin vaihtaisi button-elementiksi.
Yucca kirjoitti:
On noin ziljoona tapaa tehdä painikkeesta halutunlainen. Yksi simppeli tapa on input type=image.
Näytäpä sitten sellainen input type=image, joka toimii hyvin eri selaimilla, skaalautuu nätisti, ei vaadi erillistä kuvaa sivuston jokaista painiketta varten (pahimmillaan vielä kymmeniä kieliversioita), ei kaipaa kuvan muuttamista sivuston muiden tyylien muuttuessa ja vieläpä vaihtaa kuvaa painettaessa.
Olin näköjään unohtanut ottaa pois top-ominaisuuden ko. linkin :active-luokasta, mistä virhetulkintani johtui.
Eikös tuon virheen pitäisi toistua Operalla (15+), kun sekin on WebKit-pohjainen? (En siis ole kokeillut vielä sillä.)
Jos ”painike” vie erilliselle kirjautumissivulle, eikö ole juuri käytännöllistä toteuttaa se linkillä ja tyylitellä sitten CSS:llä muistuttamaan painiketta?
HTML5 kirjoitti:
Eikös tuon virheen pitäisi toistua Operalla (15+), kun sekin on WebKit-pohjainen?
Niin, no toistaiseksi Linuxiin ei tietääkseni ole saatavilla Operasta tuollaista versiota, vaan eletään yhä Presto-pohjaisella versiolla 12.16.
HTML5 kirjoitti:
Jos linkki vie erilliselle kirjautumissivulle, eikö juuri loogisin tapa toteuttaa ”painike” ole linkin käyttö ja tyylittely CSS:llä muistuttamaan painiketta?
Kyllä linkki on silloin oikea. Yucca ehkä luuli, että kyseessä olisi jo varsinaisen kirjautumislomakkeen painike.
HTML5 kirjoitti:
Olin näköjään unohtanut ottaa pois top-ominaisuuden ko. linkin :active-luokasta, mistä virhetulkintani johtui.
Ylipäänsä koko idea on liian kikkaileva. Miksi ihmeessä absoluuttinen asemointi?
lainaus:
Jos ”painike” vie erilliselle kirjautumissivulle, eikö ole juuri käytännöllistä toteuttaa se linkillä ja tyylitellä sitten CSS:llä muistuttamaan painiketta?
Jos ”painike” ”vie” sivulle, niin ”painike” on linkki ja sen pitäisi normaalisti näyttääkin linkiltä. Jos se taas on sovellustyyppisen sivun ”linkki”, joka ei oikeasti ole linkki, vaan vaihtaa sivun sisältöä, niin sitten sen pitäisi olla painike ja näyttää painikkeelta.
Ihan aluksi siis kannattaisi varmistua siitä, että on ratkaisemassa oikeaa ongelmaa. Ja ylipäänsä ratkaisemassa eikä luomassa ongelmia.
Viimeisimpien tietojen mukaan, designeri voi käyttää joko linkkejä tai nappuloita, tyylittää ne oman halunsa mukaan ja sen ei pitäisi vaivata ketään.
Aihe on jo aika vanha, joten et voi enää vastata siihen.