I'm working on a new header for my site and am having issues with placing a dropdown arrow next to menu items that have dropdowns, but only in IE6; FireFox and IE7 work fine.

The sample test page can be viewed at http://jet.muvenum.com

Does anyone now how I can make IE6 render the dropdown arrow correctly (it currently shifts the word and the arrow up rather than keeping it centered like FireFox and IE7 do)?

Thank you,

John

You should use padding and/or margins to space the text in your nav rather than the vertical-align: center thing - -which refers to the BASELINE and does not work at all like the vertical-align in tables.

It looks like I had that ("vertical-align:center") added to the first drop down arrow img tag. Removing that ("vertical-align:center") didn't address the issue. I'm not sure where you are seeing the "vertical-align:center" for the nav text as I've done a search and had only the 1 result pointing to the "img" tag.

I'm curious as to why the text jumps to the top on IE6 when adding he image tag inside of the <a></a> tags.

My css that I think is tied to this is:

#header ul li a {
display: block;
background: url(/images/nav_bg.gif) 0 0 repeat-x;
padding: 0 14px;
font: bold 11px/27px Arial, Helvetica, sans-serif;
color: #344A04;
background-color: inherit;
text-decoration: none;
}

Any other tips on resolving this issue would be appreciated.

Thanks,

John