ADOBE DREAMWEAVER:

Home

Dreamweaver Forum

Dreamweaver Tutorials

FAQ

Adobe Flash

Web Design

Spry Menu Bar works great in Firefox but Messed up in IE


	Cow Forums : Adobe Dreamweaver << PREVIOUS THREAD • VIEW ALL THREADS • PRINT • NEXT THREAD >>

Spry Menu Bar works great in Firefox but Messed up in IE
by Steve Foglia on Jun 29, 2009 at 7:22:08 pm

http://www.businesstobusinessnetwork.com

I'm using Dreamweavers spry drop down Horizontal menu bar and it works great with firefox. However in IE the sub menu bar displays horizontal rather than vertical, making the lower level menu bar fly off the page. Strange.

I went to the adobe site and downloaded the latest update for spry which solved my earlier problems where all the lower menu bars were flying off the page. The menu bars should display as seen using firefox or with the main menu bars running horizontal across the page with the lower level menu bars appearing directly below and slightly to the right.

I would appreciate any suggestions anyone might have for solving this problem

thanks

Steve

Respond to this post • Return to posts index

Re: Spry Menu Bar works great in Firefox but Messed up in IE
by Richard Williams on Jun 29, 2009 at 8:30:19 pm

if you use auto settings for widths then you are leaving the browsers to interpret the look anyway they feel like it... try putting in some values for the width settings to suit your site

Richard Williams

Respond to this post • Return to posts index

Re: Spry Menu Bar works great in Firefox but Messed up in IE
by Matthew Redding on Jul 1, 2009 at 5:16:31 pm

Hi Richard,

I have seen some of your threads related to this issue and am wandering if you could look at my code please.

My horizontal spry menu uses rollover PNG's and I have it working ok except the drop downs have what looks like a drop down form box beneath my submenu PNG.

It works fine in Firefox but this only happens in IE7 (IE6 is all messed up too but trying to sort out 7 issue first or maybe something you suggest will sort it altogether.

Here is my SpryMenuBarHorizontal.css code...

@charset "UTF-8";

/* SpryMenuBarHorizontal.css - Revision: Spry Preview Release 1.4 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/*******************************************************************************

LAYOUT INFORMATION: describes box model, positioning, z-order

*******************************************************************************/

/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
list-style-type: none;
cursor: default;
width: auto;
font-size: 50%;
padding-top: 0em;
padding-right: 0;
padding-bottom: 0em;
padding-left: 0;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
list-style-type: none;
position: relative;
text-align: left;
cursor: pointer;
width: auto;
float: left;
padding-top: 0em;
padding-right: 0em;
padding-bottom: 0em;
padding-left: 0em;
margin: 0;
font-size: 50%;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
list-style-type: none;
z-index: 1020;
cursor: default;
width: auto;
position: absolute;
left: -1000em;
padding-top: 0.3em;
padding-right: 0;
padding-bottom: 0;
padding-left: 0.3em;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to auto so it comes onto the screen below its parent menu item */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible
{
left: auto;
}
/* Menu item containers are same fixed width as parent */
ul.MenuBarHorizontal ul li
{
width: auto;
}
/* Submenus should appear slightly overlapping to the right (95%) and up (-5%) */
ul.MenuBarHorizontal ul ul
{
position: absolute;
margin-top: 0%;
margin-right: 0;
margin-bottom: 0;
margin-left: 0%;
}
/* Submenu that is showing with class designation MenuBarSubmenuVisible, we set left to 0 so it comes onto the screen */
ul.MenuBarHorizontal ul.MenuBarSubmenuVisible ul.MenuBarSubmenuVisible
{
left: auto;
top: 0;
}

/*******************************************************************************

DESIGN INFORMATION: describes color scheme, borders, fonts

*******************************************************************************/

/* Submenu containers have borders on all sides */
ul.MenuBarHorizontal ul
{
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
}
/* Menu items are a light gray block with padding and no text decoration */
ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
text-align: left;
}
/* Menu items that have mouse over or focus have a blue background and white text */
ul.MenuBarHorizontal a:hover, ul.MenuBarHorizontal a:focus
{

}
/* Menu items that are open with submenus are set to MenuBarItemHover with a blue background and white text */
ul.MenuBarHorizontal a.MenuBarItemHover, ul.MenuBarHorizontal a.MenuBarItemSubmenuHover, ul.MenuBarHorizontal a.MenuBarSubmenuVisible
{

}

