IE ja CSS: jälleen ongelmia...
24.11.2004 klo 11.02 • Aihe: Web
Taas näitä ihania Internet Explorer (Windows XP) CSS-bugeja:
Kun elementin (esim. otsikon) määrittää näymättömäksi CSS:lla...
.otsikko {
display: none;
}
...sen takana olevan elementin taustakuva ei näy, paitsi jos painaa refresh-nappia, muuttaa selainikkunan kokoa tai vierittää ko. elementin näkyviin nopeasti.
Ongelman voi ratkaista vaikka piilottamalla otsikon näin (muunnelma Radu-menetelmästä):
.otsikko {
margin-left: -10000px;
position: absolute;
}
Margin-left siirtää otsikkotekstin pois näkyvistä, ja position antaa lopun tekstin liukua otsikon paikalle.
Tämä ratkaisu on muuten monien ruudunlukuohjelmien kannalta edellistä parempi: display: none; piilottaa tekstin niiltäkin mutta margin-left: -10000; ei.
(Tässä ongelmassa oli kyse Luonnontieteellisen keskusmuseon Joulun ajan tapahtumaluettelosta.)
Kommentit
1 Josku (24.11.2004 klo 12.25)
Ongelmaksi tässä toteutuksessa jää tilanne, jossa CSS tuki löytyy, mutta kuvia ei syystä tai toisesta ladata / pystytä lataamaan.
2 Mikko (24.11.2004 klo 14.00)
Jep. Shea Enhancement -menetelmä (http://www.mezzoblue.com/tests/revised-image-replacement/#shea ) ratkaisisi CSS käytössä/kuvat ei -ongelman, mutta sitä ei voi sellaisenaan käyttää tässä tilanteessa, koska leipätekstin pitäisi mennä osin taustakuvan päälle.
Parasta olisi kai erottaa otsikkoteksti ja taustakuva (lumihiutaleet ym.) omiksi kuvikseen. Tai yksinkertaisesti tehdä otsikko pelkkänä CSS-muotoiltuna tekstinä.
3 Jarkko (24.11.2004 klo 19.36)
Täältä (http://wd.mrclay.org/tests/ir/) löytyy testi eri image replacement -tekniikoiden toimivuudesta ja saavutettavuudesta.
Tätä viestiä ei voi enää kommentoida.