Browser Inconsistencies

Having problems with DHTML Menu? There is usually somebody here who knows the answer.
Post Reply
User avatar
Ptolami
Beginner
Beginner
Posts: 8
Joined: Sun Oct 14, 2007 9:52 am

Browser Inconsistencies

Post by Ptolami »

Hi All. Hope this falls on ears/eyes more experienced than mine own.

Test site is up at
http://triz.co.uk/test/index.htm

I am building a horizontal menu using the latest version of the menu system. I have made several tweaks and changes and it works exactly as expected in firefox 1.5 but less well in other browsers as per the following list. Any help with these would be much appreciated.

Firefox (1.5) - Perfect
Safari (3.0.3) - Perfect
Internet Explorer (6.0 & 7.057) - Menu doesn't appear at all.
Opera (9.23) - Horizontal appears but sub menus are offset to the right by ((window width - page width) / 2)

(I've not tested this on any Mac systems but if anyone can then feedback would again be much appreciated.)

Ptolami :)

My menu data script follows.

*******************
Menu_data.js
*******************

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

with(menuStyle=new mm_style()){

padding=0;
position="relative";
fontfamily=" Arial,Verdana, Tahoma";
fontsize="10";
fontweight="bold"
rawcss="font-variant:small-caps";
screenposition="center";
headerbgcolor="#ffffff";
headercolor="#000000";
bgimage="images/menu_bg.gif"
overbgimage="images/menu_bg_over.gif"
offcolor="#000000";
align="center"
top="offset=-5";
separatorimage="images/separator.gif";
subimage="images/submenu.gif";
itemwidth=107;
subimagepadding=2;
separatorsize=3;
itemheight=28;
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
left=6;
top=134;
orientation="horizontal";
style=menuStyle;
separatorimage="images/separator.png";
aI("text=HOME;url=http://www.google.com/;bgimage=images/m ... g_over.gif;");
aI("text=OXFORD CREATIVITY;url=http://www.google.com/;");
aI("showmenu=Milonic;text=TRIZ;");
aI("showmenu=Partners;text=WORKSHOPS;");
aI("showmenu=Links;text=ARTICLES;");
aI("showmenu=MyMilonic;text=COMPETITION;");
aI("showmenu=Partners;text=BOOKING;");
aI("showmenu=Links;text=SUBSCRIBE;");
aI("showmenu=MyMilonic;text=CONTACT;bgimage=images/menu_rc_bg.gif;overbgimage=images/menu_rc_bg_over.gif;");
}

with(milonic=new menuname("Samples")){
overflow="hidden";
style=menuStyle;
aI("text=Plain ;url=http://www.milonic.com/menusample1.php;separatorsize=1")
aI("text=Vertical ;url=http://www.milonic.com/menusample2.php;separatorsize=1")
aI("text=All Horizontal ;url=http://www.milonic.com/menusample25.php;separatorsize=1")
aI("text=Using The Popup;url=http://www.milonic.com/menusample24.php;separatorsize=1")
aI("text=Classic XP;url=http://www.milonic.com/menusample82.php;separatorsize=1")
aI("text=XP Style;url=http://www.milonic.com/menusample86.php;separatorsize=1")
aI("text=XP Taskbar Style ;url=http://www.milonic.com/menusample83.php;separatorsize=1")
aI("text=Office XP;url=http://www.milonic.com/menusample47.php;separatorsize=1")
aI("text=Office 2003;url=http://www.milonic.com/menusample46.php;separatorsize=1")
aI("text=Apple Mac ;url=http://www.milonic.com/menusample72.php;separatorsize=1")
aI("text=Amazon Style Tab;url=http://www.milonic.com/menusample74.php;separatorsize=1")



}

