Likno Blog – Drop-Down Menus, Javascript Menus, CSS Menus, jQuery Scrollers/Sliders, Modal Windows and more...

Knowledge Base support case for AllWebMenus,  abstracted and stripped of all user’s private info.

Initial Email From: Amber
Initial Email Subject: Vertical Menu Overlapping Content
Support Case Month: January 2013

Good morning

I've played with this for too long, cannot figure out what's going on.  The vertical menu here is overlapping content.  You see it on load, then the menu loads and it covers.  If I have a shorter page, the menu drops over the footer area as well.

What setting am I missing?

Thanks!

Reply From: Likno Customer Support

Hello,

You need to set the menu to change its container’s height:

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Amber

Thanks for the quick response, but this did not work.  I have cleared cache to be sure.  Are there any other settings that would affect this?

Reply From: Likno Customer Support

Dear Amber,

In order for this to work, you need to have a <div> as the Positioning Element. The <span> as an HTML element will not expand if it is given a specific height.

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Knowledge Base support case for AllWebMenus,  abstracted and stripped of all user’s private info.

Initial Email From: Steve
Initial Email Subject: Firefox menu vertical shift
Support Case Month: December 2012

I have a small problem. In fact, about 1 px small.
In Firefox, the menu I created shifts down by about 1 px. It displays fine in IE and Chrome and I've gone over all the sizes to make sure they 're right.
If you go to the website I list above and look closely, you can see that the actual menu which has about 120 px padding left and right, is sitting low in Firefox. I tried this on two different PCs with 2 different versions of Firefox and they both do the same thing. You can also see (if you look hard) that the highlighted menu item has about a 1 px margin at the top of the highlight (again, showing that the menu is shifting down by about 1 px.)
Any ideas what might cause this?
I can fudge it by adding 1 px to the menu bar background and no one would probably notice (except me). But, I rather not.
Thanks,
Steve

Reply From: Likno Customer Support

Dear Steve,

I checked your page and noticed that the <span> you use for positioning is 1px low in Firefox, hence the menu is lower too.

My suggestion is that you use the parent <div> for positioning and instead of adding a padding to move the menu, use its offsets:

<div id="navBar">&nbsp;</div>

Even better, you could just center the menu to the <div>:

Best Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Steve

You're good!

That did it.

Thanks,
Steve

Knowledge Base support case for Likno Web Tootips Builder, abstracted and stripped of all user’s private info.

Initial Email From: Jim
Initial Email Subject: Text spilling out of Tooltip
Support Case Month: August 2012

Top of the evening,
My name is Jim and I work for {COMPANY NAME REMOVED}. We are using Netobjects Fusion 12 and have selected the wtt example #4 "postit".
I have added the appropriate <br /> line breaks and reduced the font from 14px to 10px and they preview perfectly, even have room to spare! However once compiled and linked to the above referenced site I cant seem to keep the text from spilling out of the tool tip. I reviewed the knowledge base and noticed the !important line re; spacing padding etc and cant find any reference to remove in my html source. Additionally I am linking the tip form a single word in my text with a span tag.
I would greatly appreciate any assistance, Thank You in advance for your consideration.

Best,
Jim
Related URL: http://pestsdoneright.com

P.S. Further to the above referenced support inquiry; the tooltips seem to work well in the latest version of google chrome, somewhat on an android and like previously stated not in IE 9... Anxiously awaiting your reply !

Reply From: Likno Customer Support

Hello Jim,

I believe this has something to do with the CSS rules used in your website CSS (since the preview works fine in our application, which is not affected by any specific website CSS). Did you try removing any lines from your website's CSS to see which one may interfere?

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Jim

Hello,

I appreciate the reply. I am linking the tip from a span tag, however the tips work reasonably well, in Chrome, Firefox and Safari. The aforementioned browsers do display the wrong font size and family but I can tolerate that.
What is unfortunate is the way they display in IE 9. And yes they do preview well in your application. I understand different browsers react differently as not all my actions work in Firefox or Chrome especially pages with multiple actions. But IE 9 is widely installed and my customer really desires the post it tips, plus I think they are cool too!!!

In the interim I have reduced the padding from 25px to 15px and it has made it a lot more palatable. However Internet Explorer 9 still displays the tooltips much more poorly than either Firefox or Chrome. And as stated IE 9 has a large install base. Till then, and thanks

Best,
Jim

Reply From: Likno Customer Support

Dear Jim,

First of all, most of the problems in IE occur because your page does not have a proper DOCTYPE. When a page does not have a proper DOCTYPE, IE9 automatically goes into IE5.5 compatibility mode and this can mess up several things regarding paddings in your page.

Please change the two first lines in your page:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

Into this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

This will make IE work exactly the same as all other browsers.

Then there is the CSS issue that affects the font size. This is caused by your “style.css” and specifically from the following lines (45-48):

P {

                font-family: Arial,  Helvetica,  Geneva,  Sans-serif;

                font-size : 14px;

                color : rgb(51,51,51)}

This rule applies to ALL paragraphs including those of the tooltip. I strongly recommend removing this. Let me know if you still see any problems after fixing these two issues.

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Jim

Dear Kostas,

Thank you ever so much for your reply! I am in the process of relocating, and to that end will not be able to make the recommended changes until mid next week. However your thoughtful reply makes sense and once I have a chair and desk in place they will be made! While they are not are works of art, pestsdoneright.com and weedsdoneright.com represent what {COMPANY NAME REMOVED}, LLC wanted and your products once successfully deployed will only make the above referenced sites more interactive and appealing to their target markets.

