CMS Made Simple Forums

Posted: **Thu Dec 14, 2006 4:32 pm**

Hi all,

I am using CMSMS v1.0.2 but I am experiencing a problem with IE7 and the vertical menu CSS. Basically, if a link in the main menu has a child menu, a white space appears bellow that menu option and if the child menu also has submenu the same happens on the child menu.

I have noticed that the CSS itself already includes two lines that should fix the problem:

/* Styling the basic appearance of the menu elements */
#primary-nav a {
border: 1px solid #cccccc;
display: block;
padding: 5px 5px;
color: #333333;
text-decoration: none;
background: transparent;
min-height:1em; /* Fixes IE7 whitespace bug*/
}
#primary-nav li, #primary-nav li.menuparent {
background-color: #ffffff;
min-height:1em; /* Fixes IE7 bug*/
}

However the bug is still there. If I remove both min-height lines the white space no longer appears however the only part of the menu that actually works as a link is the text itself, therefore if I move the mouse to try and reach the sub-menu it quickly disappears.

I am at a loss and any help will be much appreciated.

Regards,
icebrian

Posted: **Thu Dec 14, 2006 6:31 pm**

Try this in the head section of the template you are using for the page with the CSS Menu

Code: Select all

<!--[if IE 7]>
<style type="text/css">
#primary-nav li {margin-bottom: -3px;}
#primary-nav li:hover {margin-bottom:-3px;} /* a HACK!!! for IE7 */
</style>
<![endif]-->

Posted: **Fri Dec 15, 2006 9:51 am**

That worked perfectly, the only thing is that I had to remove this:

Code: Select all

<!--[if IE]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->

Thanks for your help.
icebrian

Posted: **Fri Dec 15, 2006 11:01 am**

Well I came to realize that by removing the above peice of code, the menu would no longer function in IE6 I therefore added the same code with a conditional IF IE 6:

Code: Select all

<!--[if IE 6]>
<__script__ type="text/javascript" src="modules/MenuManager/CSSMenu.js"></__script>
<![endif]-->

Posted: **Fri Dec 15, 2006 1:52 pm**

Best to use

Code: Select all

<!--[if lte IE 6]>

Then it will work in versions less than 6 as well.

CMS Made Simple Forums

IE7 Whitespace BUG when using Vetical Menu CSS

IE7 Whitespace BUG when using Vetical Menu CSS

Re: IE7 Whitespace BUG when using Vetical Menu CSS

Re: IE7 Whitespace BUG when using Vetical Menu CSS

Re: IE7 Whitespace BUG when using Vetical Menu CSS

Re: IE7 Whitespace BUG when using Vetical Menu CSS