MS-potilas

WordPressin oletus- eli default-teemassa (ns. Kubrick-teema) luetelmamerkit (bullet-merkit eli luetelmapallot ) on tyylitelty css-tiedostossa sellaisia valitsimia käyttäen, jotka eivät toimi Internet Explorerissa.

Esimerkki luettelosta luetelmamerkkeineen:

• asia numero yksi
• toinen juttu
• kolmas listan asia

Merkintöjen luetelmamerkit määritellään default-tyylin (muokkaa­mattomassa) style.css-tiedostossa seuraavasti:

html>body .entry ul {
	margin-left: 0px;
	padding: 0 0 0 30px;
	list-style: none;
	padding-left: 10px;
	text-indent: -10px;
	}
 
- - -
 
.entry ul li:before, #sidebar ul ul li:before {
	content: "\00BB \0020";
	}

IE tukehtuu :before-valitsimeen ja luetelmamerkit jäävät ainakin uudemmilla versioilla kokonaan näyttämättä, vaikka css-tiedostosta tämä optimistinen lausunto löytyykin:

/* Begin Lists
 
	Special stylized non-IE bullets
	Do not work in Internet Explorer, which merely default to normal bullets. */

Koska käytän itse pääosin Linuxia ja Firefox-selainta enkä luonnollisestikaan voinut arvata, että WordPressin oletusteemassa voisi olla tällainen ”ominaisuus”, olin käyttänyt merkinnöissä luetteloita ja luetelmamerkkejä jo monessa paikkaa. Potilas­kertomus­merkintää kasatessani tulin testanneeksi blogia hieman enemmän myös Internet Explorerilla (toki aluksi olin testannut, mutta silloin merkintöjä ja luetelmamerkkejä ei vielä juurikaan ollut) ja huomasin tämän ongelman.

Yritin etsiä netistä ratkaisua, jolla nämä ”bulletit” saisi näkymään kaikilla yleisimmillä selaimilla. Yllättävää kyllä, vaikka ongelma on jo ainakin yli vuoden vanha ja ollut olemassa WordPressin 2.0 -versiosta lähtien, ei siihen vieläkään löytynyt itseäni tyydyttävää ratkaisua. Joten sellainen piti itse tehdä.

Oletusluetelmamerkit merkintöihin

Ratkaisussani sivupalkin bulletit saivat jäädä ennalleen. Näin ollen ne näkyvät oikein mm. Firefoxilla ja silti Internet Explorerillakin sivupalkki on siisti, vaikkakin ilman tyyliteltyjä »-merkkejä. Merkinnöissä olevat luetelmamerkit muutetaan tyylitellystä »-merkistä oletusmerkkiin •.

Avaa (esimerkiksi teemojen muokkauksen kautta) tiedosto ./wp-content/themes/default/style.css ja etsi kohta:

html>body .entry ul {
	margin-left: 0px;
	padding: 0 0 0 30px;
	list-style: none;
	padding-left: 10px;
	text-indent: -10px;
	}

Korvaa se seuraavalla:

.entry ul {
	padding-left: 10px;
	margin-left: 0px;
}

Etsi:

.entry ul li:before, #sidebar ul ul li:before {
	content: "\00BB \0020";
	}

ja korvaa seuraavalla:

#sidebar ul ul li:before {
	content: "\00BB \0020";
	}

Päivitä tiedosto muutoksien jälkeen palvelimelle.

Pahoittelen blogini luettelojen aiempaa mahdollista huonoa luettavuutta Internet Explorer -selaimilla. Nyt luettelot ovat siistit luetelmamerkkeineen.