Archived topic
Bullets For Two Lines Of Text
6 replies · Started by Mary Pearson on June 17, 2018
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; }
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
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; }
Glad you got something working :)
It's not perfect, and it's hard for a perfectionist to let it go at "not perfect", but it will do. ;-)
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;
}Awesome, thanks for sharing it! :)
