Keskustelu: Nettisivujen teko: Tila divien välissä

Eli sivulla http://dailyhero.freewebhostx.com/ on firefoxilla ärsyttävä tila Daily hero news ja uutisten välillä. Internet explorerillä tätä ongelmaa ei ole mutten ole firefoxilla löytänyt ratkaisua :S Löytyiskö täältä vastausta ongelmaan

Otsikkoelementilla (Long Test) on ylämarginaalia. Poista se ja ongelmasi katoaa. Ongelmaa ei näe IE:llä, koska IE ei käytä useinkaan oletusasetuksilla marginaalia luomaan välejä elementtien väliin.

Marginaali siis vaikuttaa isännöivänkin elementin lävitse. Jos divillä on vaikka yksi pikseli ylämarginaalia ja heti sen sisällä olevalla ensimmäisellä elementillä on 2 pikseliä ylämarginaalia, niin divin ja sitä edeltävän divin väliin tulee 2 pikseliä tyhjää.

Lataa Firebug-lisäosa, sen avulla voi bongata tämänkaltaisia ongelmia hyvin helposti visuaalisten vihjeiden avulla (ja näkemällä käytössä olevat CSS:n arvot).

Poistin kaikki ylämarginaalit ja latasin Firebuginkin (kätevä :)) mutta silti ei toimi. Mitäs siihen pitäisi tehdä tarkalleen?

Kuten Merri mainitsi, otsikkoelementillä, eli "h2-tagilla" on se ylämarginaali. Puuppaappa tuonne CSS:ään vielä sille marginaalisääntö ni johan alkaa lyyti kirjoittaa.

Eli yksinkertaisimmillaan näin (halunnet ehkä viilata sääntöä tarkemmaksi):
h2 { margin: 0; }

Kiitos! Nyt toimii :) Tähän samaan ketjuun, tietääkö kukaan miten saisi tuon "Daily hero news" divin venymään layoutin mukana. Nyt jos scrollaa alaspäin näkee että se menee yli layoutin reunojen :)

Nyt en mene vannomaan tavan oikeaoppisuutta kun en teoriaa ole asian tiimoilta koskaan eksynyt lukemaan, mutta kokeilemalla selvis aika nopeasti, että news-diviltä height pois ja floattia bodydiviin niin näyttäis Fx:llä venyvän. Floatista kannattanee lukea jotain teoriaa, saattaapi olla melko monipuolinen ominaisuus.