with(milonic=new menuname("Milonic")){
style=menuStyle;
//top=135;
top="offset=1";
aI("text=Products;url=http://www.milonic.com/cbuy.php;separatorsize=1;");
aI("text=Contact Us;url=http://www.milonic.com/contactus.php;separatorsize=1");
aI("text=Newsletter ;url=http://www.milonic.com/newsletter.php;separatorsize=1");
aI("text=FAQ;url=http://www.milonic.com/menufaq.php;separatorsize=1");
aI("text=Discussion Forum;url=;separatorsize=1");
aI("text=Software;url=http://www.milonic.com/license.php;separatorsize=1");
aI("text=Privacy Policy;url=http://www.milonic.com/privacy.php;separatorsize=1");
aI("text=Plain ;url=http://www.milonic.com/menusample1.php;separatorsize=1")
aI("text=Vertical ;url=http://www.milonic.com/menusample2.php;separatorsize=1")
aI("text=All Horizontal ;url=http://www.milonic.com/menusample25.php;separatorsize=1")
aI("text=Using The Popup;url=http://www.milonic.com/menusample24.php;separatorsize=1")
aI("text=Classic XP;url=http://www.milonic.com/menusample82.php;separatorsize=1")
aI("text=XP Style;url=http://www.milonic.com/menusample86.php;separatorsize=1")
aI("text=XP Taskbar Style ;url=http://www.milonic.com/menusample83.php;separatorsize=1")
aI("text=Office XP;url=http://www.milonic.com/menusample47.php;separatorsize=1")
aI("text=Office 2003;url=http://www.milonic.com/menusample46.php;separatorsize=1")
aI("text=Apple Mac ;url=http://www.milonic.com/menusample72.php;separatorsize=1")
aI("text=Amazon Style Tab;url=http://www.milonic.com/menusample74.php;separatorsize=1")
}

with(milonic=new menuname("Partners")){
style=menuStyle;
top="offset=1";
separatorsize=1;
aI("text=(aq) Web Hosting;url=http://www.a-q.co.uk/;separatorsize=1");
aI("text=WebSmith;url=http://www.softidiom.com/?milonicmenu;separatorsize=1");
aI("text=SMS 2 Email;url=http://www.sms2email.com/;separatorsize=1");
aI("text=Plain ;url=http://www.milonic.com/menusample1.php;separatorsize=1")
aI("text=Vertical ;url=http://www.milonic.com/menusample2.php;separatorsize=1")
aI("text=All Horizontal ;url=http://www.milonic.com/menusample25.php;separatorsize=1")
aI("text=Using The Popup;url=http://www.milonic.com/menusample24.php;separatorsize=1")
aI("text=Classic XP;url=http://www.milonic.com/menusample82.php;separatorsize=1")
aI("text=XP Style;url=http://www.milonic.com/menusample86.php;separatorsize=1")
aI("text=XP Taskbar Style ;url=http://www.milonic.com/menusample83.php;separatorsize=1")
aI("text=Office XP;url=http://www.milonic.com/menusample47.php;separatorsize=1")
aI("text=Office 2003;url=http://www.milonic.com/menusample46.php;separatorsize=1")
aI("text=Apple Mac ;url=http://www.milonic.com/menusample72.php;separatorsize=1")
aI("text=Amazon Style Tab;url=http://www.milonic.com/menusample74.php;separatorsize=1")
}

with(milonic=new menuname("Links")){
style=menuStyle;
top="offset=1";
aI("text=Apache Web Server;url=http://www.apache.org/;separatorsize=1");
aI("text=MySQL;url=http://ww.mysql.com/;separatorsize=1");
aI("text=PHP;url=http://www.php.net/;separatorsize=1");
aI("text=phpBB Web ;url=http://www.phpbb.net/;separatorsize=1");
aI("showmenu=Anti Spam;text=Anti Spam Tools;separatorsize=1");
}

with(milonic=new menuname("Anti Spam")){
style=menuStyle;
top="offset=1";
aI("text=Spam Cop;url=http://www.spamcop.net/;separatorsize=1");
aI("text=Mime Defang;url=http://www.mimedefang.org/;separatorsize=1");
aI("text=Spam Assassin;url=http://www.spamassassin.org/;separatorsize=1");
}

