All horizontal menus submenu positioning issue

[Doubledown]

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: Select all

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.

[Migru]

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

[Migru]

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

[vikenk]

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.

[Migru]

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

[vikenk]

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...

[vikenk]

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: Select all

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?

[Doubledown]

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!

[Migru]

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