Keskustelu: Nettisivujen teko: Mozillassa taulukoiden välit

Elikkä pari ongelmaa...

- Mozillalla tai Netscapella tai muulla samaa koodia käyttävällä selaimella taulukoiden rivien väliin tulee noin 4 pikselin väli... Tietääkös joku miten sen saisi pois?

- Samaiset selaimet eivät suostu ottaan taulukoiden soluihin korkeusmääritystä, eli heightiä, vaan selain jostain syystä vetää sen taulukon sisällön mukaan. Mites sellasen sais korjattua?

EDIT: Operalla ja IE:llä näitä ongelmia ei ole...

EDIT2: Mozilla ja Netscape näyttäis lisäilevän niitä välejä sinne vähän muutenkin... Mites ne saa pois?

Height ei ole mikään virallinen attribuutti kun puhutaan taulukoista.
http://www.w3.org/TR/CSS2/visudet.html#the-height-property

Table-tagiin tutustuminen ei liene myöskään pahitteeksi.
http://www.w3.org/TR/html4/struct/tables.html#h-11.3.3

Joo, noi cellspacing ja cellpaddingit on laitettuna nollaan, mutta ei toimi kuiteskaan...

Koodia kehiin.

Eikö muuten cellspacingille ole CSS:ssä mitään vastinetta?

lainaus:

Eikö muuten cellspacingille ole CSS:ssä mitään vastinetta?

Eipä tainnut olla. En ole tosin sen kummemmin etsinyt. Vilkaise w3.orgista http://www.w3.org

Onhan siihen vastine, hämäävästi nimetty spacing. Vastaavasti löytyy myös padding. Nämä tosin eivät rajoitu taulukon soluihin vaan voi määritellä mille tahansa.

Joo, tässä olisi nyt vähän tätä koodia... Ehkä vähän sekavaa, mutta jos saa selvää niin...

<table border="0" cellpadding="0" cellspacing="0" summary="" valign="top">
  <tr valign="top"><td height="20" valign="top">
    <img src="ulkoasu/empty2_top.png" border="0" width="250" height="20" alt=""></td></tr>
  <tr valign="top">
    <td height="50" background="ulkoasu/empty_back.png" valign="top">
       <div align="center"><table width="233" height="225" border="0" cellpadding="0" cellspacing="0" summary=""><tr><td valign="top">
           <!-- sisältö -->
       </td></tr></table></div>
     </td>
  </tr>
  <tr valign="top"><td height="20" valign="top">
    <img src="ulkoasu/empty_bottom.png" border="0" width="250" height="20" alt=""></td></tr>
</table>

Kyllähän tuo oikealta näyttää. Ainoat mitkä pistää silmään on noi 'height'-määreet, mitkä ei siis ole minkään standardin mukaiset. Toinen, samaan asiaan liittyvä tosin, on tuo sisältötaulukon sisältävän solun korkeusmääritelmä joka 50, ja sisältötaulukon korkeus on 225.

Itse olen käyttänyt korkeuden määräämiseen näkymättömiä kuvia.

Mielestäni tuolla koodilla ei pitäisi tulla mitään rakoja mihinkään. Voiko tuota kattella jossain livenä?

Kyllä voi, http://www.sotapelit.com . IE ja myös Operakin siis näyttävät sivun oikein, Mozilla ja Netscape (+muut samaa koodia käyttävät) ei...

Kokeilen vielä tuota solun ja sisältötaulukon korkeuden laittamista samaan arvoon...
EDIT: ei vaikuta...

Kattelin tuota sivua. Nyt menee jo veikkailun puolelle mutta tällainen tuli mieleen.

ote sorsasta (etusivun uutisista):

<span class="text"><div align="center">
	<a href='[foo]'>[bar]</a><br>
	<span class='textlahettaja'>24.01.2004 09:20:45</span><br><br>
	[toistuu muutamaan otteeseen]
</div></span>

Eli tuossa (mua ainakin) häiritsee sekä divin että spanin käyttö. Sen sijaan voisit diville antaa tuon class='text' attribuutin. En kyllä tiedä onko sillä mitään seksuaalista merkitystä mutta mielestäni tuo on nykyisellään väärin. Jos välttämättä haluat molempia käyttää niin niiden pitäisi imo olla toisinpäin, eli ensin div ja sitten span. Korjatkaa mikäli olen väärässä.

Edit:
Validaattoriakin voi käyttää virheen metsästyksessä apuna. Melkoinen lista tuli huomautuksia.
http://validator.w3.org/check?uri=http://www.sotapelit.com/

No niin, sain ongelman ratkaistua, ja jos jotakin kohtaa sama juttu, niin ajattelin kirjoittaa tähän ratkaisun (miten ainakin omalla kohdalla meni).

Eli käytin sivulla CSS-tyylejä, joissa oli laitettuna tekstin rivin korkeudeksi (line-height) 12pt. Tämä aiheutti Mozillassa ja Netscapessa myös taulukoiden rivien väliin pieniä välejä. Ennen kuin nyt aloitan taulukon määrittämisen, otan käyttöön toisen tekstityylin, johon on määritelty line-heightiksi 0pt. Tekstityylin käyttö lopetetaan taulukon jälkeen.

HUOM! Kun tulee taulukossa tulee taas tekstiä, täytyy ottaa normaali tyyli käyttöön, muuten teksti ei näy.

lainaus:

HUOM! Kun tulee taulukossa tulee taas tekstiä, täytyy ottaa normaali tyyli käyttöön, muuten teksti ei näy.

Uskoisin, että näkyy, mutta fontin väri on sama kuin taustan. Muuta fontin väri tyylitiedostostasi. Jos taulukossasi on class="matti", etsi tyylitiedostostasi rivin ".matti" jälkeisten rivien tiedot.

Tarkoitin tuolla normaalilla tyylillä sitä tekstityyliä, mitä käytetään juuri siinä tekstin näyttämisessä.

Ja teksti ei näy ainakaan mozillassa jos sen line-heightiksi laittaa nollan. Nyt en enää sitä kokeillut, mutta silloin ei ainakaan näkynyt.

No jätä koko line-height pois. Ei sitä tarvitse määrittää, koska jos tekstin koko on vaikka 14pt niin line-height on myös 14pt automaattisesti. Jos en nyt ihan väärässä ole..