ul li issue

[gonzorevup]

I am trying to get my li img to line up with my text, It lines up just fine in IE but firefox puts the li higher than the text. Is there a fix for this?

Below is a link so you can see my issue. Its the home button above the mylookups menu


http://knoxville.mylocallookup.com/

# home_btn ul {
padding-bottom:5px;
float:left;
}


#home_btn ul li {
margin-left: 25px;
padding: 0px;
list-style-image:url(http://knoxville.mylocallookup.com/images/home.png);
list-style-position: outside;
behavior: url(iepngfix.htc); 
}

#home_btn ul li a {
font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
font-size: 100%;
display: block;/*setting for FF and other standards compliant browsers*/
#display: block; /*setting for IE7*/
_display: block ;/*setting for IE6*/
padding: 5px 0px 10px 5px;
text-decoration: none;
color: #666666;
width:140px;
}

#home_btn ul li a:hover, #home_btn ul li a:focus {
color: #000000;
background-color: #eeeeee;
opacity: .3;
filter: alpha(opacity=30);
-moz-opacity:.3; 
}

thanks

[ejg]

I have never been able to get list-style-image to look good across all browsers.

I usually end up using <li><img src="aaa.jpg">text</li> so I can position the image and text in the css.

[gonzorevup]

Thanks, I was hoping i would not have to do that but, it looks like that's what i am going to do