with(milonic=new menuname("MyMilonic")){
style=menuStyle;
top="offset=1";
aI("text=Login;url=http://www.milonic.com/login.php;separatorsize=1");
aI("text=Licenses;url=http://www.milonic.com/mylicenses.php;separatorsize=1");
aI("text=Invoices;url=http://www.milonic.com/myinvoices.php;separatorsize=1");
aI("text=Make ;url=http://www.milonic.com/reqsupport.php;separatorsize=1");
aI("text=View ;url=http://www.milonic.com/mysupport.php;separatorsize=1");
aI("text=Your Details;url=http://www.milonic.com/mydetails.php;separatorsize=1");
}

drawMenus();
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Re: Browser Inconsistencies

Post by Ruth »

Hi,

You have a number of errors in your file.

1. top="offset=-5"; is not a style property
2. position="relative"; is not a style property
3. I take it you want the menu in a table. you have done that incorrectly.

So, remove that top="offset stuff from the style, remove the position relative stuff down to the main menu and eliminate the top left in that menu.

Add buildAfterLoad=true; up at the top with the subOffset stuff and then move all the calls for the files into where you have the menu_data call.

Do you want that menu to sit on top of the bottom image called menuheader.jpg? If so you will have to make it a background image, not just an image. If you want it to sit above it then that's fine as it is, but if you want it on top of it, you'll have to make that change. At the top of this forum is a post about putting the menu in a table or relatively positioning it. It has a sample of how to do that.

Ruth
User avatar
Ptolami
Beginner
Beginner
Posts: 8
Joined: Sun Oct 14, 2007 9:52 am

Re: Browser Inconsistencies

Post by Ptolami »

Thanks Ruth I have followed your instructions (I think).

All browsers are now showing pretty much that same thing and the dropdowns seem to work quite well in each of those I am targeting, however...

IE Shows a larger gap between the main menu and the vertical drop downs, than other browsers.
All browsers have a messed up opaque background to the dropdowns, whereas before the separation was perfectly transparent (even over flash beneath).

I think the menu is doubling up ie there are 2 copies of it overlaying?
Not sure how this is happening.

Thanks again, If you can help me iron out these kinks I will be forever in your debt.

Cheers

Px
User avatar
Ptolami
Beginner
Beginner
Posts: 8
Joined: Sun Oct 14, 2007 9:52 am

Re: Browser Inconsistencies

Post by Ptolami »

Please help me.

I have updated the test site (link in original post). I cannot work out how I have what seems to be a duplicate menu. I think it isw overlaying the first but I cannot discern why. Pretty sure it will ba a problem wit a single line of code...somewhere?

Px
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Re: Browser Inconsistencies

Post by Ruth »

Hi,

No, it's the same menu. What's happening is that you are seeing a quick flash of the text before the bgimages show up. You might try the preloading image module. The first one on the bolton modules page

http://www.milonic.com/menumodules.php

Ruth
User avatar
Ptolami
Beginner
Beginner
Posts: 8
Joined: Sun Oct 14, 2007 9:52 am

Re: Browser Inconsistencies

Post by Ptolami »

Thanks again Ruth. Sorry for being so impatient.

I'm not sure you're fully seeing the problem.
I have uploaded images that illustrate the issue. The left image shows the menu as it currently is (since browser fixes). THe right images shows the menu as it used to be and should be (btu which has browser problems).

You can see the separation space between vertical items is spoilt as id something exists behind the menu. It is not a flash of something as the images load but a permanent problem.

The separation area that should be transparent is yellow in some cases and black in others. This is one reason I think it is a duplicate of the menu residing underneath the main one. The other reason is that at the extreme left and right of the vertical dropdown there are varying indentations indicating a vertical offset of the duplicate.

Thanks again if you can see where I'm going wrong.

Px

My new "fixed" menu_data.js follows as does my index.htm

*************
menu_data.js

