custom bullet list

[papillonstudios]

I have this custom bullet list and i have it working but i have one problem, its not centering the custom bullet vertically

 

heres my code and a screenshot of what i mean

#linkcat-2 {
list-style:none;
margin-top:80px;
margin-left:20px;
}

#linkcat-2 h2{
display:none;
}

#linkcat-2 li {
  background-image: url(images/bulletlistshows.png);
  background-position: center left;
  background-repeat: no-repeat;
  padding-left: 20px;
  list-style: none;
  font-size:10px;
  padding-bottom:20px;
}

 

 

[haku]

CSS without HTML is like icing without a cake.

[papillonstudios]

<li id="linkcat-2" class="linkcat"><h2>Recent Shows</h2> 
<ul class='xoxo blogroll'> 
<li><a href="http://MARATHONSHOWPART7-AUG2010" target="_blank">MARATHON SHOW PART 7 &#8211; AUG 2010</a></li> 
<li><a href="http://redbarradio.com/forum/index.php?topic=386.0">MARATHON SHOW PART 8 &#8211; AUG 2010</a></li> 
<li><a href="http://redbarradio.com/forum/index.php?topic=34.0">RED BAR RADIO (08-17-10) THE 3AM SHOW</a></li> 
<li><a href="http://redbarradio.com/forum/index.php?topic=359.0">RED BAR RADIO (09-07-10)</a></li> 
<li><a href="http://redbarradio.com/forum/index.php?topic=367.0">RED BAR RADIO (09-15-10)</a></li> 
<li><a href="http://redbarradio.com/forum/index.php?topic=369.0">RED BAR RADIO (09-17-10)</a></li> 
<li><a href="http://redbarradio.com/forum/index.php?topic=391.0">RED BAR RADIO (09-27-10)</a></li> 
<li><a href="http://redbarradio.com/forum/index.php?topic=394.0">RED BAR RADIO (09-29-10)</a></li> 
<li><a href="http://redbarradio.com/forum/index.php?topic=399.0">RED BAR RADIO (10-01-10)</a></li> 
<li><a href="http://redbarradio.com/forum/index.php?topic=404.0">RED BAR RADIO (10-05-10)</a></li> 

</ul> 
</li> 

[frizi]

One thing which i'm thinking at would be to use line-height:100px; where 100px is the size of the elment or so. This way the text will be in the vertical middle. Try to play with the width and height property and center it also vertically with the mentioned command. Good luck!

[haku]

Frizi has the right idea. Only problem is if you li element extends to two lines.

 

You could also try trimming some of the whitespace off the top of the image, or else adding a bit of top padding to your li tags.

[papillonstudios]

One thing which i'm thinking at would be to use line-height:100px; where 100px is the size of the elment or so. This way the text will be in the vertical middle. Try to play with the width and height property and center it also vertically with the mentioned command. Good luck!

 

 

line-height:30px; Works for me thanks man problem solved.

[frizi]

You welcome, next time you should also help to others if you will be able to!