Milonic provide full featured pull down web menus for some of the worlds largest companies
click here to see what it can do for you

Download Milonic DHTML Menu
Buy Milonic DHTML Menu

Back To Start Of Archive
Taken From The Forum: Help & Support for DHTML Menu Version 5+
Forum Topic: Click to view post
Last Updated: Saturday July 14 2012 - 06:07:25

Re: Static Background Images - Width Issue in IE


Poster: Netlivia
Dated: Monday December 3 2007 - 1:21:44 GMT

Hi Ruth,

All I can say is thank you...you're input and help is greatly appreciated.

I've implemented the changes you recommended, and it is definitely better, however not quite seamless on the corner images yet. I will have to continue to play with it, but any other input you may have would help.

Here is the code now:
Code:
fixMozillaZIndex=false; //Fixes Z-Index problem  with Mozilla browsers but causes odd scrolling problem, toggle to see if it helps
_menuCloseDelay=500;
_menuOpenDelay=150;
_subOffsetTop=-2;
_subOffsetLeft=0;
buildAfterLoad=true;


with(submenuStyle=new mm_style()){
fontfamily="Verdana, Tahoma, Arial";
fontsize="8pt";
fontweight="normal";
headercolor="#000000";
offcolor="#000000";
oncolor="#BFC0C0";
rawcss="padding-left:10px;padding-right:10px";
separatorimage="";
separatorsize=0;
}

with(menuStyle=new mm_style()){
styleid=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="9pt";
offcolor="#000000";
oncolor="#000000";
rawcss="padding-left:10px;padding-right:10px";
separatorimage="";
separatorsize=0;
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
itemheight=61;
itemwidth=131;
orientation="horizontal";
style=menuStyle;
position='relative';
aI("align=center;bgimage=images/homepage05.jpg;showmenu=Home;text=Home;");
aI("align=center;bgimage=images/homepage06.jpg;showmenu=Our Clients;text=Our Clients;");
aI("align=center;bgimage=images/homepage07.jpg;showmenu=Our Services;text=Our Services;");
aI("align=center;bgimage=images/homepage08.jpg;showmenu=Our Thinking;text=Our Thinking;");
aI("align=center;bgimage=images/homepage09.jpg;showmenu=Our Resources;text=Our Resources;");
}

with(milonic=new menuname("Home")){
itemheight=47;
itemwidth=131;
orientation="vertical";
style=submenuStyle;
top="offset=-10";
aI("align=center;bgimage=images/submenu01.jpg;text=About Us;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Clients;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Contact Us;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Sitemap;url=#;");
}

with(milonic=new menuname("Our Clients")){
itemheight=47;
itemwidth=131;
orientation="vertical";
style=submenuStyle;
top="offset=-10";
aI("align=center;bgimage=images/submenu01.jpg;text=Air Transport;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Communications;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Other Sectors;url=#;");
}

with(milonic=new menuname("Our Services")){
itemheight=47;
itemwidth=131;
orientation="vertical";
style=submenuStyle;
top="offset=-10";
aI("align=center;bgimage=images/submenu01.jpg;text=Customer Matter;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Strategic Advantage;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Value Propositions;url=#;");
}

with(milonic=new menuname("Our Thinking")){
itemheight=47;
itemwidth=131;
orientation="vertical";
style=submenuStyle;
top="offset=-10";
aI("align=center;bgimage=images/submenu01.jpg;text=Customers;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Technology;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Strategy;url=#;");
}

with(milonic=new menuname("Our Resources")){
itemheight=47;
itemwidth=131;
orientation="vertical";
style=submenuStyle;
top="offset=-10";
aI("align=center;bgimage=images/submenu01.jpg;text=Papers;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Presentations;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Reading List;url=#;");
}

drawMenus();


Thank you.

Re: Static Background Images - Width Issue in IE


Poster: Ruth
Dated: Monday December 3 2007 - 6:36:41 GMT

Hi,

OK, I got it. I tested in IE6, FF but that's 1.5, and Safari3 for pc and they all look the same. Rather than work with the bg corners in the div, I set up the menu to contain them.
This is the main menu

