Teksin rivitys ja IE-bogi

[OPJ]

Nyt on vuorossa jälleen IE-ongelma, joka ilmeisesti on peruja IE6:n ajoilta. Netti ei tarjonnut kunnollista apua asiaan, joten kysäisen taasen täältä.

Minulla on asiakkaalle taitettu layout, jossa on uutiset esitetty seuraavasti:


Kyseisen elementin koodi näyttää tältä:

Koodi: Valitse kaikki

<div id="kolmas"> 
      <div id="title">
           <img src="../layout_images/title-ajankohtaista.png" title="" width="190" height="25"> 
      </div>
      <div id="uutinen"> 
            <h1><a href="#">Uudempi ajankohtainen asia, joka on ensimmäisenä listassa</a></h1> 
      </div>
      <div id="uutinen"> 
        <h1><a href="#">Ajankohtaista uutinen nro 1</a></h1> 
      </div> 
 </div> 

CSS:ssä on jotain tähän suuntaan:

Koodi: Valitse kaikki

div#kolmas {
	border-bottom: 1px dashed #999999;
	margin-left: 10px;
	margin-right: 10px;
	*margin: 0px;
	*padding: 0px;
	padding-bottom: 5px;
	}

div#kolmas #title {
	padding-bottom: 5px;
	margin: 0px;
	height: 25px;
	}

div#title img {
	display: inline-block;
	margin: 0px;
	}

div#uutinen {
	padding-top: 5px;
	padding-left: 30px;
	padding-bottom: 5px;
	margin: 0px;
	*width: 180px;
	
	}
	
div#uutispalsta h1 a:link,
div#uutispalsta h1 a:visited {
	color: #282828;
	font-size: 12px;
	line-height: 12px;
	text-decoration: none;
	font-weight: normal;
	}

div#uutispalsta h1 a:hover {
	text-decoration: underline;
	}

Muut selaimet luonnollisesti siis näyttävät kaiken oikein, mutta IE tuplaa toiseksi viimeisen ja viimeisen rivin välin. Tässä tapauksessa siis "joka on ... ... ensimmäisenä listassa" ja "nro... ...1" -kohtien rivinvälin.

Rivivälin määrittäminen ei näytä auttavan auta, eikä display-metodin muuttaminenkaan näyttänyt tuovan ratkaisua. Joskus näissä tapauksissa auttoi rivinvaihto-tagin lisääminen koodiin, mutta sekään ei auta; sisältö ja sitä ympäröivät elementit tuodaan dynaamisesti sisältöön, ja pakotettua rivinvaihtoa ei useista syistä voida koodiin laittaa automaattisesti.

IE6 tuplasi näitä rivinvälejä, jos riville laittoi esim input-kentän. Mutta tässä juoksutetaan vain tekstiä, kunnes elementti loppuu. Ongelma on kaikissa IE:n verisoissa, IE6 - IE8.

Anyone?

P.S. kuvakaappaus IE:stä tuloo kohta/mahd. pian, Parallersin kotikoneella oleva versio ei toimikaan SL:n kanssa....

[MiniMe]

Onpa kyllä harvinaisen hankalasti tehty tuo pätkä, mutta ei siitä sen enempää... Pikaisesti vilkaistuna, määrittele h1:lle margin ja padding ni pitäs rauhtottua, eli esim näin:

Koodi: Valitse kaikki

div#uutispalsta h1 {
padding: 0;
margin: 0;
}

[anttti]

Muutenkin kannattaa harkita jonkin CSS resetin (esim. http://meyerweb.com/eric/tools/css/reset/) käyttöä. Tuo stylesheet siis otetaan joka sivulla ihan ensimmäisenä käyttöön, se poistaa kaikkien elementtien marginit, paddingit, borderit jne. ja näin ehkäisee juuri tällaisten ongelmien syntymisen (eri selaimissa on eri default-asetukset elementeille).

Tuon HTML:n tasostakin voisi ihan rakentavasti olla montaa mieltä, turhia tageja näyttää olevan jo tuossakin pätkässä useita.

[OPJ]

Onpa kyllä harvinaisen hankalasti tehty tuo pätkä, mutta ei siitä sen enempää... Pikaisesti vilkaistuna, määrittele h1:lle margin ja padding ni pitäs rauhtottua, eli esim näin:

Koodi: Valitse kaikki

div#uutispalsta h1 {
padding: 0;
margin: 0;
}

En ihan eilisen teeren poika ole, ja toki olen määritellyt nuo arvot kohdistumaan kaikille elementeille CSS:ssä

Koodi: Valitse kaikki

* {
	border: 0;
	margin: 0;
	padding: 0;
	font-size: 12px;
	}

Kokeilin joka tapauksessa annettuja vinkkejä, mutta CSS-resetillä ei ollut vaikutusta eikä myöskään , että määrittelin margin- ja paddin-arvot h1:lle erikseen.

IE:ssä bugi siis näyttää selvennykseksi tältä:



CSS-tiedostossa toistaiseksi on turhia määritteitä maginaalien ja toppausten osalta, sen myönnän, koska en ole ehtinyt siivoamaan sitä järkeväksi. Noi on haulikkoammunan tulosta vain. Yleisesti annetuista margin ja padding-määrittelystä huolimatta IE totteli esimerkiksi oikeaan palstanleveyden luonnollisesti vasta sitten, kun margin ja padding-arvoiksi määrittelin sille erikseen nolla (muilla selaimilla 10). Yleensä aluksi IE:lle määrittelen mahdolliset poikkeavat tyylit samaan CSS-tiedostoon käyttämällä asterixia.

Ja miten html-koodi näyttää hankalalta? Jokaisella elementillä on funktionsa, kuitenkin. Toki, kun en koko koodia voi/halua julkaista, niin voi olla epäloogisen oloista.

[OPJ]

Ongelma ratkaistu; ilmeisesti jossain palvelimen ja allekirjoittaneen välissä oli välipalvelin, joka tarjosi vanhaa versiota katsottavaksi koko ajan - siitä huolimatta, että selaimien välimuisteja on täällä päässä tyhjätty ja selaimia uudelleen käynnistetty.

Ratkesi siis "itsestään". Sitä en osaa sitten sanoa, missä vaiheessa. Luultavasti tuo CSS reset kuitenkin lienee osatekijä tässä. Siivosin myös muun CSS-koodin turhasta tauhkasta, joten ehkä siinäkin.

Kiitos ja anteeks.

[jozan]

Itselläni pistää silmään kun olet käyttänyt id:tä 'uutinen' useita kertoja samalla html-sivulla. Id:n tarkoitus on esiintyä vain kerran kullakin sivulla. Esim. #header, #content ja #wrapper. Classit sen sijaan ovat tarkoitettu esiintymään sivulla useampia kertoja.

Myöskin tuosta CSS:n resettaamisesta pisti silmään tapasi. Selectorilla * ei kannata välttämättä resettailla sivuja, varsinkaan isompia saitteja joilla on paljon elementtejä. Ai miksikö? Linkattu CSS-reset on tehokkaampi ratkaisu, pitäisi riittää perusteluksi.

Ei sillä, että haluaisin nostaa epäkohtia työstäsi esille, mutta sattuivat silmään ja ajattelin tarjota muutaman ystävällisen neuvon. :)

– Jozan