Having an issue that's probably an easy "hack" but I can't seem to figure it out. Where I’m styling a simple “search area” of my navigation (black bar in header) that’s causing the anchor tag text to dip down in IE 7 and not in Firefox, IE 8 or Safari.

I put the search anchor inside of a div that’s floated next to another floated div. I do this all the time. However, in this case, the anchor (and text) are dipping lower in IE 7. I’ve tried all kinds of things to work this out but, no solutions yet.

Screenshot attached…

You can view our dev site here: http://174.37.48.36

You’ll land on the home page of Wines.com (our new version of Wines.com, not yet launched on the WWW).

Anyway, look up towards the top right of the container, in the black navigation area. You’ll see a text input box with the word “search” to the right of that. If you view this URL in Firefox, you won’t see anything strange. If you view it in IE 7, you’ll see that the word “search” is falling too far down - below the text input box.

I’ve tried ZERO padding, ZERO margin, taller height, wider width, display as a block element, etc. Right now I’ve placed about 4px of padding on the word “search” to make things line up in Firefox, Safari, and even IE 8. However, that exasperates the issue in IE 7.

Any ideas?

Happy to share the host login, CSS file, etc.

If you view the code in Firebug, look at the “skin.css” file and then under the “search contain” content area for the classes related to the issue!

Thanks a million for your consideration!