Icons in left nav not centering

[caser85]

Hello,

I'm trying to the icons in my left navigation menu to center vertically, but I just can't do it. The site is: http://www.bigiowa.com/design/

The HTML is as follows:

        <dl class="leftnav">
          <dt><a href="/design/"><img src="img/icons/home.png" />Home</a></dt>
		  <dt><a href="/history/"><img src="img/icons/notepad.png" />History Project</a></dt>
          <dt><a href="/forum/"><img src="img/icons/user_comment.png" />Forum</a></dt>	
          <dt><a href="/about/"><img src="img/icons/information.png" />About</a></dt>
        </dl>

and the CSS is:

/* LEFT NAVIGATION */
.leftnav {width:199px; border-bottom:solid 1px rgb(200,200,200); vertical-align:middle;}
.leftnav dt img {border:none; vertical-align:middle; }
.leftnav dt a, .leftnav dt a:visited {display:block; min-height:2.1em /*Non-IE6*/; height:auto !important; height:2.0em /*IE6*/; line-height:2.1em; padding:0px 10px 0px 15px;  border-top: solid 1px rgb(200,200,200); text-decoration:none; color:#336399; font-weight:bold; font-size:120%; vertical-align:middle}
.leftnav dd a, .leftnav dd a:visited {display:block; min-height:1.6em /*Non-IE6*/; height:auto !important; height:1.7em /*IE6*/; line-height:1.6em; padding:0px 10px 0px 30px; border:none; font-weight:normal; text-decoration:none; color:#336399; font-size:120%;}
.leftnav dt a:hover, .leftnav dd a:hover {background-color:#E6F0C1; color:#336399; text-decoration:none;}

Any idea what I'm doing wrong? I thought this line would take care of it:

.leftnav dt img {border:none; vertical-align:middle; }

[trickyjw]

They appear ok to me. I'm viewing the site in IE6. Is the problem happening in a particular browser?

[caser85]

Yes, I should have mentioned it's happening in Firefox 2.0.0.3.

[Tyssen]

Try setting the line-height to the same as the height. Why are you using a definition list though? You've got no <dd>s in your menu. With your structure, you'd be better using an unordered list.