fixMozillaZIndex=true; //Fixes Z-Index problem with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=150;
_menuOpenDelay=0;
_subOffsetTop=6;
_subOffsetLeft=0;
//buildAfterLoad=true; //makes opera better bu ffox worse
buildAfterLoad=true;

with(menuStyle=new mm_style()){

padding=0;
//position="relative";
fontfamily=" Arial,Verdana, Tahoma";
fontsize="10";

rawcss="font-variant:small-caps";
fontweight="bold"
screenposition="center";
headerbgcolor="#ffffff";
headercolor="#000000";
bgimage="images/menu_bg.gif"
overbgimage="images/menu_bg_over.gif"
offcolor="#000000";
align="center"
//top="offset=-5";
separatorimage="images/separator.gif";
subimage="images/submenu.gif";
itemwidth=107;
subimagepadding=2;
separatorsize=3;
itemheight=28;
}

with(milonic=new menuname("Samples")){
overflow="hidden";
style=menuStyle;
aI("text=Plain ;url=http://www.milonic.com/menusample1.php;separatorsize=1")
aI("text=Vertical ;url=http://www.milonic.com/menusample2.php;separatorsize=1")
aI("text=All Horizontal ;url=http://www.milonic.com/menusample25.php;separatorsize=1")
aI("text=Using The Popup;url=http://www.milonic.com/menusample24.php;separatorsize=1")
aI("text=Classic XP;url=http://www.milonic.com/menusample82.php;separatorsize=1")
aI("text=XP Style;url=http://www.milonic.com/menusample86.php;separatorsize=1")
aI("text=XP Taskbar Style ;url=http://www.milonic.com/menusample83.php;separatorsize=1")
aI("text=Office XP;url=http://www.milonic.com/menusample47.php;separatorsize=1")
aI("text=Office 2003;url=http://www.milonic.com/menusample46.php;separatorsize=1")
aI("text=Apple Mac ;url=http://www.milonic.com/menusample72.php;separatorsize=1")
aI("text=Amazon Style Tab;url=http://www.milonic.com/menusample74.php;separatorsize=1")
//drawMenus();



}

with(milonic=new menuname("Milonic")){
style=menuStyle;
//top=135;
top="offset=1";
aI("text=Products;url=http://www.milonic.com/cbuy.php;separatorsize=1;");
aI("text=Contact Us;url=http://www.milonic.com/contactus.php;separatorsize=1");
aI("text=Newsletter ;url=http://www.milonic.com/newsletter.php;separatorsize=1");
aI("text=FAQ;url=http://www.milonic.com/menufaq.php;separatorsize=1");
aI("text=Discussion Forum;url=;separatorsize=1");
aI("text=Software;url=http://www.milonic.com/license.php;separatorsize=1");
aI("text=Privacy Policy;url=http://www.milonic.com/privacy.php;separatorsize=1");
aI("text=Plain ;url=http://www.milonic.com/menusample1.php;separatorsize=1")
aI("text=Vertical ;url=http://www.milonic.com/menusample2.php;separatorsize=1")
aI("text=All Horizontal ;url=http://www.milonic.com/menusample25.php;separatorsize=1")
aI("text=Using The Popup;url=http://www.milonic.com/menusample24.php;separatorsize=1")
aI("text=Classic XP;url=http://www.milonic.com/menusample82.php;separatorsize=1")
aI("text=XP Style;url=http://www.milonic.com/menusample86.php;separatorsize=1")
aI("text=XP Taskbar Style ;url=http://www.milonic.com/menusample83.php;separatorsize=1")
aI("text=Office XP;url=http://www.milonic.com/menusample47.php;separatorsize=1")
aI("text=Office 2003;url=http://www.milonic.com/menusample46.php;separatorsize=1")
aI("text=Apple Mac ;url=http://www.milonic.com/menusample72.php;separatorsize=1")
aI("text=Amazon Style Tab;url=http://www.milonic.com/menusample74.php;separatorsize=1")
//drawMenus();
}

