We’re close to entering beta with our new website - based on Dot Net Nuke. Before you panic - don’t sweat it, for the most part Dot Net Nuke doesn’t do CSS that much differently than coding a site from scratch. The issue I’m having seems to be a simple one - there’s something about how I’m styling a simple “search area” of my navigation area that’s causing the anchor tag text to dip down in IE 7 and not in Firefox. That is, In Firefox where I put the 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 the 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, 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, something is wrong with 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!