Static Background Images - Width Issue in IE

[Netlivia]

Hi,

I just bought the Static Background Images sample (http://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: Select all

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();

[Ruth]

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

buildAfterLoad=true;

Change your main menu properties to this

Code: Select all

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

<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

[Netlivia]

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

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.

[Ruth]

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

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

.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

[John]

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

Just FYI...

[Netlivia]

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

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

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.

Jamie

[Ruth]

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