with(milonic=new menuname("Partners")){
style=menuStyle;
top="offset=1";
separatorsize=1;
aI("text=(aq) Web Hosting;url=http://www.a-q.co.uk/;separatorsize=1");
aI("text=WebSmith;url=http://www.softidiom.com/?milonicmenu;separatorsize=1");
aI("text=SMS 2 Email;url=http://www.sms2email.com/;separatorsize=1");
aI("text=Plain ;url=http://www.milonic.com/menusample1.php;separatorsize=1")
aI("text=Vertical ;url=http://www.milonic.com/menusample2.php;separatorsize=1")
aI("text=All Horizontal ;url=http://www.milonic.com/menusample25.php;separatorsize=1")
aI("text=Using The Popup;url=http://www.milonic.com/menusample24.php;separatorsize=1")
aI("text=Classic XP;url=http://www.milonic.com/menusample82.php;separatorsize=1")
aI("text=XP Style;url=http://www.milonic.com/menusample86.php;separatorsize=1")
aI("text=XP Taskbar Style ;url=http://www.milonic.com/menusample83.php;separatorsize=1")
aI("text=Office XP;url=http://www.milonic.com/menusample47.php;separatorsize=1")
aI("text=Office 2003;url=http://www.milonic.com/menusample46.php;separatorsize=1")
aI("text=Apple Mac ;url=http://www.milonic.com/menusample72.php;separatorsize=1")
aI("text=Amazon Style Tab;url=http://www.milonic.com/menusample74.php;separatorsize=1")
//drawMenus();
}

with(milonic=new menuname("Links")){
style=menuStyle;
top="offset=1";
aI("text=Apache Web Server;url=http://www.apache.org/;separatorsize=1");
aI("text=MySQL;url=http://ww.mysql.com/;separatorsize=1");
aI("text=PHP;url=http://www.php.net/;separatorsize=1");
aI("text=phpBB Web ;url=http://www.phpbb.net/;separatorsize=1");
aI("showmenu=Anti Spam;text=Anti Spam Tools;separatorsize=1");
//drawMenus();
}

with(milonic=new menuname("Anti Spam")){
style=menuStyle;
top="offset=1";
aI("text=Spam Cop;url=http://www.spamcop.net/;separatorsize=1");
aI("text=Mime Defang;url=http://www.mimedefang.org/;separatorsize=1");
aI("text=Spam Assassin;url=http://www.spamassassin.org/;separatorsize=1");
//drawMenus();
}

with(milonic=new menuname("MyMilonic")){
style=menuStyle;
top="offset=1";
aI("text=Login;url=http://www.milonic.com/login.php;separatorsize=1");
aI("text=Licenses;url=http://www.milonic.com/mylicenses.php;separatorsize=1");
aI("text=Invoices;url=http://www.milonic.com/myinvoices.php;separatorsize=1");
aI("text=Make ;url=http://www.milonic.com/reqsupport.php;separatorsize=1");
aI("text=View ;url=http://www.milonic.com/mysupport.php;separatorsize=1");
aI("text=Your Details;url=http://www.milonic.com/mydetails.php;separatorsize=1");
drawMenus();
}

**************
index.htm


<!-- saved from url=(0014)about:internet -->
<html>
<head>
<title>Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
BODY{
FONT-FAMILY:verdana;
font-size:12px;
background-color:#FFFFFF;
}

.backG {
FONT-FAMILY:verdana;
background-color:#93c39b;
color:#ffffff;
border-bottom:#538c4d 2px solid;
font-size:12px;
}
td.form1
{
FONT-FAMILY:verdana;
background:#eaeaea;
font-size:12px;
}
</style>
<link href="scripts/triz2.css" rel="stylesheet" type="text/css">
</head>

<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<SCRIPT type="text/javascript" src="scripts/milonic_src.js"></SCRIPT>

