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

Tags: , , , , , , , , , , , , , , , , , , , , , ,

 

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


Initial Email From:
Daniele
Initial Email Subject: Problem with web tabs text rotation
Support Case Month: June 2012

Hello, I've begun experimenting with Web Tabs Builder, and I have a problem with text rotation. I used one of the examples and only slightly changed the colors to build a page.
The text inside the leaves doesn't have the correct orientation though, despite the preview inside the software itself displaying correctly oriented text.

So what am I missing?

Thanks for your time, best regards.

Daniele

Reply From: Likno Customer Support

Dear Daniele,

Please try adding “display: block;” in the “text1” and “text2” classes:

.text1 {

     -moz-transform: rotate(-302deg);

     -ms-transform: rotate(-302deg);

     -webkit-transform: rotate(-302deg);

     -o-transform: rotate(-302deg);

     transform: rotate(-302deg);

     display: block;

}

.text2 {

     -moz-transform: rotate(-127deg);

     -ms-transform: rotate(-127deg);

     -webkit-transform: rotate(-127deg);

     -o-transform: rotate(-127deg);

     transform: rotate(-127deg);

     display: block;

}

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

Great, now the orientation is fine, although the text is not perfectly aligned, as it is instead in the preview.

Regards,
Daniele

Reply From: Likno Customer Support

Dear Daniele,

The exact alignment may differ a bit from browser to browser in such an advanced tab control.

This is due to the way each browser implements the CSS3 support for various features such as the text rotation.

If you view the project in IE9 then you should see it exactly like in the preview.

Also note that the result may look ugly in browsers that do not support CSS3 (such as IE8 or earlier).

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

Ok, thanks. Do these compatibility issues occur for all tabs created with the software, or only with the more sophisticated examples?
Thanks, regards.
Daniele

Reply From: Likno Customer Support

This would only affect the CSS3 examples (23, 24 & 25) which may differ from browser to browser and may not look good in browsers that do not support CSS3 (such as IE8 or older).

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

Ok, thanks a lot.
Regards,
Daniele

Tags: , , , , , , , , , , , , , , , , , , ,

 

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


Initial Email From:
Russell
Initial Email Subject: Sub menus alignment
Support Case Month: May 2012

Hi
The menu I have set up has the sub menus placed directly under the main menu and then directly under each other in the allwebmenus preview. When I upload it to the URL above, the sub menus space themselves out (about 1cm between each).
Please could you advise which settings will correct this:
Thanks
Russell

Reply From: Likno Customer Support

Dear Russell,

There is a CSS issue in your page that causes this problem. I found the following code in your “main.css”:

.gearbox-main-box-content-text table, th, td

{
     background-color:;
     height:50px;
     padding-top:5px;
     padding-left:10px;
     color: #000;
     font-family: Arial, Helvetica, sans-serif;
     font-size:14px;
     font-weight:400;
     line-height:16px;
}

The problem is with the selector which currently affects ALL <th> and <td> elements in your page.

To correct the problem you should change it from:

.gearbox-main-box-content-text table, th, td

To:

.gearbox-main-box-content-text table, .gearbox-main-box-content-text th, .gearbox-main-box-content-text td

 

Oh, and you may want to change the:

background-color:;

to:

background-color: transparent;

(assuming that this is what you want it to be and you did not delete a color by mistake)

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

Hi Kosta

Thanks, that’s a great help, I will remember to check the css next time I have any issues.

Thanks very much.

Regards

Russell

Tags: , , , , , , , , , , , , , , , , , ,

 

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


Initial Email From:
Steve
Initial Email Subject: Image Maps in WTB
Support Case Month: February 2012

I am trying to use WTB to create compact navigation for a web site. I wish to use single images which are the identical dimensions of the tab bodies and have mapped hyperlinks to different pages within the website.
Once each navigation tab system is complete, I would like to anchor each to a table row. I will surround the tabbed navigation with sliced graphics to give a clean integrated appearance. See link for graphical representation:
http://scottiedtv.com/index2.htm
I have compiled screen shots of the settings I've used in the project to make my issue as clear as possible in the above related URL.
What I am experiencing is both vertical and horizontal scroll bars after I embed the html code into the body source HTML code. I have adjusted the CSS body code in the styles editor; regardless of what I do the scroll bars appear.
I would greatly appreciate your help with this issue; I have been a long time customer of Likno.
Also, is there a way to have the tabs line up with both the left and right sides of the container? I've tried adjusting the margins, padding etc. and still have surplus space on the right side at the "page 10" tab.
Thank you!