/*******************************************************************************

SUBMENU INDICATION: styles if there is a submenu under a given menu item

*******************************************************************************/

/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenu
{
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that have a submenu have the class designation MenuBarItemSubmenu and are set to use a background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenu
{
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal a.MenuBarItemSubmenuHover
{
background-repeat: no-repeat;
background-position: 95% 50%;
}
/* Menu items that are open with submenus have the class designation MenuBarItemSubmenuHover and are set to use a "hover" background image positioned on the far left (95%) and centered vertically (50%) */
ul.MenuBarHorizontal ul a.MenuBarItemSubmenuHover
{
background-repeat: no-repeat;
background-position: 95% 50%;
}

/*******************************************************************************

BROWSER HACKS: the hacks below should not be changed unless you are an expert

*******************************************************************************/

/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
{
position: absolute;
z-index: 1010;
}
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
{
ul.MenuBarHorizontal li.MenuBarItemIE
{
display: inline;
float: left;
}
}

Respond to this post • Return to posts index

Re: Spry Menu Bar works great in Firefox but Messed up in IE
by Matthew Redding on Jul 1, 2009 at 6:11:12 pm

Sorry I forgot to post the link for the website I am working on...

http://www.primepltd.com/test_site/index.html

Respond to this post • Return to posts index

Re: Spry Menu Bar works great in Firefox but Messed up in IE
by Richard Williams on Jul 2, 2009 at 3:18:28 pm

this link is not working

Richard Williams

Respond to this post • Return to posts index

Re: Spry Menu Bar works great in Firefox but Messed up in IE
by Steve Foglia on Jul 2, 2009 at 5:21:17 pm

Thanks, replacing auto value with an actual px width seems to work.
However seeing that each menu bar is a different width I can't seem to find the appropriate number to input that would balance the menu bar horizontally so that the title of each menu bar isn't cut off.

Any suggestions on how to beat this problem.

http://www.businesstobusinessnetwork.com

I appreciate your help
thanks
steve

Respond to this post • Return to posts index

Re: Spry Menu Bar works great in Firefox but Messed up in IE
by Richard Williams on Jul 2, 2009 at 8:22:07 pm

ok, you can keep the auto settings, but you need to add this to the spry css yourself.

ul.MenuBarHorizontal li ul li{  

    clear: left;  

}

Now, you will need to Add background colour to the ul.MenuBarHorizontal ul....

ul.MenuBarHorizontal ul

{

	border: 1px solid #CCC;

	background-color: #0080C0;

}

Richard Williams

Respond to this post • Return to posts index

Re: Spry Menu Bar works great in Firefox but Messed up in IE
by Matthew Redding on Jul 2, 2009 at 10:15:52 pm

Hi Richard,

The site is working now and is... http://www.primepltd.com

I managed to find a fix to my problem. I didn't explain it well in my message.

I used PNG files for my menu links and took away the border, colour, hover colour, etc. settings so everything was see through but when I put my mouse over the drop downs a box appeared with 'False' written inside. I couldnt see the txt at first as the box was very small but I did another test with bigger buttons and then I noticed this.

You were helping another user who in turn found a fix which was to change the 'visibility' to 'hidden' on the ul.MenuBarHorizontal iframe rule. This seemed to fix my problem too.

I saw what you said to her about her SpryMenuBar.css and SpryMenuBarHorizontal.css being corrupt and to replce them. I had already tried this by using your newer SpryMenuBar.css code as I was using an older version but this didn't work for me.

Anyway my problem is fixed, it probably isn't the correct way to do it but it's working so thank you for your reply.

Thanks again.

Respond to this post • Return to posts index

Re: Spry Menu Bar works great in Firefox but Messed up in IE
by Steve Foglia on Jul 3, 2009 at 4:17:33 pm

It Works!!! Thank You! You're AWESOME!!
Steve

Respond to this post • Return to posts index

Re: Spry Menu Bar works great in Firefox but Messed up in IE
by Matthew Redding on Jul 16, 2009 at 12:00:19 pm

Hi Richard,

Sorry I have another question. My website http://www.primepltd.com has some issues in IE6. I managed to fix the issue of IE6 not showing PNG transparency by using a JS include file on my pages but there is still the issue of the div container tiling downwards.

The div container in IE6 tiles down a little bit, the height of it does not stay as specified. I have 2 tables inside my div container for the spry menu and other PNG files (heading, copy, right hand side text).

Maybe you can take a look for me and see what I am doing incorrectly. The code for this is in one of my earlier posts.

Thanks

Respond to this post • Return to posts index

Re: Spry Menu Bar works great in Firefox but Messed up in IE
by Richard Williams on Jul 16, 2009 at 7:55:26 pm

The problem here is the margin setting in your css.

You have a top-margin set at 50px.

The way this works, is if you have a margin of 50px, and a height of 459px, then the TOTAL height is read as 509px... since your image is 459px in height, it is repeating for a further 50px. (hopefully this makes sense...?)

Not having the availability to test in IE6 locally, i can not give you a straight answer in how to repair this. Possibly adding a background-repeat: no repeat to the .oneColElsCtr #container might rectify the problem, but if not, the create a new div for the background image, with a hieght of 459, and the image background, then reduce your .oneColElsCtr #container div height by 50px's...

Something like that aught to do the job for you, but let me know if not and i will do some further investigaiton :o)

Richard Williams

Respond to this post • Return to posts index

Re: Spry Menu Bar works great in Firefox but Messed up in IE
by Matthew Redding on Jul 16, 2009 at 10:10:43 pm

Hi,

Thank you for your reply.

The no repeat on the container did stop it repeating but then there was white space at the bottom with a border around it all. So then I added the div background and put the Nav bar div inside this along with the table containing the heading, copy & right side txt but with the background image in the div background now it just did the same thing.

I deleted an extra row at the bottom of the table and this seemed to bring everything up without showing the repeating image. But now if I position the bottom edge of the table just inside the div background when I test the site in any browser (ie6/7, FF, etc...) the table has jumped up out of position.

You can view this in IE7 or FF here... http://www.primepltd.com/TEST.html

Thanks for your help again.

Here is my latest code...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- TemplateBeginEditable name="doctitle" -->

<title>Prime Procurement - Creating Value Where It Counts</title>

<!-- TemplateEndEditable -->

<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->

<link href="oneColElsCtr.css" rel="stylesheet" type="text/css" />



<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>

<script type="text/javascript">

<!--

function MM_preloadImages() { //v3.0

  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

function MM_swapImgRestore() { //v3.0

  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

}

function MM_findObj(n, d) { //v4.01

  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];

  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);

  if(!x && d.getElementById) x=d.getElementById(n); return x;

}



