Quick Nav:  Online Store   |   Login | Register
Forums >Snapsis Product Support >CSS NavMenu

Vertical hover in I.E 7

Rate this topic:

Please Register to post a reply. Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.
AuthorMessages
TiagoR
<20 Posts
Posts:18


03/10/2008 7:46 AM  

Hello !

I am with a problem. The vertical hover do not work well in I.E 7 . A see the example of vertical menu in your site:

http://demo.snapsis.com/Hover/VerticalFlyout/tabid/55/Default.aspx

And it also do not work well !

I attach a image of my problem and the css !

thanks

 


Attachment: 1310461283371.zip

John Mitchell
Posts:3471


03/10/2008 8:10 AM  

Hi,

I'm not sure what you mean when you say the demo does not work well.

The Flyouts in the demo do not have the problem that you described in your attachment.

You may need to set AddMouseOver="true" in your menu settings to get the menu to behave correctly in IE.

TiagoR
<20 Posts
Posts:18


03/10/2008 11:37 AM  

Hi John

were I insert  AddMouseOver="true" ? Were is this settings you talk about ?

Sorry about the post about the problem of the demo site in I.E 7. I view the page with a I.E 7 bad instaled ! 

bye bye 

John Mitchell
Posts:3471


03/10/2008 11:46 AM  
The AddMouseOver="true" setting goes in the menu definition in your skin.
Same place as Level=, IncludeTabs=, ExcludeTabs=, etc.
TiagoR
<20 Posts
Posts:18


03/10/2008 2:58 PM  

Hi John

Thank you very much by the post.

I found the source of this problem.

This site was created in table less(pure css layout):

http://www.businessedgepreview.com/fayencevacances/

and this type of layout need of a doctype.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">"

Well, the my hover vertical menu have problems in I.E 7 when the site have the doctype. When I delete the doctype the menu works ok !

I instal the default skin VerticalHover.zip in the same B.E site and the menu works well, but when I insert the doctype(to make a test)  the menu show the same problem :

http://www.businessedgepreview.com/fayencevacances/Default.aspx?tabid=124

I need of the doctype in my layout becase without it a table less layout do not work well.  I am with a big problem ! Plese help me john : ) !!

bye bye

John Mitchell
Posts:3471


03/10/2008 3:06 PM  
If you want, you can send me your skin and I'll try to spot the problem.
Reply directly to the notification from this post and attach your skin.
TiagoR
<20 Posts
Posts:18


03/10/2008 3:12 PM  

Hi John

Thank you very much again ! The skin are attached !

bye bye


Attachment: 1310125573954.zip

John Mitchell
Posts:3471


03/13/2008 8:50 PM  
Hi TiagoR,
I just wanted to let you know that I have been trying to figure this one out, but so far have not found an answer.
I haven't given up yet though.

It seems to be intermittent, sometimes the child menu hides itself and sometimes it doesn't, are you seeing the same thing?
TiagoR
<20 Posts
Posts:18


03/14/2008 5:27 AM  

Hi John

Yes ! This is the problem ! I see the same thing here !

bye

TiagoR
<20 Posts
Posts:18


03/14/2008 7:29 AM  

Hi John

If you have some Java script to use to solve this problem will be perfect . I  need to fix it as soon as possible.

Thank you !

bye bye

John Mitchell
Posts:3471


03/14/2008 7:46 AM  
Sorry, that menu is already using Javascript for IE. in the onMouseover events.
TiagoR
<20 Posts
Posts:18


03/19/2008 6:51 AM  

Hi John

Any update about this problem ?

bye

 

John Mitchell
Posts:3471


03/19/2008 12:32 PM  
Ok, I spent a lot of time trying to track this down and I have an update.

The problem is occurring because of the Box Model in IE. What is happening is the anchors and the list items are more or less overlapping because of the margin and padding in your CSS. If you mouse in and out from the left side of the menu it always works, but the problem comes in when moving the mouse over the items in a vertical motion.

I have found that it stops if you take the padding and margin out of the #nav a and if you add margin into the #nav li instead.


So your CSS will look like this:

#nav li {
position: relative;
float:left;
line-height : 1.4em;
width: 175px;
list-style: none;
margin:3px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;

}
#nav a {
font-size:1.1em;
display:block;
text-decoration:none;
font-weight:normal;
color:#ffdb47;
margin-left: 2px;
}
Please Register to post a reply. Another benefit of registration is the ability to subscribe to and recieve notifications of new posts.
Forums >Snapsis Product Support >CSS NavMenu > Vertical hover in I.E 7



ActiveForums 3.7
Powered by: Snapsis Software