Hey there! I could really use some assistance with a couple of issues I'm facing.
I'm trying to display list-items on my website, but two problems keep popping up:
I'd like to replace the normal bullet points with a V image
The list items are supposed to be displayed in 3 columns, but the first item in the first column is slightly shifted down.
Here's a snippet of my HTML code:
<div id="box2" class="features">
<ul>
<li>Smoking Policy</li>
<li>Business Center</li>
<li>Doctor</li>
<li>Free Wifi</li>
<li>Pets Allowed</li>
</ul>
</div>
.features{
position:relative;
float:left;
width: 90%;
height: auto;
margin: 1% 0 0 2%;
border-radius:5px;
padding: 0% 1% 0% 1%;
font-size: 12px;
border: solid 1px #D41717;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;}
.features ul img{width: inherit;}
.features ul li{list-style-image: url('images/v-list.png');}
.features li {
display: block;
padding-bottom: 10px;
}
You can view an example picture here.
Your help would mean a lot!
Thanks, Jon