function MM_swapImage() { //v3.0

  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

<style type="text/css">

<!--

body {

	background-color: #FFFFFF;

}

body,td,th {

	color: #33CCFF;

}

a:link {

	text-decoration: none;

	color: #636D68;

}

a:visited {

	text-decoration: none;

	color: #636D68;

}

a:hover {

	text-decoration: none;

	color: #636D68;

}

a:active {

	text-decoration: none;

	color: #636D68;

}





-->

</style>



<style type="text/css">

<!--

.style1 {color: #FFFFFF}

-->

</style>

<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />

</head>



<body class="oneColElsCtr" onload="MM_preloadImages('buttons/bigger_buttons_5_linkmenu/menu_button_home_roll.png','buttons/bigger_buttons_5_linkmenu/menu_button_about_us_roll.png','buttons/bigger_buttons_5_linkmenu/menu_button_services_roll.png','buttons/bigger_buttons_5_linkmenu/menu_button_primemenu_roll.png','buttons/bigger_buttons_5_linkmenu/menu_button_approach_roll.png','buttons/bigger_buttons_5_linkmenu/menu_button_boutique_roll.png','buttons/bigger_buttons_5_linkmenu/menu_button_contact_roll.png')">



<div id="container">



<div id="background">



  <div id="Nav">



  	<ul id="MenuBar1" class="MenuBarHorizontal">

      

      <li><a href="#"></a><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rollover home','','buttons/button_home_roll.gif',1)"><img src="buttons/button_home.gif" name="rollover home" width="51" height="11" border="0" id="rollover home" /></a></li>

    

  <li><a href="#"></a><a href="about_us.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rollover aboutus','','buttons/button_aboutus_roll.gif',1)"><img src="buttons/button_aboutus.gif" name="rollover aboutus" width="79" height="11" border="0" id="rollover aboutus" /></a></li>

    

  <li><a class="MenuBarItemSubmenu" href="#"></a><a href="services.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rollover services','','buttons/button_services_roll.gif',1)"><img src="buttons/button_services.gif" name="rollover services" width="75" height="11" border="0" id="rollover services" /></a>

    <ul>

      <li><a class="MenuBarItemSubmenu" href="#"></a><a href="prime_menu.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rollover primemenu','','buttons/button_primemenu_roll.gif',1)"><img src="buttons/button_primemenu.gif" name="rollover primemenu" width="97" height="11" border="0" id="rollover primemenu" /></a></li>

          </ul>

      </li>

    

  <li><a class="MenuBarItemSubmenu" href="#"></a><a href="approach.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rollover approach','','buttons/button_approach_roll.gif',1)"><img src="buttons/button_approach.gif" name="rollover approach" width="86" height="11" border="0" id="rollover approach" /></a>

    <ul>

      <li><a class="MenuBarItemSubmenu" href="#"></a><a href="boutique.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rollover boutique','','buttons/button_boutique_roll.gif',1)"><img src="buttons/button_boutique.gif" name="rollover boutique" width="80" height="11" border="0" id="rollover boutique" /></a></li>

          </ul>

      </li>

    

  <li><a href="#"></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('rollover contact','','buttons/button_contact_roll.gif',1)"><img src="buttons/button_contact.gif" name="rollover contact" width="75" height="11" border="0" id="rollover contact" /></a></li>

    </ul>

  </div>

  

<table width="1019" border="0" cellspacing="0" cellpadding="0">

  <tr>

    <th width="15" height="99" scope="row">&nbsp;</th>

    <td width="575">&nbsp;</td>

    <td colspan="2" rowspan="3">&nbsp;</td>

    <td width="378" rowspan="3" align="right" valign="bottom"><img src="images/rightTxt_welcome.gif" width="378" height="201" align="right" /></td>

  </tr>

  <tr>

    <th height="30" scope="row">&nbsp;</th>

    <td><img src="images/heading_welcome.gif" width="300" height="30" /></td>

    </tr>

  <tr>

    <th height="188" scope="row">&nbsp;</th>

    <td><img src="images/copy_welcome.gif" width="555" height="188" /></td>

    </tr>

</table>

  </div>

</div>



<div id="footer">prime procurement ltd. &copy;2009</div>

<p class="style2"></p>



<script type="text/javascript">

<!--

var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});

//-->

</script>

</body>

</html>

Respond to this post • Return to posts index

Re: Spry Menu Bar works great in Firefox but Messed up in IE
by Richard Williams on Jul 17, 2009 at 9:20:16 am

Fernando...?

Richard Williams

Respond to this post • Return to posts index

Re: Spry Menu Bar works great in Firefox but Messed up in IE
by Fernando Mol on Jul 17, 2009 at 2:21:10 pm

I'm not sure if I understand what's happening here, but I moved your empty paragraph up from the footer and it seems to work in firefox.



<p class="style2">&nbsp;</p>

<div id="footer">prime procurement ltd. ©2009</div>

I'm just guessing. The code is hard to debug. You have some repeated CSS definitions (I counted at least 3 for the body tag). Try to simplify.

A better understanding of the box model will help you with your layouts. I hope this helps.

Respond to this post • Return to posts index


	<< PREVIOUS THREAD • VIEW ALL THREADS • PRINT • NEXT THREAD >>