HelloWorld1
HelloWorld1

Reputation: 14108

Can't display Icon Picture Inside of <Li>

Problem:
I cannot display the icon that is located inside of the <li>

What am I missing?

Thanks!

LI.filtered A {
  position: relative;
  padding: 1px 20px 1px 4px;
  background: #F0F0FF url("https://cdn0.iconfinder.com/data/icons/gcons-2/24/laptop1-16.png") no-repeat scroll right -52px;
  font-weight: 400;
  color: #FFF;
}
#result-filters UL {
  display: inline;
  list-style: outside none none;
  margin: 0px;
  padding: 0px;
            font-size: 12px;
            font-family: arial,helvetica,sans-serif;    
}
#body-right UL,
#body-right OL {
  margin: 10px 0px 0px;
}
.leftmenu LI.filtered,
#result-filters LI.filtered {
  padding-left: 0px;
  background: transparent none repeat scroll 0% 0%;
}
#result-filters UL LI {
  margin: 0px 8px 0px 0px;
  float: left;
}
<div id="result-filters">

  <ul>
    <li class="filtered">
      <a href="">
				Test1               
			</a>
    </li>
    <li class="filtered">
      <a href="">
				Test2            
			</a>
    </li>
    <li class="filtered">
      <a href="">
				Test2                
			</a> 
    </li>
    <li class="filtered">
      <a href="">
				Test2               
			</a> 
    </li>
    <li class="filtered">
      <a href="">
				Test2               
			</a>
    </li>
  </ul>

</div>

Upvotes: 0

Views: 90

Answers (1)

Dhaval Marthak
Dhaval Marthak

Reputation: 17366

It's Because of the background position -52px

Set it to 0

OR

Remove it

li.filtered a {
  position: relative;
  padding: 1px 20px 1px 4px;
  background: #08C url("https://cdn0.iconfinder.com/data/icons/gcons-2/24/laptop1-16.png") no-repeat scroll right;
  font-weight: 400;
  color: #FFF;
}
#result-filters ul{
  display: inline;
  list-style: outside none none;
  margin: 0px;
  padding: 0px;
            font-size: 12px;
            font-family: arial,helvetica,sans-serif;    
}
#body-right ul,
#body-right ol{
  margin: 10px 0px 0px;
}
.leftmenu li.filtered,
#result-filters LI.filtered {
  padding-left: 0px;
  background: transparent none repeat scroll 0% 0%;
}
#result-filters ul li{
  margin: 0px 8px 0px 0px;
  float: left;
}
<div id="result-filters">

  <ul>
    <li class="filtered">
      <a href="">
                Test1               
            </a>
    </li>
    <li class="filtered">
      <a href="">
                Test2            
            </a>
    </li>
    <li class="filtered">
      <a href="">
                Test2                
            </a> 
    </li>
    <li class="filtered">
      <a href="">
                Test2               
            </a> 
    </li>
    <li class="filtered">
      <a href="">
                Test2               
            </a>
    </li>
  </ul>

</div>

Upvotes: 2

Related Questions