Keskustelu: Nettisivujen teko: Musta palkki headerin alle Firefoxissa

Mulla käytössä uusin versio Firefoxista. Miten css:ää pitää muuttaa, kun Firefoxilla headerin kuvan alle tulee musta palkki? Chromella ja Explorerilla ongelmaa ei esiinny... Vika alkoi sivuillani viime viikolla (tietäääkseni).

Laitatko screen shotin niin helpompi hahmottaa ongelma :)?

Säädä asiaan liittyvien css-tyylien ohjeet oikeiksi, niin ongelma luultavasti poistuu.

Ei kai tähän tarvitse muuta vastata kuin että katso itse. Element inspectorin napsautat auki ja katsot, että mikä elementti sieltä paistaa ja miten sitä voisi muokata.

Minulla ei edes koko FF toimi. pelkkää mustaa.

Tässä olisi css-tiedostosta tiedot headerista:

#header {
 	height:320px;
	width:auto;
	background: url(sipaheader.png) no-repeat;
	border:none;
}

Ja tässä printscreen itse kotisivulta: kuva

ps. miten saan tuon screnshotin näkymään suoraan kuvana (eikä linkkinä)?

jhh kirjoitti:

– – ps. miten saan tuon screnshotin näkymään suoraan kuvana (eikä linkkinä)?

Et mitenkään; OP:n keskusteluihin ei voi lisätä kuvia.

Googlaamalla löysin saman sivun, joka on kuvassa. Tuo yläpalkin kuvan (sipaheader.png) alaosa on läpinäkyvä. Jostakin syystä Firefox näyttää tuon läpinäkyvän osan mustana.

Mä muutin headerin korkeutta 320px --> 260px.
Nyt homma on ihan ok kaikilla kolmella selaimella.
En tiedä mitä olisi pitänyt tehdä, mutta noin sen ainakin sai fiksattua...

Olisiko niin, että taustakuva oli pienempi kuin elementti ja jostain syystä Firefoxilla elementin taustaväri oli musta ja muilla valkoinen tai läpinäkyvä? Siis background-color olisi ehkä korjannut ongelman.

Metabolix kirjoitti:

Olisiko niin, että taustakuva oli pienempi kuin elementti ja jostain syystä Firefoxilla elementin taustaväri oli musta ja muilla valkoinen tai läpinäkyvä? Siis background-color olisi ehkä korjannut ongelman.

Vika ei liittynyt background-color-ominaisuuteen, vaikka minäkin sitä epäilin. Jostain syystä Firefox näyttää kuvan läpinäkyvän alaosan mustana eikä läpinäkyvänä, niin kuin pitäisi. Elementin korkeus oli sama kuin kuvan.

Ongelman voi todeta avaamalla Firefoxissa pelkän kuvan, http://sahkosipa.fi/sipaheader.png. Vika näkyy myös kehitystyökalujen tyylipaneelissa, kun esikatselee #header-elementin taustakuvaa.

Päivitys: Kuvan alaosa näkyy mustana myös esikatselukuvakkeessa ja kuvankatseluohjelmassa Windowsilla.

Päivitys: Avasin kuvan Paint.net-ohjelmalla, ja sama ongelma toistui. Kuvan alaosa kannattaa poistaa (tai muuttaa läpinäkyväksi) kuvankäsittelyohjelmalla.