Keskustelu: Nettisivujen teko: div:ien avulla sisältö oikeaksi

Minulla on ongelma div:ien ja ul-listojen kanssa.
URL: http://gamma.nic.fi/~ujokipal/-2/__ongelma__.jpg

Sivut pitäisi siis näkyä niin kun Operalla näkyy, mutta IE ja FF eivät jonkun takia ymmärrä näyttää listan li-kohtia oikeassa reunassa ja inline-elementteinä.

CSS:

div.ylamenu {
	text-align: right;
}

div.ylamenu ul {
	list-type: none;
}

div.ylamenu ul li {
	border-bottom: 3px solid #cdd9e1;

    text-align: center;
	display: inline-block;
    width: 100px;
}

Koodi:

<!-- OTSIKKO -->
<div class="title">
<h1 class="big">Sivut</h1>.com

<!-- YLÄMENU -->
<div class="ylamenu">
<ul>
<li><a href="?s=$eisivua">Etusivu</a></li>
<li><a href="?p=palaute">Palaute</a></li>
<li><a href="?p=etsi">Etsi sivuilta</a></li>
<li><a href="?p=tiedostot">Tiedostot</a></li>
<li><a href="?p=yllapito">Ylläpitäjä</a></li>
</ul>
</div>
<!-- /YLÄMENU -->

<!-- HAKULAATIKKO -->
<div class="etsi">
...
</div>
<!-- /HAKULAATIKKO -->

</div>
<!-- /OTSIKKO -->

Lisääppäs nämä rivit

	  div.ylamenu {
    text-align: right;
}

div.ylamenu ul {
    list-style-type: none; /*Tähän olisi hyvä varmuuden vuoksi lisätä style. (list-style-type:)*/
    float: right; /*lisää myös varmuuden vuoksi tämä toimi FF:llä ilmankin*/
}

div.ylamenu ul li {
    border-bottom: 3px solid #cdd9e1;

    text-align: center;
    display: inline; /*FF ei hyväksy inline-block ominaisuutta (ei kai ole validi).*/
    float: right; /*Tämä jakaa elementit oikealle.*/
    width: 100px;
}

Voit myös käyttää floatin siasta ominaisuuksia: position: absolute; top: ;/*joku pikselimäärä sivun yläreunasta*/ right: ;/*Sama idea, kuin edellisessä mutta pikselimäärä (tai jokin muu) oikeasta reunasta.*/

Bandido89 kirjoitti:

display: inline; /*FF ei hyväksy inline-block ominaisuutta (ei kai ole validi).*/

On se validia CSS 2.1:stä, Gecko ei vain tue sitä ainakaan vielä. Kunhan reflow branch saadaan mergattua trunk-koodiin (joka ei tapahtune ainakaan ennen Firefox 3.0:aa), asiaan tulee muutos.

Nykyisellään voi käyttää display-määrittelyä display: -moz-inline-box; Gecko-browsereita varten.

Kiitti.

Entäs sitten, kun inline-elementit ei tue tuote width-määritettä? Miten sen saisi kuitenkin näkymään, kun sen takia alun perin laitoin elementiksi inline-block.

Ja minkähän takia tuo etsi-laatikkosysteemi näkyy IE:ssä ja FF:ssä kahdella rivillä yhden sijaan?

Deewiant kirjoitti:

Bandido89 kirjoitti:

display: inline; /*FF ei hyväksy inline-block ominaisuutta (ei kai ole validi).*/

On se validia CSS 2.1:stä, Gecko ei vain tue sitä ainakaan vielä. Kunhan reflow branch saadaan mergattua trunk-koodiin (joka ei tapahtune ainakaan ennen Firefox 3.0:aa), asiaan tulee muutos.

Nykyisellään voi käyttää display-määrittelyä display: -moz-inline-box; Gecko-browsereita varten.

Juu. Kyllä ihan totta puhut. Tsekkasin just tuosta CSS manuaalista. Vastasin taas ennen kuin olin ehtinyt tarkistaa asiaa.
Itselläni se lisää nuo vakiobulletit tuonne, jos lisään tämän. Eikä muuta eroa näy. Mitä eroa näillä kahdella ominaisuudella on (inline, inline-block). Ei vielä tuossa näyttänyt muuttuvan millään muulla tavalla, kuin vain bulletien ilmestyminen. Vai onko sillä vaikutusta muunlaisissa tilanteissa?