[Resolved] Bullets For Two Lines Of Text

[Mary Pearson]

I am using an image to replace my bullets. When the text overflows onto two lines, the bullet lines up between the two lines of text instead of at the top of the first line. What am I missing? Thank you.

The CSS I’m using is:

/* Remove bullet points and “standarize” list */
.my-list {
list-style: none !important;
display: inline;
width: auto;
overflow: hidden; }

/* Add images instead of bullet points */
.my-list li {
background: url(‘https://my-website/wp-content/uploads/2018/06/bestwebsites-bullet-15px.png’) center left no-repeat;
padding-left: 25px !important;
margin-left: 25px;
line-height: 200%;
list-style-position: outside; }

[Tom]

I couldn’t really find a solution for this, but you might find one in one of these:
https://stackoverflow.com/questions/1708833/adjust-list-style-image-position
https://stackoverflow.com/questions/21427199/list-vertical-align-text-middle-with-list-style-image

[Mary Pearson]

Thanks Tom,

Lots of things on that page to try. Good resources. I finally settled on:

/* Remove bullet points and “standarize” list */
.my-list {
list-style-type: none;
display: inline;
width: auto;
overflow: hidden; }

/* add images instead of bullet points */
.my-list li {
background: url(‘https://…..bullet-15px.png’) left top no-repeat;
padding-left: 25px;
margin-top: 10px;
margin-left: 25px;
line-height: 1.5em;}

li:first-child {
margin-top:0; }

[Tom]

Glad you got something working 🙂

[Mary Pearson]

It’s not perfect, and it’s hard for a perfectionist to let it go at “not perfect”, but it will do. 😉

[Mary Pearson]

I kept at it. This is the best code, at least for my situation.

/* Remove bullet points and “standarize” list */
.my-list {
	list-style-type: none;
	display: inline;
	width: auto;
	overflow: hidden; 
}

/* add images instead of bullet points */
.my-list li {
	background: url('/CG-bullet.png')  no-repeat 0 2px;
        padding-left: 30px;
        margin-left: 25px;
        margin-bottom: 15px;  
}

[Tom]

Awesome, thanks for sharing it! 🙂

[Author]

Posts