Code:
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
itemheight=61;
itemwidth=129;
orientation="horizontal";
style=menuStyle;
position='relative';
aI("align=center;bgimage=homepage04f.jpg;type=disabled;itemwidth=45;itemheight=61;image=blank.gif;");
aI("align=center;bgimage=homepage05.jpg;showmenu=Home;text=Home;offclass=menuitem;onclass=menuitem;itemwidth=130;");
aI("align=center;bgimage=homepage06.jpg;showmenu=Our Clients;text=Our Clients;offclass=menuitem;onclass=menuitem;");
aI("align=center;bgimage=homepage07.jpg;showmenu=Our Services;text=Our Services;offclass=menuitem;onclass=menuitem;");
aI("align=center;bgimage=homepage08.jpg;showmenu=Our Thinking;text=Our Thinking;offclass=menuitem;onclass=menuitem;");
aI("align=center;bgimage=homepage09b.jpg;showmenu=Our Resources;text=Our Resources;offclass=menuitem;onclass=menuitem;");
aI("align=center;bgimage=homepage10g.jpg;type=disabled;itemwidth=42;itemheight=61;image=blank.gif;");
}


You need to create the class in layout.css, the text-decoration none is in it because without it when you're using the off and on class in the menu it forces the text to underline.

Code:
.menuitem {border-top:1px solid #D6D6D6;border-right:0px solid #D6D6D6;
border-bottom:0px solid #D6D6D6;border-left:0px solid #D6D6D6;text-decoration:none;
}


Also, you need to change your header_left.jpg to header_left1.jpg in the layout.css file, and the right_header.jpg to right_header1.jpg in the default.css file. All the images are below. The reason for this is because with everything in the menu, I had to set up that grayish top border look in the menu, that's what the class is doing, if I left it in the header images the corners would not come right so I made two new images without that grayish shading at the bottom. I also made new corner images and one item image for the main menu.

EDIT: Images removed.

It seems to work :) The one image I didn't include here is the blank.gif, that's a 1px by 1px transparent gif image. So, you'll need to make that. They are visible [edit: that should be invisible :) ] so it's hard to put them in the forum for someone to get since you can't see them :)
Ruth

Static Background Images - Width Issue in IE


Poster: Netlivia
Dated: Sunday December 2 2007 - 19:37:43 GMT

Hi,

