All horizontal menus submenu positioning issue

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:11

All horizontal menus submenu positioning issue

Poster: Doubledown
Dated: Thursday March 16 2006 - 0:20:08 GMT

Hi there, i'm attempting to create a menu that uses all horizontal menus. I'm using all images in it as well. AND I am using relative positioning for it. My problem is that when I have the submenu set so that it appears in the correct position at 1600x1200 resolution, it is in the incorrect position at 1024x768. Here is a link to a sample - http://knights.aumenta.net/redesign . In case you're wondering, the "correct position" should be underneath the "Explore Knightsbridge" button (that is the always visible menu that is being relatively positioned), in the whitespace.

I have already tried using a left offset for the submenu. When I set it to the correct placement (left="offset=-468";), it was perfect at 1600x1200, but off to the very left in the brown area at 1024x768. So now I am using a right-to-left openstyle, with the same results. I also tried adding itemwidths for each submenu image, to no avail. Here is my code for the menu data file:

Code:

fixMozillaZIndex=true; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=0;
_subOffsetLeft=0;




with(menuStyle=new mm_style()){
bordercolor="#296488";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#DCE9F0";
offcolor="#515151";
onbgcolor="#4F8EB6";
oncolor="#ffffff";
padding=0;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#2D729D";
separatorsize=0;
}

with(submenuStyle=new mm_style()){
bordercolor="#296488";
borderstyle="solid";
borderwidth=0;
fontfamily="Verdana, Tahoma, Arial";
fontsize="75%";
fontstyle="normal";
headerbgcolor="#ffffff";
headercolor="#000000";
offbgcolor="#FFFFFF";
offcolor="#515151";
onbgcolor="#FFFFFF";
oncolor="#ffffff";
outfilter="Fade(duration=0.5)";
overfilter="Fade(duration=0.5);Alpha(opacity=100)";
padding=0;
pagebgcolor="#82B6D7";
pagecolor="black";
separatorcolor="#2D729D";
separatorsize=0;
}

with(milonic=new menuname("Menu")){
orientation="horizontal";
openstyle="rtl";
style=submenuStyle;
aI("image=images/nav_splashabout1.jpg;pageimage=images/nav_splashabout3.jpg;overimage=images/nav_splashabout2.jpg;url=about_us.html;itemwidth=88;");
aI("image=images/nav_awards1.jpg;pageimage=images/nav_awards3.jpg;overimage=images/nav_awards2.jpg;url=our_awards.html;itemwidth=103;");
aI("image=images/nav_news1.jpg;pageimage=images/nav_news3.jpg;overimage=images/nav_news2.jpg;url=latest_news.html;itemwidth=106;");
aI("image=images/nav_wherebuild1.jpg;pageimage=images/nav_wherebuild3.jpg;overimage=images/nav_wherebuild2.jpg;url=#;itemwidth=127;");
aI("image=images/nav_gallery1.jpg;pageimage=images/nav_gallery3.jpg;overimage=images/nav_gallery2.jpg;url=#;itemwidth=115;");
aI("image=images/nav_contact1.jpg;pageimage=images/nav_contact3.jpg;overimage=images/nav_contact2.jpg;url=contact_us.html;itemwidth=103;");
}

drawMenus();

Strangely enough, when I changed the submenu from a horizontal orientation to a vertical one, the positioning discrepancies between resolutions disappeared.

Anyway, if anyone can PLEASE help me out, it would be much appreciated.

Thanks.

Poster: Migru
Dated: Thursday March 16 2006 - 7:54:49 GMT

Hi

its even worse in 1024x1280........ (vertical)
did you try if it works, when the body margins are set to zero, before everything starts?
(and then the offset)

Michael

Poster: Migru
Dated: Thursday March 16 2006 - 9:46:01 GMT

Hi

no, just checked your css, body-margins are set to Zero.
Try something else:

screenposition="center";
and then the left offset.

test it by //commenting out the openstyle property

Michael

Poster: vikenk
Dated: Thursday March 16 2006 - 14:36:51 GMT

On a speratate note: If you're trying to build a site to optimize at a 1200x1600 resolution, you're going to have lots of problems.

Most people will advise that you design for an 800x600 resolution (to be ultra safe), but designing for a resolution higher than 1024x768 is not recommened. Generally, the site will not conform well to smaller resolutions and result in either 1) hidden data because it is off screen, or 2) lots of frustration from your users who have to scroll side-to-side a lot.

I'm not sure what application you're designing this for, i.e. you may have a specific purpose for designing at 1600x1200.

Just my two cents. You may save yourself a lot of frustration in the future.

Poster: Migru
Dated: Thursday March 16 2006 - 14:49:42 GMT

Hi Viken

no - if you have a closer look at it, its not really built for 1200x1600, but I have my problems when I´m looking at the table and the way it is built.
Actually don´t have the time to go into details. Maybe you have ? The css too could have some clashes with the menu styles.

Michael

Poster: vikenk
Dated: Thursday March 16 2006 - 18:46:58 GMT

I can't really find anything legitimately wrong with it, except that there's only a partial doctype declared, and the nested table design can be a bit confusing, but the code is correct and the menu is correct, it seems.

In my experience, IE will act buggy with block-type elements (div's, tables, etc) unless a full doctype is declared (partial doctypes won't do), forcing it in to "Standards Compliant Mode". Is this problem happening in all browsers or just in IE? Also, I can't get my screen to 1200x1600 right now, but it looks fine to me at 1024x768 and 800x600. Perhaps it's fixed?

Try the full doctype. That's all I can see now. Let us know...

Poster: vikenk
Dated: Thursday March 16 2006 - 18:50:24 GMT

After I posted, I checked something else out. I ran the site through the W3C.org validator and it came up with many errors (most were due to the "alt" value not being used for images) but only one could impact the table design. It's pasted below:

Code:

Error Line 22 column 47: start tag for "TR" omitted, but its declaration does not permit this.
              <td align="right" valign="bottom"> <script>

Maybe the missing <tr> tag is contributing to the problem?

Poster: Doubledown
Dated: Thursday March 16 2006 - 19:31:00 GMT

Hey you two, thanks for the replies. Just to clarify vikenk, I am definitely not trying to optimize specifically for for 1600x1200, i'm optimizing for 1024x768... I would just like for it to line up properly at various resolutions that different users may be viewing it at. Anyways, it looks like removing the rtl openstyle property and adding the center screenposition did the trick. After I offset it left from there, I was able to line it up, and now it seems to be appearing properly at the resolutions that i've checked.

Thanks again!

Poster: Migru
Dated: Thursday March 16 2006 - 20:18:16 GMT

Hi

thanks for your feedback.
My problem was, when I made those suggestions,
(screenpsoition, offset and //commenting out the openstyle) I was unable to check if it really works, because I could not reproduce properly the environment of your page. Sometimes I´m doing that, getting things locally run for further checks, but as I said, not so in this case.)
The screenposition provides the correct information to the menu, so that the offset works for different resolutions. (Don´t know details of the code, but it must be like that).

Michael

Industrial Strength JavaScript and DHTML Menus

All horizontal menus submenu positioning issue