Keskustelu: Nettisivujen teko: IE ja DIVien tyhjät rivit?

Ongelmani on tämä: html-sivuni on kasattu divejä käyttäen, ja niiden asemointi on hoidettu css-tiedostossa. Koodi on seuraavanlainen:

<div id="otsikko">
  <div id="kuva"></div>
  <div id="linkki"></div>
</div>
...
#otsikko {
  height: 30px;
}
#kuva {
  background-image: url('kuva.jpg') top left;
  position: relative;
  top: 2px;
  left: 2px;
}

#linkki {
  position: relative;
  top: 2px;
  left: 20px;
}

Jostain syystä Firefox näyttää tämän sivun täysin oikein, mutta IE:llä katsottaessa tuon divin loppuun tulee 2 tyhjää riviä, ja alueen korkeus, joka on Firefoxissa oikein, on IE:ssä joitakin pikseleitä liian suuri (ilmeisesti noiden 2 tyhjän rivin verran).

Missä vika??

Kokeileppa laittaa nuo nimet div.kuva, div.otsikko, jne.
IE saattaa muodostaa tuollaisestakin ongelman (käytän sitä itse). Jotkut ongelmat saattavat olla (pahimmissa tapauksissa) selainkohtaisia.

Itse sain ongelman korjatuksi, kun vaihdoin "top-määritteen" arvon negatiiviseksi. Täysin varma en kyllä ole, oliko ongelmani juuri IE:llä.

Sen kummemmin miettimättä, kokeilepas ottaa whitespacet pois, eli kirjoita tagit yhdelle riville samaan pötköön. Ja Kentti, id-attribuuttia varten tarvitaan juurikin tuo risuaita. Piste on eri luokkia (class) varten. Ja jos ei tahdo onnistua, voisi tuon saman tehdä kellutuksella (float) tai jopa antamalla parent-diville position: relative ja noille kahdelle lapselle position: absolute, jotka sijoittelet sitten noilla top- ja left-määreillä halutulla tavalla.

Ai katos prkl..
Kiitti Olga. Tuota en tiennyt :)

Jos top-arvon laittaa negatiiviseksi niin tämän jälkeenhän selain "piirtää" kyseisen divin toisen divin päälle, eli alle jäänyt divi jää edelleen liian korkeaksi. Poistaahan tuo ongelman, mutta olen melko varma, että se tulee vastaan jossain toisessa yhteydessä uudelleen ja leiska on jälleen hajalla.

Whitespacien pois ottaminenkaan ei auttanut asiaan, täytyy kokeilla vielä kellutusta tai toisenlaista asemointiratkaisua.

Kiitos kaikille vastanneille!

Saanko kysyä, miksi toteutat otsikon diveillä?

<h1 id="otsikko"><img alt="" src="kuva.jpg" /><a href="">Linkki</a></h1>

#otsikko {
    height : 30px;
    line-height : 26px;
    margin : 0;
    padding : 2px;
}

#otsikko img {
    float : left;
    height : 26px;
    vertical-align : middle;
    width : 26px;
}

#otsikko a {
    display : block;
    height : 26px;
    line-height : 26px;
    vertical-align : middle;
}

...koska saman voi toteuttaa oikeilla tageilla niin että se näyttää muuten kuin visuaalisestikin oikealta ja että hakukonekin tajuaa kyseessä olevan otsikko :)

Lisäksi jos kuva on vain koriste eikä sisällä minkäänlaista olennaista tietoa, niin sitten pärjäät ihan ilman kuvatagiakin: laitat vaan linkille taustakuvaksi ja sitten kylliksi paddingia vasempaan reunaan. display : block; hoitaa loput.