Keskustelu: Nettisivujen teko: IE6 piirtää päin seiniä

Minun täytyisi alkaa opetella CSS:ää paremmin, ettei tarvitsisi kysellä täältä koko aikaa. :(

Mutta menkööt vielä yhden kerran. Huomenna tartun CSS-oppaaseen ja pänttään itseni web-kuvailun huipulle.

Ongelmani on IE6:n yhteensopivuus koodini kanssa. Kaikilla muilla selaimilla (jopa vanhalla IE5.5:llä) sivuni näkyy, kuten pitää, mutta kutosella float-elementtien kanssa tulee vikoja.

Tässä kaksi kuvaa. Ensimmäisessä sivu näyttää siltä, miltä pitääkin, mutta toisessa on IE:n renderointi.

http://bayimg.com/nAPNjAABm
http://bayimg.com/NAPnIaabM

Kuten kuvista näkyy, kaksi logokuvaa eivät tahdo pysyä vierekkäin ja tekstipalkki niiden alla ei aseta tekstejä samalle riville.

Koodini:

CSS:
#kokoaja {
 background-color: #fff;
 width: 896px;
 margin-left: auto;
 margin-right: auto;
 text-align: center;
 border: 1px solid #000;
}

#kokoaja>* {
 text-align: left;
}

#vlogo {
 background-color: #fff;
 color: #000;
 width: 20%;
 float: left;
 margin-right: 1pt;
}

#linkit {
 background-color: #000;
 color: #fff;
 margin-top: -2px;
 padding: 2pt;
}

Logot ja linkit:
<div id="kokoaja">
 <div id="vlogo"><img src="logovasen.png" style="margin-top: 5pt;"></div>

 <div><img src="logooikea"></div>

 <div id="linkit">
  <p style="font-size: 11pt; font-weight: bold; float: right; margin-right: 1em;">
   Teksti oikealla
  </p>
  <p style="font-size: 11pt; font-weight: bold; margin-left: 4em;">
   Teksti vasemmalla
  </p>
 </div>
</div>

IE käsittelee floattien vieressä olevia elementtejä väärällä tavalla, eli pudottaa ne alas päin silloin kun ei pitäisi. Helpoin ratkaisu on asettaa välimatkaa riittävästi oikealle puolen jäävälle elementille, eli sen sijaan että laitat margin-rightin floatattuun elementtiin, niin laitatkin vaikka 21% margin-leftiä oikeanpuoleiseen elementtiin. Tällöin IE:n turhauttavat laatikoiden pudottamiset eivät pääse vaikuttamaan.

Toinen tapa välttää tämmöisiä ongelmia on käyttää background-imageja ulkoasun kuvien kanssa, aina.

Jostain löytyy tarkempikin bugikuvaus ongelmasta, tämä on nyt sillä tarkkuudella mitä ulkomuistista tulee.

En halua luoda uutta aihetta tälle kysymykselle, mutta osaako joku suositella CSS:stä kertovia oppaita minulle? Lainasin kirjastosta CSS Design for Dummies -kirjan, mutta muitakin olisi kiva selailla.

@Burton - Suosittelen Googlea tässä apuna. Hakusanoilla Css Guide, Css Tutorial tai Css Opas löytää varmasti erittäin paljon hyödyllistä lukemista. Myös nämä kannattaa tsekata.

http://koti.mbnet.fi/~petepe/css1/
http://koti.mbnet.fi/~merkka/css.html
http://m.servut.us/kirjoitukset/css-opas.php

Juu, kannattaa sitä Googlea käyttää. Noita oppaita minä käytin kun tämän kielen opettelin. :)

PS. Pieni vinkki: Ei kannata copy pastettaa niitä, vaan vähän muunnella kaikenlaisia arvoja, niin kokoajan painuu lisää tietoa muistiin.

Lähtökohta 1: pidä HTML ja sisältö omana asianaan. Vältä miettimästä "tää HTML-tagi näyttää tälläseltä niin en haluu käyttää sitä".

Lähtökohta 2: minkä tahansa HTML-elementin voi CSS:llä tyylitellä millaiseksi tahansa (ei pidä käytännössä täysin paikkaansa varsinkaan ikivanhoilla selaimilla, mutta tähän suuntaan ollaan silti menossa).

Lähtökohta 3: lue blogeja, tutki sivujen koodeja, kopioi surutta, matki, kokeile itse... luo yksinkertaisia runkosivuja, joilla kokeilet jonkin uuden tempun toteuttamista. Tekemättä et opi mitään.

Lähtökohta 4: hyvät työkalut. Firefox, Firebug ja Yslow on jo varsin loistava yhdistelmä, jotka mahdollistavat kunnon debuggaamisen. Ollaan mitä mieltä Firefoxista tahansa, sillä on alla hyvin vakaa ja looginen pohja, jolloin mm. bugien ja puutteiden huomaaminen on varsin suoraviivaista. Päälle kun lisätään hyvät kehittäjätyökalut niin parempaa selainta sivujen ensitestaamiselle ei ole.

Lähtökohta 5: kaikkien selainten ei tarvitse näyttää prikulleen samalta. Sillä ei ole kenellekään mitään väliä, jos teksti alkaa kolme pikseliä alempaa Firefoxilla kuin IE:llä tai rajaamaton laatikko on ihan sivun laidassa IE:llä kun se on muilla selaimilla keskemmällä. Tavallinen käyttäjä ei huomaa, ne jotka huomaavat eivät välitä, ja jos välittävät, niin olet törmännyt nillittäjään, jota ei tarvitse kuunnella.

Internet Explorer: IE7:n ja IE6:n säätäminen kiteytyy semmoisen asian kuin haslayout ympärille. Asiasta voit lukea suomeksi vaikka sivuiltani. Suunnittele sivut ensin muille selaimille, sitten laita IE:t kuosiin.