IE7 SiteMenu styling issues

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
8/3/2012 9:36:03 AM
Gravatar
Total Posts 30

IE7 SiteMenu styling issues

Website: jnf.visualsolutionsinc.com

I have found and fixed a few issues with IE7, including the top SiteMenu opening behind the main content instead of on top of it. Here's the fix for anyone else having that same issue (my layout.master has header in one div and then content in separate div, note this is in IE7 specific css file and not needed for other browsers/versions):
#wrapheader {position: relative; z-index: 2;}
#wrapcenter {z-index: -1}

But I've tried for days now and cannot get the SiteMenu to style the same as on IE8/9, FireFox, and Chrome. Specifically individual sub menu items are only as wide as their individual text, where each dropdown set should be as wide as the widest text (meaning all the same width). Anyone had a similar issue and fixed it? Boss wants IE7 compatibility (thankfully not worrying about IE6). This may be as good as it gets, but other example skins don't exhibit the same issue. I'm not knowledgable about asp.net's treeview or mojo's wrapper on that to know the styles or calls I might need.

History: I built our current theme/skin from several different of the example sets offered in the main download and extraskins download. I have tried my hardest to mesh the required elements from different layout.master, theme.skin, and various css file sets (from said examples and from mojo website documentation/searching). Somewhere I'm just missing one piece or style or maybe even scripting file.

Thanks in advance for anyone's help!

8/3/2012 11:00:42 AM
Gravatar
Total Posts 91

mojoPortal Hosting & Design @ i7MEDIA!

Re: IE7 SiteMenu styling issues

Hi there.

The issue you are running into is caused by white-space: nowrap; from .art-hmenu ul a.  The reason it is there is because it causes the "li" element to become as wide as the content inside it.  It's supposed to act kind of like a table cell when used like this.  Unfortunately in IE7 it acts different than other browsers and span only to the width of it's own content instead of the widest "li" element in the group.  My thoughts on fixing the menu it to remove all the styling you have on the "a" elements in the sub menu and placing it on it's parent "li" instead, that way your sub menu looks the same and the only difference between newer browsers and IE7 is that the clickable area of the link will not span the entire width of the sub menu but it will span the text.

Another solution would be to implement the Superfish menu and have some javascript fix the problem.  You can read up on the Superfish menu here: https://www.mojoportal.com/using-superfish-menus.aspx

I hope that helps. Good luck!

-Elijah

8/3/2012 1:04:28 PM
Gravatar
Total Posts 30

Re: IE7 SiteMenu styling issues

Elijah, thanks so much for pointing me in the right direction!! I've got it figured out with a little playing around so it still works in FF, IE8/9, and now in IE7 with the small caveat like you said.

Just to help anyone else, moving CSS from the "a" to the "li" elements worked. I found that I also had to add a similar level li:hover to the white-space: nowrap; line. But I also found one item that did have to go back on the .art-hmenu ul a - display: block, otherwise the clickable area was only the link and not the whole block - meaning the IE7 way was all browsers. Added that one part back and IE8/9, FF, Chrome all are clickable for the entire width of sub-menu, IE7 only one clickable only on link text, and that's acceptable to me - it's very minor and most people click the words to navigate anyway. Gotta love IE "standards" though...

Thanks again Elijah for the suggestion, helped me tons!! Worked great with tweaks mentioned.

You must sign in to post in the forums. This thread is closed to new posts.