Keskustelu: Nettisivujen teko: IE ja display: inline taulukon TR-elementille

Onko mahdollista saada toimimaan kyseinen määritys IE-selaimilla? Firefoxilla toimii mainiosti:

table tr { display: inline; } (eli tr-elementit asettuvat nätisti samalle riville, mutta IE näyttää ne blockeina)

Oletko koittanut laittaa table.tr?

slitzu kirjoitti:

Onko mahdollista saada toimimaan kyseinen määritys IE-selaimilla? Firefoxilla toimii mainiosti:

table tr { display: inline; } (eli tr-elementit asettuvat nätisti samalle riville, mutta IE näyttää ne blockeina)

Hmm siis tr-elementtihän on nimenomaan taulukon rivi, joten se lienee aina ns. inline. Mitä siis haluat tehdä?

MIB: Eikö tuo valitse table-elementin, jonka class="tr"?

Teuro: Haluan, että taulukon tr-elementit asettuvat rinnakkain eikä allekkain. Firefoxilla tämä toimii, mutta IE:llä ei. Voisin toki muuttaa HTML:n rakennetta, mutta se ei tässä tapauksessa ole mahdollista.

slitzu kirjoitti:

Teuro: Haluan, että taulukon tr-elementit asettuvat rinnakkain eikä allekkain. Firefoxilla tämä toimii, mutta IE:llä ei. Voisin toki muuttaa HTML:n rakennetta, mutta se ei tässä tapauksessa ole mahdollista.

Hmm sinulla on nyt joku termi hukassa, koska tr ei ole lohkotason elementti, eikä näin ollen ole siis sinällään allekain / vierekkäin. Jos haluat taulukossa olevien tietojen olevan rinnakkain joudut tutkimaan td tai th elementtejä, jotka ovat tr-elementin lapsisolmuja.

<table>
<tr>
<th>Otsikko 1</th>
<th>Otsikko 2</th>
</tr>
<tr>
<td>Tieto 1</td>
<td>Tieto 2</td>
</tr>
</table>

Ottamatta kantaa mahdollisuuteen tai mahdottomuuteen haluan sanoa, että semantiikka on aika pahasti hukassa, jos taulukosta tehdään muuta kuin taulukko. Mitä järkeä on tehdä taulukko, jonka rivit ovat peräkkäin ja siten siis data käytännössä yhdellä rivillä? Samaan lopputulokseen pääsisi varmasti jollain loogisemmallakin tavalla.

Niin nythän aloittaja ei ole edes avannut pyynnöstä huolimatta kysymystä, jotta tolkullisen vastauksen voisi antaa. Miksi muuten html merkkausta ei voi muuttaa? Tuleeko ulkoasu jostakin pohjasta, jota ei ole saatavilla?

Ja yhden td:n sisään voi laittaa toisenkin tablen samalla lopputuloksella, jos laittaa paddingit ja borderit oikein.

Oli tarkoitus selvittää vain, miksi tuo display: inline asettaa taulukon tr-elementit rinnakkain Firefoxilla mutta ei IE:llä.

HTML-rakennetta on toki mahdollista muuttaa, mutta se on työläämpää kuin yrittää asemoida elementtejä uudelleen CSS:n avulla.

Oletan siis, että Firefoxilla tuo toimii sattumalta, mutta IE:llä tuon ei saa toimimaan samalla tavalla millään poppakonstilla?

slitzu kirjoitti:

Oli tarkoitus selvittää vain, miksi tuo display: inline asettaa taulukon tr-elementit rinnakkain Firefoxilla mutta ei IE:llä.

Kuten olen sanonut tr ei ole lohkotason elementti, joten se ei ole rinnakkain, eikä allekain. Se määrittelee ainoastaan td ja th elementtien sijainnin toisiinsa.

slitzu kirjoitti:

HTML-rakennetta on toki mahdollista muuttaa, mutta se on työläämpää kuin yrittää asemoida elementtejä uudelleen CSS:n avulla.

