-
1. Re: Spry Menu Bar - IE 6 & 7 Line Height Problem
Arnout Kazemier Nov 3, 2009 3:18 AM (in response to brian-j)A simple fix would be to create a new CSS rule:
ul.MenuBarHorizontal li ul
with the grey background color
ul.MenuBarHorizontal li ul { background: #ccc; }
-
2. Re: Spry Menu Bar - IE 6 & 7 Line Height Problem
brian-j Nov 3, 2009 10:52 AM (in response to Arnout Kazemier)Thanks for your suggestion, Arnout. I see where you're coming from, but adding a "ul.MenuBarHorizontal li ul"rule wouldn't address the problem. It would still leave me with line-height problems. The top level buttons would still not span the entire height they should, and the drop down (second level) buttons would also still not be the correct height either.
It's not just the appearance of the background color that's the issue. The buttons aren't the correct height in IE 6 &7. In the drop-down portion of the menu, this creates gaps between the buttons.
Hopefully someone out there has a solutions.
Thanks!
Brian
-
3. Re: Spry Menu Bar - IE 6 & 7 Line Height Problem
Zabeth69 Nov 3, 2009 7:00 PM (in response to brian-j)Brian, what you are encountering is a difference in rendering height and line-height between IE and the rest of the world. I was able to stabilize your submenus by doing this in the associated stylesheet:
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
color: #333;
background: transparent;
font-weight: bold;
text-decoration: none;
padding-right: 15px;
padding-left: 15px;
height: 2em;
line-height: 2em;
}If this is not the height you want, you should be able to change it. Just remember to change both height and line-height in this style.
Beth
-
4. Re: Spry Menu Bar - IE 6 & 7 Line Height Problem
brian-j Nov 3, 2009 7:49 PM (in response to Zabeth69)Hey Beth,
Thanks for your reply. I thought we had it, your fixes the problem in IE7, but it falls apart in IE6. There's a link to a screen shot below... basically, the top level nav buttons span the entire length of the horizontal nav bar and go down vertically.
I ran into this same problem while working on a fix for the line height problem. When I enter a "height" value (instead of line-height, or in this case, in addition to line-height) the nav bar does what's shown in the screen shot below.
Updated html page: http://www.lwlgraphics.com/Test/a1/siteNav4_Current-wip.html
CSS:http://www.lwlgraphics.com/Test/a1/SpryAssets/SpryMenuBarHorizontal-4-current-wip.css
Screen shot: http://www.lwlgraphics.com/Test/a1/images/spryScreenShot-2.jpg
Any ideas?
Thanks!
Brian
-
5. Re: Spry Menu Bar - IE 6 & 7 Line Height Problem
Zabeth69 Nov 4, 2009 4:42 AM (in response to brian-j)Yes. I think you need to constrain the width of the top-level li, in ul.MenuBarHorizontal li. You can even give it a percentage width, but it needs a width. As you see, a width set to auto for the list item may let it run the full width.
Beth
-
6. Re: Spry Menu Bar - IE 6 & 7 Line Height Problem
ADDT_IS_TOPS Feb 10, 2010 6:19 PM (in response to Zabeth69)Hey Beth
I hope you get this reply. I was stumped by the same line height issue. Many thanks for the fix. Much appreciated. Now if this could get into the Spry codebase and released as an update that would be the icing on the cake.
Cheers.
-
7. Re: Spry Menu Bar - IE 6 & 7 Line Height Problem
Zabeth69 Feb 11, 2010 6:59 AM (in response to ADDT_IS_TOPS)Be careful, icing is all sugar!
You're welcome.
Beth