I just bought the Static Background Images sample (http://www.milonic.com/menusample71.php) and have implemented it on our test site here:

http://www.netlivia.com/blackstonegates/index.php

In FireFox, it renders correctly. However, when I test in IE6, the width of the background images do not seem to take effect, thereby making the menu much too small to fit the width designated.

Can you help me debug this please? Thank you.

Here is my code:

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


with(submenuStyle=new mm_style()){
fontfamily="Verdana, Tahoma, Arial";
fontsize="8pt";
fontweight="normal";
headercolor="#000000";
offcolor="#000000";
oncolor="#BFC0C0";
rawcss="padding-left:10px;padding-right:10px";
separatorimage="";
separatorsize=0;
}

with(menuStyle=new mm_style()){
styleid=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="9pt";
offcolor="#000000";
oncolor="#000000";
rawcss="padding-left:10px;padding-right:10px";
separatorimage="";
separatorsize=0;
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
itemheight=61;
itemwidth=131;
left=350;
orientation="horizontal";
style=menuStyle;
top=125;
aI("align=center;bgimage=images/homepage05.jpg;showmenu=Home;text=Home;");
aI("align=center;bgimage=images/homepage06.jpg;showmenu=Our Clients;text=Our Clients;");
aI("align=center;bgimage=images/homepage07.jpg;showmenu=Our Services;text=Our Services;");
aI("align=center;bgimage=images/homepage08.jpg;showmenu=Our Thinking;text=Our Thinking;");
aI("align=center;bgimage=images/homepage09.jpg;showmenu=Our Resources;text=Our Resources;");
}

with(milonic=new menuname("Home")){
itemheight=47;
itemwidth=131;
orientation="vertical";
style=submenuStyle;
top="offset=-10";
aI("align=center;bgimage=images/submenu01.jpg;text=About Us;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Clients;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Contact Us;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Sitemap;url=#;");
}

with(milonic=new menuname("Our Clients")){
itemheight=47;
itemwidth=131;
orientation="vertical";
style=submenuStyle;
top="offset=-10";
aI("align=center;bgimage=images/submenu01.jpg;text=Air Transport;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Communications;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Other Sectors;url=#;");
}

with(milonic=new menuname("Our Services")){
itemheight=47;
itemwidth=131;
orientation="vertical";
style=submenuStyle;
top="offset=-10";
aI("align=center;bgimage=images/submenu01.jpg;text=Customer Matter;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Strategic Advantage;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Value Propositions;url=#;");
}

with(milonic=new menuname("Our Thinking")){
itemheight=47;
itemwidth=131;
orientation="vertical";
style=submenuStyle;
top="offset=-10";
aI("align=center;bgimage=images/submenu01.jpg;text=Customers;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Technology;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Strategy;url=#;");
}

with(milonic=new menuname("Our Resources")){
itemheight=47;
itemwidth=131;
orientation="vertical";
style=submenuStyle;
top="offset=-10";
aI("align=center;bgimage=images/submenu01.jpg;text=Papers;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Presentations;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Reading List;url=#;");
}

drawMenus();

Re: Static Background Images - Width Issue in IE


Poster: Ruth
Dated: Sunday December 2 2007 - 21:31:29 GMT

Hi,

It's probably something in css, though I've not been able to find it. However, I did find a solution which works, and may in fact be better given your layout.

Add this up at the top just after the subOffsets

Code:
buildAfterLoad=true;


Change your main menu properties to this

Code:
alwaysvisible=1;
itemheight=61;
itemwidth=131;
orientation="horizontal";
style=menuStyle;
position='relative';


Then on the page change your div id menu_container so it is this


Code:
<DIV id=menu_container>
<DIV id=menu_left><table cellpadding=0 cellspacing=0 width='100%' border=0>
<tr>
       <td width=39><IMG src="homepage04.jpg"></td>
       <td width=655> <SCRIPT src="milonic_src.js" type=text/javascript></SCRIPT>

<SCRIPT src="mmenudom.js" type=text/javascript></SCRIPT>
<!-- The next file contains your menu data, links and menu structure etc -->
<SCRIPT src="menu_data.js" type=text/javascript></SCRIPT></td>
       <td valign='top'><img src="homepage10.jpg" width="39" height="61" border="4"></td>
</tr>
</table><DIV id=menu_middle></DIV></DIV>
</DIV>


This make the menu look the same in IE6, FF, and Safari 3.0.1 for the pc.

What I have done is position the menu relatively so that it will always be in that place no matter the resolution of the browser. Also, try this image in the table cell where there is now homepage10.jpg. That's so there it looks like the end of the menu links to that homepage10.jpg background image, so there's no white space between. All I did was extend that corner all the way to the left of that image. IMG LINK REMOVED


Ruth

Re: Static Background Images - Width Issue in IE


Poster: John
Dated: Monday December 3 2007 - 14:17:35 GMT

Ruth, you should update your Safari. 3.0.4 is current. Also, for FF 2.0.0.11 is current.

Just FYI...

Re: Static Background Images - Width Issue in IE


Poster: Netlivia
Dated: Monday December 3 2007 - 23:41:20 GMT

Hi,

Ruth, thanks again for your help. It is looking much better. You can see it here: http://www.netlivia.com/blackstonegates/index.php.

IF you're interested, here is the div for containment of the menu:

Code:
<div id="menu_container">
         <table cellpadding="0" width="100%" border="0">
            <tr>
               <td width="736">
                  <script type="text/javascript" src="common/milonic_src.js"></script>
                  <script type="text/javascript" src="common/mmenudom.js"></script>
                  <!-- The next file contains your menu data, links and menu structure etc -->
                  <script type="text/javascript" src="common/menu_data.js"></script>
               </td>
            </tr>
         </table>
</div>


Here is the code from menu_data.js now:

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


with(submenuStyle=new mm_style()){
fontfamily="Verdana, Tahoma, Arial";
fontsize="8pt";
fontweight="normal";
headercolor="#000000";
offcolor="#000000";
oncolor="#BFC0C0";
rawcss="padding-left:10px;padding-right:10px";
separatorimage="";
separatorsize=0;
}

with(menuStyle=new mm_style()){
styleid=1;
fontfamily="Verdana, Tahoma, Arial";
fontsize="9pt";
offcolor="#000000";
oncolor="#000000";
rawcss="padding-left:10px;padding-right:10px";
separatorimage="";
separatorsize=0;
}

with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
itemheight=61;
itemwidth=129;
orientation="horizontal";
style=menuStyle;
position='relative';
aI("align=center;bgimage=images/homepage04f.jpg;type=disabled;itemwidth=45;itemheight=61;image=images/transparent_spacer.gif;");
aI("align=center;bgimage=images/homepage05.jpg;showmenu=Home;text=Home;offclass=menuitem;onclass=menuitem;itemwidth=130;");
aI("align=center;bgimage=images/homepage06.jpg;showmenu=Our Clients;text=Our Clients;offclass=menuitem;onclass=menuitem;");
aI("align=center;bgimage=images/homepage07.jpg;showmenu=Our Services;text=Our Services;offclass=menuitem;onclass=menuitem;");
aI("align=center;bgimage=images/homepage08.jpg;showmenu=Our Thinking;text=Our Thinking;offclass=menuitem;onclass=menuitem;");
aI("align=center;bgimage=images/homepage09b.jpg;showmenu=Our Resources;text=Our Resources;offclass=menuitem;onclass=menuitem;");
aI("align=center;bgimage=images/homepage10g.jpg;type=disabled;itemwidth=42;itemheight=61;image=images/transparent_spacer.gif;");
}

