IE 6 line height fix needed

[tslice]

Here is my basic code snippet:

/* TOP ================================================== */
#top {
display: block;
width: 960px;
margin: 5px auto 0 auto;
}
#top .links {
list-style: none;
margin-left: 7.5px;
font-size: 15px;
}
#top .links li {
float: left;
margin: 0 2.5px;
height: 32px;
line-height: 32px;
}
#top .links a {
display: block;
text-decoration: none;
border: solid 1px #000000;
border-bottom: none;
background-color: #F0F0F0;
padding: 0 5px;
}
#top .links a:hover {
background-color: #FFFFFF;
}
#top .links img {
border: none;
padding-right: 3px;
position: relative;
top: 2px;
}
#top .search {
float: right;
margin-right: 10px;
border: solid 1px #000000;
border-bottom: none;
height: 32px;
line-height: 32px;
padding: 0 5px;
background: #F0F0F0;
}

<div id="top">
<ul class="links">
<li><a href="http://localhost:8888/" title="ArtesiaNews.com Homepage">Home</a></li>
<li><a href="http://localhost:8888/feed/" title="Subscribe to ArtesiaNews.com">News</a></li>

<li><a href="http://localhost:8888/feed/" title="Subscribe to ArtesiaNews.com"><img src="http://localhost:8888/wp-content/themes/adp/images/feed-icon16x16.png" alt="RSS"/></a></li>
<li><a href="http://localhost:8888/feed/" title="Subscribe to ArtesiaNews.com"><img src="http://localhost:8888/wp-content/themes/adp/images/feed-icon16x16.png" alt="RSS"/> News</a></li>
<li><a href="http://localhost:8888/comments/feed/" title="Subscribe to Comments"><img src="http://localhost:8888/wp-content/themes/adp/images/feed-icon16x16.png" alt="RSS"/> Comments</a></li>
</ul>
<form class="search" method="get" action="http://localhost:8888">
<input class="text" name="s" type="text" value="Search" maxlength="150" onfocus="this.value=(this.value=='Search' ) ? '' : this.value;" onblur="this.value=(this.value=='' ) ? 'Search' : this.value;" />
<input type="submit" class="button" value="Go" />

</form>
</div>

Working example can be found at artesianews.freshgreenmedia.com

I'm trying to get the RSS icons to work alongside the text in the very top tabs. Super easy to do in any other browser, but IE 6 has got me stumped.

Any ideas?

[KDLA]

I suggest you use the image as a background for the link text, rather than as a separate image. That way, you can align it correctly using background position.

<li><a href="http://www.artesianews.freshgreenmedia.com/feed/" title="Subscribe to ArtesiaNews.com" style="background: url(http://www.artesianews.freshgreenmedia.com/wp-content/themes/adp/images/feed-icon16x16.png) no-repeat left center; padding-left: 18px;">News</a></li>

[tslice]

Thats a good idea, but I need to use the a element background for its hover attribute.

[tslice]

I gave up on this, it's not worth the time spent trying to figure it out. IE is f-ing pathetic.

[BlueRain]

Thats a good idea, but I need to use the a element background for its hover attribute.

Wouldn't this work?


#top .links a {
display: block;
text-decoration: none;
border: solid 1px #000000;
border-bottom: none;
background: #F0F0F0 url(http://www.artesianews.freshgreenmedia.com/wp-content/themes/adp/images/feed-icon16x16.png) no-repeat left center;
padding: 0 5px 0 18px;
}
#top .links a:hover {
background-color: #FFFFFF url(http://www.artesianews.freshgreenmedia.com/wp-content/themes/adp/images/feed-icon16x16.png) no-repeat left center;
}

[tslice]

No, I want to use the a element and the background attribute for a rollover image effect. I already gave up on this and moved the rss links into the sidebar of my site. It will work for now.