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


Initial Email From:
Virginia
Initial Email Subject: AW Menus 5.3 build 896 Browser-specific problem
Support Case Month: September 2012

I just noticed that the top horizontal menu in my client site is no longer lining up properly for Safari. (The alignment was fine originally, years ago, but I don't know which update stopped keeping good alignment for Safari.)

When I use the Browser-specific option to change the Y-axis alignment  values, nothing happens to the menu alignment when I look at the menu in Safari. I can set the Y axis +100 pixels, or -10 pixels, and nothing happens.

The other browsers and their adjustments are fine.

Thanks,

Virginia

Reply From: Likno Customer Support

Dear Virginia,

I noticed that your menu is compiled with build 892 but the library files are from version 888. Can you please correct this and let me know so that I can have another look?

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: Virginia

Dear Kostas,
Good point.
I've uploaded the latest awm-Data directory, and I've tried editing the menu position for Safari again.
Still, the menu doesn't move in Safari whether I enter Y=-20 or Y=50.
And now the menu is not moving in Opera when I switch from Y=10 to Y=25.
Chrome, IE and Firefox are fine.
Thank you,
Virginia

Reply From: Likno Customer Support

Dear Virginia,

I do not recommend using the Browser-Specific offsets to achieve the correct positioning. This is a pretty old and outdates feature that should never be required if your Positioning settings are correct.

Please try removing ALL the browser-specific settings and changing your positioning to “Relative to Element” (“top-left” with 0 offsets).

Then go to your page and replace this:

<tr>
   <td align="left" bgcolor="#996699">
        <img src="
images/spc.gif" width="1" height="25" border="0" align="left">

        <style>
              .awmAnchor {position:relative}
        </style>

        <span id='awmAnchor-purplehorizontal' class='awmAnchor'>
        </span>
   </td>
</tr>

With this:

<tr>
   <td id='awmAnchor-purplehorizontal' align="left" bgcolor="#996699">
        <img src="
images/spc.gif" width="1" height="25" border="0" align="left">
   </td>
</tr>

This should fix the positioning in ALL browsers without the need for any browser-specific offsets.

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: Virginia

Dear Kostas,
I appreciate your help, but that didn't work. Since it's a large site, I've testing only on the first page of the site on my computer.

menu position relative to an element settings

With those settings and copying/pasting the exact table row edit you made, the menu looks good in Firefox, Opera, and Chrome.
Only Firefox and Opera look good with the original settings on the left. For Chrome, I had to do browser-specific.
The menu has completely disappeared in IE, and in Safari, it's sitting about 20 pixels above where it should be. Changing the safari browser-specific settings makes no difference.
What do you think is going on?
I'm sending you the zipped up index.html page and AWM directory.
Thank you for working with me on this. I've loved using All Web Menus for years!!
Regards,
Virginia

Reply From: Likno Customer Support

Hello again,

I checked your menu project and it seems that you have added browser-specific offsets both in the interface and in the advanced scripting!

menu relative to image

advanced scripting browser specific offsets

What you need to do for pixel-perfect positioning in all browsers is:

1) Remove ALL the browser-specific offsets shown above

2) Change your Positioning property to the following:

menu relative to element

3) In your page change this code:

<tr>
   <td align="left" bgcolor="#996699">
       <img src="
images/spc.gif" width="1" height="25" border="0" align="left">

       <style>
            .awmAnchor {position:relative}
       </style>

       <span id='awmAnchor-purplehorizontal' class='awmAnchor'>
       </span> 
   </td>
</tr>

With this:

<tr>
   <td id='awmAnchor-purplehorizontal' align="left" bgcolor="#996699">
        <img src="
images/spc.gif" width="1" height="25" border="0" align="left">
   </td>
</tr>

I tested the above and it works in every browser.

Note! I recall you said something about the menu not appearing in IE. If this occurs it means you did not correctly replace the HTML code and specifically that you did not remove the <span> so you ended up with two elements with the same ID (this is an error for IE).

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: Virginia

Hello Kostas!
Thank you so much. I've been using AWM on this site since 2005, and I had completely forgotten the scripting I used way back then.
You have been wonderfully helpful. After removing the scripting, I updated the rest of the browser-specific settings, and the test page now looks good in all browsers. Later today I'll update all of the pages in the site.
Thank you!
I've always been very happy with AWM as a tool for building any menus I need. And your service is wonderful. Feel free to quote me as a testimonial.
Regards,
Virginia

Reply From: Likno Customer Support

Thank you Virginia for your encouraging feedback.

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