Please thank Aris for me as well. Likno Modal Windows are next, wish me luck!!!

Jim

Reply From: Likno Customer Support

Dear Jim,

Thank you for your good words. I have forwarded your compliments to Aris as well.

Let me know if you find any problems when you try this next week.

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Knowledge Base support case for AllWebMenus, abstracted and stripped of all user’s private info.

Initial Email From: Angela
Initial Email Subject: Menu not appearing the same online as in my preview pane
Support Case Month: September 2012

I am having several problems with a current menu creation.

1. Menu positioning is supposed to show center on the web site so I set it up to Top Side Center for both the "Element Anchor" and the "Menu Anchor". I am currently using it as a Relative to an Element positioning. I tried setting it to Top Side Center for "Element Anchor" and Center for "Menu Anchor" and vice versa and Center for both to no avail.

2. The Sub Groups Style (Our Products) is supposed to show with rounded corners all 4 sides. It displays properly in Chrome & Safari but not in IE9 and Firefox.

3. The Sub Groups Style is also supposed to have a background image showing in the top right hand corner of each menu using the "Has Header" feature.

All of these show properly inside the AllWebMenus Preview but not online. Thank you in advance for any help!

Related URL: http://review.shakertree.com

Reply From: Likno Customer Support

Hello,

1) This happens because the width of your <span> is very small and it is left-aligned into the parent <div>. See the screenshot where I highlighted it:

To fix this problem, in the Element Positioning you should use the ID of the <div> instead:

2) I believe that this is due to using server-side menus. I will need to forward this to our developers for further consideration.

3) Same as (2).

Can you please export and send me your menu project so that I can forward it to our developers for further testing?

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Likno Customer Support

Hello again,

I just got a reply from our developers and it seems that there is no problem at all in our libraries!

It seems that you simply have old library files online… Can you please recompile your menu and make sure that you also upload the new library files?

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Angela

Hi Kostas,

The library files we had uploaded were correct from our current build but then we noticed that we weren’t on the current version so we downloaded version 5.3.898 and rebuilt the menu and uploaded all files.  This update fixed the menu to show the Sub Group Style (Our Products) with rounded corners on all 4 sides in all the necessary browsers (IE9, Firefox, Chrome & Safari)!  However, it is still not showing

the Sub Group Styles background image that should be showing in the top right hand corner of each menu using the "Has Header" feature.

Can you please take another look and let me know why this isn’t showing online but it’s showing in the AllWebMenus Preview?  I have also attached the updated menu in an exported .zip file again.

Thanks,

Angela

Reply From: Likno Customer Support

Dear Angela,

Are you sure you still see the problem? Did you delete your “cache files”? I am asking because I visited your page again and I now see it working for both Firefox and IE:

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Knowledge Base support case for AllWebMenus, abstracted and stripped of all user’s private info.

Initial Email From: Ruth
Initial Email Subject: inking to element in Microsoft Expression
Support Case Month: September 2012

I cannot get my menu to attach to a table.  It just doesn't show up.  What I have on the web page is the menu attached relative to window, so it doesn't always appear in the same place in different browsers.

Reply From: Likno Customer Support

Hello,

I see that your positioning code is not for a table but for a <span> in an <a> tag.

Please replace this:

    <tr>
     <p class="style98">
        <span id='awmAnchor-nms_menu'>&nbsp;</span>
     </p>
  </tr>

With this:

   <tr>
         <td id='awmAnchor-nms_menu'>&nbsp;</td>
   </tr>

Also I noticed that you have set a “browser-specific offset” for IE. Please remove this in order for the menu to appear in the same place in all browsers.

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Ruth

As you can tell, I'm not very good at this and just learning.  Should I have the positioning linked to the window or an element, because now I don't get a menu at all.  I have not copied it over to the server yet.

Ruth

Reply From: Likno Customer Support

Dear Ruth,

The positioning should be set to “Relative to Element”.

Did you correctly replace the HTML code in your page?

Can you please send me:

1) The project file (use the menu “File -> Export -> To zip”)

2) The HTML page so that I can see the code you entered.

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Ruth

The menu shows up fine in Internet Explorer, but when I go to other browsers, it's in the middle of the heading. 

Thanks so much for your help and patience with me.

Ruth

Reply From: Likno Customer Support

Dear Ruth,

Are you talking about the online page or the local one?

If you are talking about the local page, then you’ll have to send this to me also (as I asked in my previous email) in order to see what’s wrong.

The online page on the other hand, does not display a menu at  all now (in any browser)! Did you change something else?

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter

Reply From: Ruth

This is the link to our web page from yesterday that I had already sent you just so the menu would be back on the page.  This menu does not appear in the same place on different browsers.  So far, it only appears in Internet Explorer.  I would like to continue using this program, but if I don't find out what I'm doing wrong we won't be renewing at the end of this year.  Again I apologize for being a beginner with this program.

Reply From: Likno Customer Support

Dear Ruth,

I checked your page again, and I see that the old menu is back, which is visible by all browsers but the positioning is different in IE due to the “Browser-Specific Offsets” you have for IE.

Since the Element Positioning confuses you, maybe you should keep your current settings, but try removing the “Browser-Specific Offsets” and instead fine-tune the positioning through the standard offsets (x,y) that appear in the Positioning form.

Regards,
Kostas
Likno Customer Support
www.likno.com
Create any type of javascript menu (CSS menu, drop-down menu, sliding menu), button, html tree, modal window, tooltip, accordion, tab, scroller, jQuery slider or design for your websites!
Like us on Facebook – Follow us on Twitter