Related URL: http://scottiedtv.com/wtb.htm

Reply From: Likno Customer Support

Hello,

Is it possible to export and send me your Tabs project along with any photos that you are using? It will be much faster than trying to troubleshoot this problem without it.

Please use the menu “Project -> Export -> To ZIP” to export the project and send it to me.

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

Hello Kostas,
I think I've resolved the scroll bar problem by properly defining the image/map with div tags and style declarations (please verify the code). Attached is the zipped project including assets. Also attached is a screen shot of the project, wherein I have included 2 questions specific to spacing issues.
Thanks for your help and quick reply.
Best,
Steve

Reply From: Likno Customer Support

Dear Steve,

You could change the tab header width and left/right margins so that the tab headers seem centered:

header css properties

This would also require the container width to change to 800 instead of 798.

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

Kostas,

  Thanks for the tabs alignment suggestion. For future projects, how do I calculate tab width relative to container size to assure proper centering? There seems to be automatic padding/spacing somewhere within the tabs header which I cannot seem to locate and adjust. Is it possible to assign a pixel distance value to the spacing between the tabs?

(1) Is the method I used to create vertical space between the tabs and the tabs body acceptable? Will the space cause any problems? Is the space between the tabs (horizontally) and between the tabs and tab body transparent - whereby a background table image will show through these areas of space?

(2) Is the image mapping code I've integrated acceptable? Although all seems right in the preview, I am not certain it will function display and identically in all browsers.

Thanks!
Steve

Reply From: Likno Customer Support

Dear Steve,

Well, the way to calculate this would be:

(header width+header spacing)*number of headers

Still, I did not calculate this, I just saw the remaining space and tried changing pixel by pixel (only took three trials) until I had a good result.

The spacing of the headers is controlled by the “margin” value (left and right).

Regarding the other questions:

1) Yes, this method is acceptable and you should not have issues. Another method to achieve the same thing would be to add a top margin to the Header Area CSS (this is probably a bit better). If you do not have a background set for the container, then it should be transparent.

2) Yes, the image map code you use is fully valid and I do not see a reason why it wouldn’t work in any browser.

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

Tags: , , , , , , , , , , , , , , , , , , , , ,

 

Hello! We have released a new version of Likno Web Scroller Builder: Version 1.0 build #114.

Check out What's New

- Added 58 new Navigation Bars to choose from!

scroller/slider navigation bars
- Added the "Page Format" feature to the Navigation Bar, which lets you use your own string to show the current page, such as "%current_page% of %total_pages%" (example "1 of 5").

scroller/slider navigation bar pages property

scroller/slider navigation bar pages
- Added "Positioning Offsets" to the Navigation Bar, so that you can achieve a desired distance from the selected corner (or side) when the Navigation Bar is placed inside the "Items Area".

scroller/slider navigation bar offsets property

scroller/slider navigation bar offsets

- Enhanced the library so that it better supports the "Fixed" option in the Width and Height properties, as well as better support all Navigation Bars/Bullets.

- Added minor interface enhancements.

- Changed all Examples to use the appropriate Navigation Bars/Bullets and offsets.

- Changed the "Horizontal" Examples to use "Auto" in their Height so that they render properly with the new library.

- Added support for external Navigation Buttons.

scroller/slider external navigation buttons

- Fixed an issue where the "Step by Item" feature did not work properly.

- Fixed the "Use both HTML & Image" feature for the "DIV" and "UL/LI" population methods (in Sample Code and Preview).

- Added the "Highlight" feature to the Preview, so that you can highlight and understand the different elements of the scroller.

- Fixed the vertical alignment of Bullets within a Navigation Bar.

- Fixed some Navigation Bar issues (positioning and size).

All features here: http://www.likno.com/jquery-scroller/index.php

Download the new version of our web scroller/slider builder at http://www.likno.com/jquery-scroller/download.php

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

 


© 2009-2013 Likno Blog – Drop-Down Menus, Javascript Menus, CSS Menus, jQuery Scrollers/Sliders, Modal Windows