text is wrapping under bullet in css list - css

Question

I'm trying to get all the text in this list to be flush against the bullet. However, the text is wrapping under the bullet image. Tried changing the padding/margin on the a and li and also nowrap, but that just make it stick out over the right border. The bullets are the WBI logos under News: http://circore.com/womensbasketball/ Any ideas? thanks!

Answer 1

You could try
ul {
list-style-position: outside;
}
but I would personally use a background image and some padding, something like:
li {
list-style: none;
background: transparent url(your/icon.png) no-repeat left center;
padding-left: 20px; /* or whatever the width of your image is, plus a gap */
}
See this page for more details:
http://www.tm4y.co.za/general-tips/css-bulleted-lists-styling.html

Answer 2

I did this on your site with firefox and it works
#menu-news li:first-of-type {
border-top: medium none;
height: 55px;
list-style-position: inside;
margin-left: 8px;
margin-right: 15px;
padding: 10px 10px 10px 66px;
vertical-align: top;
}
#menu-news li {
background: url("images/wbismall.png") no-repeat scroll 0 0 transparent;
border-top: 1px solid #666666;
height: 55px;
list-style-position: inside;
margin-left: 10px;
margin-right: 15px;
padding: 10px 10px 10px 66px;
}

Answer 3

This works for unordered lists:
#menu-news ul {
list-style:outside circle;
margin-left:60px;
}
#menu-news ul li {
padding-left:20px;
}
The margin-left moves the whole list in by 60px.
The padding-left is only needed if you want extra space between the bullet point and the list item text. The list item text wraps under itself and not under the bullet.

Answer 4

You need to add display: inline-block; to the link inside the td element.
Your class looked like this:
#menu-news li a {
color: #000000;
font-family: Arial,Helvetica,sans serif;
font-size: 13px;
margin-top: 10px;´
}
But need to look like this:
#menu-news li a {
display: inline-block;
color: #000000;
font-family: Arial,Helvetica,sans serif;
font-size: 13px;
margin-top: 10px;
width: 200px;
}

Answer 5

I had the same problem and here is how I fixed it. The important line is background-repeat: no-repeat;. Bullet points will be added to every new line/list item of your list but it will not put a bullet point when text is wrapped to the next line. Look at my code below to see where I placed it.
ul {
margin: 0;
list-style-type: none;
list-style-position: inside;
}
ul li {
background-image: url(https://someimage.png);
background-size: 25px;
background-repeat: no-repeat;
background-position: 0px 5px 100px;
padding-left: 39px;
padding-bottom: 3px;
}
A few notes on my code: I used an image for the bullet points. I also used background-image: instead of list-style-image: because I wanted to control the size of the image bullet. You can simply use list-style: property if you want simple bullet and this should work well even with wrapped text. See https://www.w3schools.com/cssref/pr_list-style.asp for more information on this.

Answer 6

Try simple set the position attribute:
list-style-position: inside; nothing more need to work.
Here is the working example:
https://codepen.io/sarkiroka/pen/OBqbxv

Answer 7

I ran into a similar issue while I testing accessibility of pdfs generated with pdfreactor, my problem was that list-style-type: disc broke the 'logical reading order' in Adobe acrobat's Reading Order Pane. Having a jumbled reading order won't break the NVDA screen reader experience for visually-impaired users, but it does prevent the user from bookmarking a pdf document correctly.
My solution to fix the text from wrapping directly underneath the bullet character AND fix the reading order:
ul {
list-style-type: none;
}
li {
margin-left: 10px;
}
li::before {
content: '•\00A0';
margin-left: -10px; // a negative margin will remove the bullet from interrupting the flow of the text
}