7 Replies Latest reply: Feb 11, 2010 6:59 AM by Zabeth69 RSS

    Spry Menu Bar - IE 6 & 7 Line Height Problem

    brian-j Community Member

      I'm stumped. I've got a Spry Menu Bar that's working in Firefox 3 and IE 8, but has problems in IE 6 & 7. I'm using Spry version 1.6.1.

       

      I need the top level buttons in the nav bar to match the height of a background nav bar image, so I set the "line-height" property in the "ul.MenuBarHorizontal li" selector. I've also set the "line-height" in the "ul.MenuBarHorizontal ul li" selector.

       

      In IE 6 & 7 the line heights get messed up and doesn't render properly. When you rollover the buttons, the background color doesn't fill the entire space it should... it's too short. (I also tried setting the "height" instead of the "line-height", but that seemed to create more serious problems.)

       

      So here's what I've got...

       

      HTML page: http://www.lwlgraphics.com/Test/a1/siteNav3.html

      Screen shot of what it looks like in IE 6 & 7: http://www.lwlgraphics.com/Test/a1/images/spryScreenShot-1.jpg

      Spry CSS file: http://www.lwlgraphics.com/Test/a1/SpryAssets/SpryMenuBarHorizontal3.css

       

      Any help anyone can give would be much appreciated!

       

      Thanks!!

      Brian