Vert Menu Issues with IE7??

[duplay]

I have a test site with the v. 1.0.2 running and have noticed some visual issues with the vertical menu on Internet Explorer 7. The menu works, however, when you float up and down on the main menu, the box you are hovering over gets a white separator line below the box you are on. Also, when floating to the right for sub-menus (2 sub menus under one parent) the 2 sub menus get a gap between them (it actually moves)


has anyone else seen these issues? I am want to uprade from .13 to 1.0.2 but not sure til this is fixed. Thanks

[tsw]

1.0.2 was released when IE7 was beta, so there might be some quirks with the default templates.

default templates are only a guideline of how things can be done and you can modify them as you wish or create your own from scratch

[nils73]

Most of the time it is "only" a CSS-problem - or a problem with the conditional comments since IE7 gets a lot of things right and others remain buggy. So a conditional comment should always be like this:

Code: Select all

<!--[if lte IE 6]><link rel="stylesheet" type="text/css" href="ie_all.css" /><![endif]-->
<!--[if gte IE 7]><link rel="stylesheet" type="text/css" href="ie7plus.css" /><![endif]-->

And in ie7plus.css you might want to try min-height: 1px; on items that show problems in IE7 --- it could work afterwards.

Regards,
Nils

[tkemmere]

Hi,

I'm running into the same problem as descibed on top by Duplay:

have noticed some visual issues with the vertical menu on Internet Explorer 7. The menu works, however, when you float up and down on the main menu, the box you are hovering over gets a white separator line below the box you are on.

I running cmsms v 1.2.3.

I added "min-height: 1px;" straight in the menu-css, as Nils suggested:

Code: Select all

...
/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent, 
#primary-nav li.menuparent:hover, 
#primary-nav li.menuparenth { 
   background-image: url(images/cms/arrow.gif); 
   background-position: center right; 
   background-repeat: no-repeat;
   min-height: 1px;
}
...

But it didn't do the trick.

I don't really know where to look, to solve this, since I'm not sure what it is caused by in the first place. I went through several other posts relating to menu/css/hover/MSIE/issues/problems etc, but could not find the answer.

Would anybody have a solution? I would much appreciate it.

Cheers, Thomas.

[duplay]

Thomas,

Take a look at this link and let me know if this makes sense. Based on this old reply I was able to fix one fo my sites not to do the white space. let me know if it looks good to you via ie7 www.sparcc.org

However, I have not been able to recreate this fix again. I'd like to see if it makes more sense to you, cause I have plenty of new sites with the white space I could try it on.

Thanks

MJD


http://forum.cmsmadesimple.org/index.ph ... 853.0.html

[tkemmere]

Hi Duplay,

Thanks a lot for the reference.

My expert level is not enough to completely understand what I'm doing. But with your help I made progress. My menu is still "dancing" a bit as I hover across main items that have sub-items, and then to main items that don't. But the white space is gone. Yess!

I added

Code: Select all

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

To the template, (within the literal-tag).
Note the -4, and the -3. That got rid of the double (2px) border.

and

Code: Select all

#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; min-height:1em;}
#primary-nav li a { _height: 1%; min-height:1em;}

To the Stylesheet.

I'm happy now. It looks good enough.

Thanks a lot! regards, Thomas.

[duplay]

Your not going to believe this, but if you go to your template and change to it will fix your bouncing menu. This one drove me nuts and I had to tweak one again. works great in IE7 now. No white spaces. Wish we could send that to someone for future update. MJD

[eh]

Found this post after I wrote down my solution to this issue:

Here's what I did:

http://forum.cmsmadesimple.org/index.php/topic,21858.0.html

ernst