with(milonic=new menuname("Home")){
itemheight=47;
itemwidth=131;
orientation="vertical";
style=submenuStyle;
top="offset=-10";
aI("align=center;bgimage=images/submenu01.jpg;text=About Us;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Clients;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Contact Us;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Sitemap;url=#;");
}

with(milonic=new menuname("Our Clients")){
itemheight=47;
itemwidth=131;
orientation="vertical";
style=submenuStyle;
top="offset=-10";
aI("align=center;bgimage=images/submenu01.jpg;text=Air Transport;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Communications;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Other Sectors;url=#;");
}

with(milonic=new menuname("Our Services")){
itemheight=47;
itemwidth=131;
orientation="vertical";
style=submenuStyle;
top="offset=-10";
aI("align=center;bgimage=images/submenu01.jpg;text=Customer Matter;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Strategic Advantage;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Value Propositions;url=#;");
}

with(milonic=new menuname("Our Thinking")){
itemheight=47;
itemwidth=131;
orientation="vertical";
style=submenuStyle;
top="offset=-10";
aI("align=center;bgimage=images/submenu01.jpg;text=Customers;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Technology;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Strategy;url=#;");
}

with(milonic=new menuname("Our Resources")){
itemheight=47;
itemwidth=131;
orientation="vertical";
style=submenuStyle;
top="offset=-10";
aI("align=center;bgimage=images/submenu01.jpg;text=Papers;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Presentations;url=#;");
aI("align=center;bgimage=images/submenu01.jpg;text=Reading List;url=#;");
}

drawMenus();


Thanks again for your help. It is sincerely appreciated. :D

Jamie

Re: Static Background Images - Width Issue in IE


Poster: Ruth
Dated: Tuesday December 4 2007 - 4:38:43 GMT

Hi,

The problem is in the table, it has width=655 in the menu's td cell. Just remove that and it goes exactly. Since you have the images, I'm going to delete them.

Ruth

©1998-2012 Milonic Solutions Ltd. UK Registered Company #4406835
Privacy Policy | License Agreement | Contact Us | Tech Support