I'm making a list with CSS and HTML. I want the bullets to be an image. When the text wraps to the next line, it does not go to the correct position even though I'm using list-style-position
utside.
Here's the code I'm using:
CSS
.listOne{
margin:0px 0px 0px 0px;
list-style:none outside none;}
.listOne li{
padding:0px 0px 5px 15px;
background:url(bullet1.jpg) no-repeat;}
HTML
<ul class="listOne">
<li>Long text wraps to the next line, but it is not in the right place. Long text wraps to the next line, but it is not in the right place. Long text wraps to the next line, but it is not in the right place.</li>
<li>Long text wraps to the next line, but it is not in the right place. Long text wraps to the next line, but it is not in the right place. Long text wraps to the next line, but it is not in the right place.</li>
<li>Long text wraps to the next line, but it is not in the right place. Long text wraps to the next line, but it is not in the right place. Long text wraps to the next line, but it is not in the right place.</li>
</ul>
The image for the bullet is 10px wide so I need the padding for the li tag to be 15px to the right so it doesn't overlap the image. When the line wraps it ignores the 15px padding for some reason. Either that or I messed up the list-style-positionutside somehow.Also, is there a way to get rid of the huge indent that the ul tag makes in firefox? setting the margin for that tag to 0px or 1px doesn't do anything, but it works in IE.Add padding:0; to .listOne
The text wraps starting directly below the begining of the first line.
Where should it start?Actually I think the lines weren't wrapping correctly because my browser cached my .css file, and when I uploaded the new one it didn't update it because it's working now.
Thanks for the advice, I'll try using that padding:0Just a note: You don't have to use "0px", just 0. The reason is 0em, 0px, 0%, whatever unit it is, it's still 0. Nothing. So, in the future, don't add the unit to the end of every numeric value.
utside.Here's the code I'm using:
CSS
.listOne{
margin:0px 0px 0px 0px;
list-style:none outside none;}
.listOne li{
padding:0px 0px 5px 15px;
background:url(bullet1.jpg) no-repeat;}
HTML
<ul class="listOne">
<li>Long text wraps to the next line, but it is not in the right place. Long text wraps to the next line, but it is not in the right place. Long text wraps to the next line, but it is not in the right place.</li>
<li>Long text wraps to the next line, but it is not in the right place. Long text wraps to the next line, but it is not in the right place. Long text wraps to the next line, but it is not in the right place.</li>
<li>Long text wraps to the next line, but it is not in the right place. Long text wraps to the next line, but it is not in the right place. Long text wraps to the next line, but it is not in the right place.</li>
</ul>
The image for the bullet is 10px wide so I need the padding for the li tag to be 15px to the right so it doesn't overlap the image. When the line wraps it ignores the 15px padding for some reason. Either that or I messed up the list-style-position
utside somehow.Also, is there a way to get rid of the huge indent that the ul tag makes in firefox? setting the margin for that tag to 0px or 1px doesn't do anything, but it works in IE.Add padding:0; to .listOneThe text wraps starting directly below the begining of the first line.
Where should it start?Actually I think the lines weren't wrapping correctly because my browser cached my .css file, and when I uploaded the new one it didn't update it because it's working now.
Thanks for the advice, I'll try using that padding:0Just a note: You don't have to use "0px", just 0. The reason is 0em, 0px, 0%, whatever unit it is, it's still 0. Nothing. So, in the future, don't add the unit to the end of every numeric value.