<!--<noscript><a href="http://www.milonic.com/">DHTML Menu JavaScript Menu Powered by Milonic</a></noscript> -->
<script type="text/javascript">
<!--
if(ns4)_d.write("<SCR"+"IPT LANGUAGE=JavaScript SRC=scripts/mmenuns4.js><\/SCR"+"IPT>");
else _d.write("<SCR"+"IPT LANGUAGE=JavaScript SRC=scripts/mmenudom.js><\/SCR"+"IPT>");
-->
</SCRIPT>

<SCRIPT type="text/javascript" src="scripts/menu_data.js"></SCRIPT>
<table width="1000" border="0" CELLPADDING="0" CELLSPACING="0" align="center">
</table>
<table width="930" border="0" CELLPADDING="0" CELLSPACING="0" align="center">
<tr>
<td>
<DIV style="position: relative; padding: 0px; height: 100%">
<table width="100%" height="302" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="120" align="center" valign="top">
<table width="1000" height="677" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="677" align="left" valign="top">

<table width="1000" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="19" colspan="3" align="left" valign="top"><p><img src="images/header.jpg" width="1000" height="128"/></td>
</tr>
<tr>
<td height="55" colspan="3" align="left" valign="top" background="images/menuheader.jpg" >

<table width="1000" height="41" border="0">
<tr>
<td align="center">
<SCRIPT TYPE="text/javascript">
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
//left=6; //REMOVED MIGHT NEED
//top=134; //REMOVED MIGHT NEED
orientation="horizontal";
style=menuStyle;
position="relative";
separatorimage="images/separator.png";
aI("text=HOME;url=http://www.google.com/;bgimage=images/m ... g_over.gif;");
aI("text=OXFORD CREATIVITY;url=http://www.google.com/;target=iframemain;");
aI("showmenu=Milonic;text=TRIZ;");
aI("showmenu=Partners;text=WORKSHOPS;");
aI("showmenu=Links;text=ARTICLES;");
aI("showmenu=MyMilonic;text=COMPETITION;");
aI("showmenu=Partners;text=BOOKING;");
aI("showmenu=Links;text=SUBSCRIBE;");
aI("showmenu=MyMilonic;text=CONTACT;bgimage=images/menu_rc_bg.gif;overbgimage=images/menu_rc_bg_over.gif;");

drawMenus();
}</SCRIPT >
</td>
</tr>
</table></td>
</tr>
<tr>
<td width="12" height="100%" align="left" valign="top" class="px2_left_brdr"><p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p></td>
<td width="974" height="80%" align="center" valign="top"><iframe src ="toons3.htm" name="iframemain" width="970" height="400" scrolling="No" frameborder="0" id="iframeheader2"></iframe></td>
<td width="14" height="80%" valign="baseline" class="px2_right_brdr">&nbsp;</td>
</tr>
<tr>
<td width="12" align="left" valign="top" class="bg_corner_BL">&nbsp;</td>
<td align="center" valign="middle" class="px2_bottom_brdr_small_txt">TRIZ = Theory of Inventive Problem Solving | Copyright &copy; 2006 Oxford Creativity</td>
<td width="14" class="bg_corner_BR">&nbsp;</td>
</tr>
</table>
<p>

<br>
</p>
<p>&nbsp;</p></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Attachments
newandold.jpg
newandold.jpg (180.51 KiB) Viewed 6265 times
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Re: Browser Inconsistencies

Post by Ruth »

Hi,

I thought you meant the main menu which shows the text in a quick blink on loading the page...

OK, the problem has to do with the buildAfterLoad=true; That is only used when you are putting all the menus into the data file and then calling all the files in the table cell. But, I don't know if you did it that way if it would mess up the images. Anyway get rid of that.

I cleaned up your menu_data file and will post here. One thing I wanted to note is that the subOffsets at the top will NOT apply to submenus off a horizontal main menu. So, if you want to offset the submenus from the bottom of the horizontal more than they are you need to code top="offset=6"; into each submenu except any 2nd level subs. They will take the subOffsets at top.

Here's your cleaned up 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=150;
_menuOpenDelay=0;
_subOffsetTop=0;
_subOffsetLeft=2;
//buildAfterLoad=true; //makes opera better bu ffox worse

