Can someone help me with this stupid CSS issue please?

[slobizman]

I' going crazy on a seemingly easy thing to do in CSS. I have the Education Theme (not Pro) and it comes with a bullet.png bullet for unordered lists in the entry content. I am trying to just make it a regular bullet, not the file. I know what to do (or so I thought), but when I do it I remove the bullet.png file from showing, but the bullet area just remains blank. What am I doing wrong. Here's the code that comes with Education:

/* Ordered / Unordered Lists
------------------------------------------------------------ */

.entry-content ol,
.entry-content ul {
	margin: 0;
	padding: 0 0 25px;
}

.archive-page ul li,
.entry-content ul li {
	background: url(images/bullet.png) no-repeat 10px 14px;
	list-style-type: none;
	margin: 0;
	padding: 7px 0 0 30px;
}
.entry-content ol li {
	margin: 0 0 0 35px;
}

.archive-page ul ul,
.entry-content ol ol,
.entry-content ul ul {
	padding: 0;
}

So, I made the following change in the relevant area of code:

.archive-page ul li,
.entry-content ul li {
	list-style-type: square;
	margin: 0;
	padding: 7px 0 0 30px;
}

But that does not show a bullet. Even removing that entire part from the style.css file does not do it.

I'm stumped, and I know it's something dumb.

[Marcy]

You might need to add the "list-style-type: square;" to the ul, and not just the li.

Try adding just above the CSS you have:

.archive-page ul,
.entry-content ul,
.archive-page ul > li,
.entry-content ul > li {
	list-style-type: square;
}

You may only need it for the ul, but if you have li { list-style-type: none; } somewhere, you will also need the others.

I be of more help without a link to your website.

---

Marcy | Amethyst Website Design | Twitter

[slobizman]

Thanks Marcy. But that didn't work.

I would have put the website link in, but I don't want to have it not showing bullets, so I don't leave it up that way.

[slobizman]

This reply has been marked as private.

[slobizman]

Here's the page. Much appreciated.

[Marcy]

The square bullets are there; you just can't see them.

In this line 119,

li, ol, ul {
    margin: 0;
    padding: 0;
}

the "margin: 0" on li pushes it to the left margin.

You need to add margin back into line 1112 where you add the square bullets:

.archive-page ul li, 
.entry-content ul li {
    list-style-type: square;
    margin: 0 0 20px 20px;
}

I used 20px, but you can adjust however you like.

---

Marcy | Amethyst Website Design | Twitter

[slobizman]

Thank you, thank you, thank you!!

[Marcy]

You're welcome!

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts