Keskustelu: Nettisivujen teko: CSS-ongelma. IE ja FF näyttää eri tavalla :o

Sivupohja alkaa olemaan valmis, iso kiitos tästä putkalaisille! Vielä muutama ongelma kuitenkin on..

Isoimpana ja häiritsevimpänä tuo, kun IE ja FF näyttää sivuston eritavalla. Kts kuva:
http://www.aijaa.com/v.php?i=1572755.jpg

Tyyli on CSS:llä niin että alemmassa vaakapalkissa on borderit ja sitten noissa ylempänä olevissa painikkeissa ei reunusta ole ollenkaan. Erikseen niille on hoverina määritelty, että sivuille ja ylös tulee 1px ja väriksi tuo reunan väri ja lisäksi että alas tulee 1px jonka väri on taustaväri.

Tämän firefox ymmärtää niin kuin kuvasta näkyy. IE:llä taasen painikkeen alareunassa paistaa tuo häiritsevä viivanpätkä jonka FF osaa piilottaa..

Ideoita miten tuon voisi takoa myös IE:n päähän?

Edit: Kuva.
Edit2: CSS-tiedosto voisi helpottaa ymmärtämistä, mutta futuronin palvelimeen ei taaskaan pääse kunnolla käsiksi. Hyviä ja kohtuullisen hintaisia webhostingeja?

Yksi voisi olla nostaa painikkeen z-index tasoa, koska vaikuttaa hieman siltä, että IE jättää painikkeen palkin taakse. Mutta voi olla myös että IE:ssä painike on 1 pikselin ylempänä, jota voi yrittää korjata miinus merkkisellä marginaalilla.

IE näyttää kaiken oudosti, koska se ei noudata web-stantardeja. Tosin FF ei myöskään täydellisesti läpäise acid 2 testiä joka mittaa stantardien noudattamista, mutta kolmonen läpäisee.

Pistä sille painikkeelle vaikka position : relative;, sikäli jos kyseessä on taaksejääminen.

absolute, fixed ja relative nousevat korkeammalle kuin muu sisältö niiden sijoittuessa omaan kerrokseensa, jota voi muutella z-indeksiä muuttamalla. 0 pitää samassa tasossa (eli pykälän korkeammalla kuin static-elementit), 1 nostaa ylöspäin pykälän verran, -1 laskee.

Mitä taas tulee korkeusongelmiin, niin kannattaa kokeilla säätää esimerkiksi line-height pikseliarvoilla (ja line-height on käytännöllisempi kuin height IE:n takia, IE:ssä height ja width tökkii aina IE:n sisäistä layout-mekanismia yhdestä mallista toiseen, mistä voi sitten olla tietyissä tapauksissa haittaa).

kray kirjoitti:

IE näyttää kaiken oudosti, koska se ei noudata web-stantardeja. Tosin FF ei myöskään täydellisesti läpäise acid 2 testiä joka mittaa stantardien noudattamista, mutta kolmonen läpäisee.

No eipä se IE nyt kaikkea näytä oudosti. Kyllä tuommoisen sivun saa helposti näkymään samalla tavalla, ei tuossa nyt mitään ihmeellisyyksiä ole.

Kyllä kun joitakin sivuja tekee css:llä, niin huomaa että melko simppeleillä tavoilla saa sivuista eri selaimilla saman näköiset.

Validi html auttaa kummasti, sekä juuri selaimien oletustyylien yliajo sekä näiden typerien padding-ongelmien kiertäminen esim. yhdellä ylimääräisellä divillä.

No, mennään nyt tälle linjalle:

Acid 2 ei ole sekään mikään standardiuden mittari. Se testaa vaan selainten eri asioiden CSS-tukea sekä kykyä tulkita virhetilanteet, eli tahallisen viallinen syntaksi oikein. Acid 2:n läpäisy on kiva juttu, mutta ei sen enempää. Se on vain yksi monimutkaisesti rakennettu ja selainten tekijöitä varten dokumentoitu kokonaisuus.

IE:tä tehdessä on kyllä pyritty standardien noudattamiseen, mutta ongelma tulee siitä, että moottori jonka päällä IE pyörii ei ole suunniteltu alusta lähtien standardien mukaiseen sivujen renderöintiin. Tässä taas ei voi syyttää ohjelmoijia osaamattomuudesta, vaan siitä että he ovat työkseen tehneet mitä ylempää on kerrottu, eli hieman negatiivisesti ilmaisten "paikatkaa vanhaa". Alunperin otettiin käyttöön ajansäästön vuoksi jotain mikä silloin toimi ja riitti ihan hyvin, mutta sitten kun standardiliike lähti liikkeelle niin IE:n kehitys on siirtynyt siihen, että yritetään pakottaa vanhaa systeemiä toimimaan uusilla pelisäännöillä ja yritetään epätoivoisesti säilyttää taaksepäinyhteensopivuus ("koska olemme luvanneet tehdä niin").

Jesh! Kiitos taas Merri! :) Meni ihan suoraan tuolla position: relative; määrittelyllä.

Yhden saa pois, niin toinen tulee tilalle :o Nyt kuvan kanssa.. IE ymmärtää kyllä hspacen ja vspacen tarkoituksen, mutta FF ei kuvaa rajaa niin kuin pyydetään..

<IMG SRC=/images/kuva.jpg align=left hspace=10 vspace=10>

Mitä tässä nyt taas tehdään väärin?

Edit: Nettisivujen teko on kuin naiset. Ikinä ei ymmärrä että missä mennään vikaan :P

Tee toki tyylit CSS:llä elementin attribuuttien sijaan. Eli kuvalle vain marginaalia haluttuun suuntaan haluttu määrä.

Eli esimerkiksi:

img.left {
    float : left;
    margin : 10px;
}

<img alt="" class="left" src="/images/kuva.jpg">

Kannattaa tosiaan jättää kaikki tyyliin vaikuttavat määritykset CSS:n harteille. Lisäksi kannattaa opetella kirjoittamaan tagit ja niiden attribuutit pienellä, laittaen attribuuttien arvojen ympärille lainausmerkit. Kaikki ammattilaiset tekee niin. Moni ongelma ratkeaa helpommin kun tekee siistiä syntaksia :)