with(menuStyle=new mm_style()){
padding=0;
fontfamily=" Arial,Verdana, Tahoma";
fontsize=10;
fontweight="bold"
rawcss="font-variant:small-caps";
headerbgcolor="#ffffff";
headercolor="#000000";
bgimage="menu_bg.gif"
overbgimage="menu_bg_over.gif"
offcolor="#000000";
oncolor="#000000";
align="center";
separatorimage="separator.gif"; 
separatorsize=3;
subimage="submenu.gif";
subimagepadding=2;
itemwidth=107;
itemheight=28;
}
Ruth
User avatar
Ptolami
Beginner
Beginner
Posts: 8
Joined: Sun Oct 14, 2007 9:52 am

Re: Browser Inconsistencies

Post by Ptolami »

Thanks again Ruth,

I am very happy with the menu now and extremely happy with the support I'm getting here. You do work for milonic, right?

I have implemented most of the suggested changes though I've not read through your amended JS script yet...

I have just a couple more things to address.

1). The submenus are slightly offset (downwards) in IE by about 2-3px. Other browsers are good in this regard [see image].
2). The text on buttons with submenus is offest to the left to make space for the submenu image. Can this text be centred as with buttons that have no submenu?
3). How can I make the text on the button run onto two lines. One of the text lables is too long to go on a single line.

Will be using this system for all sites I do in the future. :)

Cheers


Ptol
Attachments
milonic_offset.jpg
milonic_offset.jpg (170.14 KiB) Viewed 6240 times
User avatar
Ruth
 Team
 Team
Posts: 8763
Joined: Thu May 15, 2003 5:02 am
Location: Yucaipa, CA
Contact:

Re: Browser Inconsistencies

Post by Ruth »

Hi,

Actually, I don't work for Milonic. Neither John nor I do, we are just volunteers on the forum. We really love this menu and, at least for myself, like helping figure out solutions to things.

The issue with differences in where the subs open off the horizontal parent has to do with the align=middle, which by the way should be vAlign. Align has left, right and center as a property. It aligns on the horizontal axis, for vertical axis you need vAlign [i.e. vertical align] Anyway, what's happening is that in IE that code is also being applied to the menu and nothing I did with css classes seems to work. I did find a solution. Change that td cell to vAlign=top; and in the main table for that add cellpadding=3. That seems to make them look exactly the same in both browsers and the cellpadding=3 shifts the menu down 3px and away 3px from the sides so it doesn't run into the curve border of the background.

Code: Select all

<TABLE height=41 width=1000 border=0 cellpadding=3>
                          <TBODY>
                          <TR>
                            <TD vAlign="top">
As to the text wrapping, normally it would but because you need padding=0 in the data file it's got just enough room to fit. So, in this instance you'll need to force it. Just use html linebreak code

Code: Select all

aI("text=OXFORD<br>CREATIVITY;url=http://www.google.com/;");
As to the centering issue. The only thing you can do is to put some line spacing code in front of the word to shift it over more to the left.

Code: Select all

&nbsp;
Hope this helps. I think you made a good choice to purchase the Milonic menu. I have tested others, and in my opinion, this is the best one out there and the most reasonably priced one, also. It is so very easy to code -once you read the directions ;) - and I think the greatest feature is that it can be so easily designed to fit whatever layout one has. Also, for those who are css fanatics, the whole data file can be set up in css! That also gives you unlimited design tweaks using the menu properties and the css properties combined. OK, I'll get off my hobby horse :) As you can see I really do like this menu.

Ruth
User avatar
Ptolami
Beginner
Beginner
Posts: 8
Joined: Sun Oct 14, 2007 9:52 am

Re: Browser Inconsistencies

Post by Ptolami »

Ruth. You rule!

I think I have enough to be getting on with now and the menu looks great in all targeted browsers.

...But I know where to come in the future.

Thank you very very much.

Px
Post Reply