Pitemmälle ajateltuna kannattaa kuitenkin suosia semanttisesti oikeita rakenteita, kuten Metabolix yllä esittikin. Taulukot on kuitenkin suunniteltu esittämään taulukkomuotoista dataa. Onko tarkoituksena luoda esimerkiksi listarakenne linkeille? Mikäli näin on kannattaa ehdottomasti käyttää listarakennetta.

<style type="text/css">
li{
display: inline;
}
</style>
<ul>
<li>Eka alkio</li>
<li>Toka alkio</li>
</ul>

Annetaanpa olla jo :D Lohkotason elementti tai ei, niin testailkaa ihmiset hyvät itse ennen kuin alatte paasaamaan teoriaa. Mahdotonkin muuttuu äkkiä mahdolliseksi, kun tarpeeksi virittelee. Onko virittely standardien mukaista tai ei, se on sit kokonaan toinen asia eikä sitä tässä ketjussa kannata käsitellä.

En kyllä nyt tottele aivan pyyntöäsi, mutta et missään web-suunnittelussasi tule tarvitsemaan haluamaasi ominaisuutta.

Enkä ihan usko että puhtaasta mielen kiinnosta vain kyselet tuommoisia asioita.
IE:n ja Mozillan välillä on eroja ja se on sillä sipuli. Tässä tapauksessa IE kyllä ohjaa ohjelmoijia hyvään suuntaan.

Jos satutte ihmettelemään että tähän aikaan lähetän viestejä, niin se johtuu siitä etten ole aivan Suomen aikavyöhykkeellä.

jo123 kirjoitti:

IE:n ja Mozillan välillä on eroja ja se on sillä sipuli. Tässä tapauksessa IE kyllä ohjaa ohjelmoijia hyvään suuntaan.

Tälle olisi kieltämättä hauska kuulla perusteluita, millä tavalla IE ohjaa web-ohjelmoijaa hyvään suuntaan. Tekemällä epävalidia koodia?

Teuro kirjoitti:

Tälle olisi kieltämättä hauska kuulla perusteluita, millä tavalla IE ohjaa web-ohjelmoijaa hyvään suuntaan. Tekemällä epävalidia koodia?

Mielestäni ei ole hyväksi yrittää saada tr-elementtiä rivittymään samalle riville toisten tr-elementttien kanssa. Tähän tarkoitukseen html:ään on suunniteltu td. Kun IE ei tähän suostu "ohjaa" se ohjelmoijia oikeaan suuntaan. Eli tätä tarkoitin.

Tässä luultavasti IE on romahtanut ns. quirks modeen, jolloin sivusto renderöidään erikoisella tavalla. Selain siis viestittää toiminnallaa, että sivustolla on jotakin pielessä pahasti.

@slitzu virittely on monasti ihan kivaa, mutta pidemmän päälle moinen alkaa rassaamaan omia hermoja, kun joutuu korjailemaan virittelyjen jälkiä. Tässä puhun nyt ihan omasta kokemuksesta.

Firefox toimii sikäli oikein, että kun tr:stä kerran tehdään inline-elementti, vastaa se tavallaan ihan vain vaikkapa tekstielementtiä. Tämä taas tarkoittaa sitä, että kaikki solut jotka taulukkoon on määritelty ovatkin samalla rivillä. Vähän saman saa aikaan sillä, että tekee listasta taulukon (display: table) ja listan elementeistä soluja (display: table-cell), ilman että välissä on rivejä (display: table-row).

Pointtina siis: taulukon eri osat eivät ole lohkoelementtejä tai inline-elementtejäkään. Ne ovat taulukon elementtejä.

IE7 ja vanhempien tuki taulukoiden osalta on hajanainen, taulukot ovat varsin kiinteästi aina taulukkoja eikä toisista elementeistä pysty luomaan taulukkoja. IE8 on kirjoitettu tältä osin uusiksi, valtaosan toisista elementeistä voi tehdä aivan minkä tahansa toisen elementin näköisiä (joitakin poikkeuserikoisuuksia tietysti on, kuten vaikkapa pahamaineinen legend-tagi, tai vaikka select-elementin muotoilu ja ylipäätään monet lomakekentät).