Menu shrinks each time you click on it

Taken From The Forum:
Forum Topic:
Last Updated: Saturday July 14 2012 - 06:07:20

Menu shrinks each time you click on it

Poster: hunchermuncher
Dated: Thursday December 22 2005 - 11:58:58 GMT

My menu works fine in Firefox but in Internet Explorer every time you mouse over part of the menu it shrinks. It does this 27 times until it is as small as possible. Then when you open a new page the menu is normal size until you start mousing over it again. As I say, it only does it in IE. http://www.blue-sky-yoga.com

Poster: Ruth
Dated: Thursday December 22 2005 - 15:33:25 GMT

Hi,

Add menuwidth=550; to the menu area, where you have the itemwidth=110. You also need to upgrade to the newest version of the menu.

Ruth

Poster: hunchermuncher
Dated: Thursday December 22 2005 - 16:28:25 GMT

That works! Thank you very much.

Poster: hunchermuncher
Dated: Thursday December 22 2005 - 16:42:32 GMT

There is now a larger gap above the menu in Firefox, which is not there in IE.

Poster: hunchermuncher
Dated: Thursday December 22 2005 - 16:44:34 GMT

Also when you move between the "booking" and "more" tabs in IE there is a resizing happening!

gaps and shrinking............

Poster: Migru
Dated: Thursday December 22 2005 - 17:10:49 GMT

Hi

Try
menuwidth="100%";
because the main menu is in a table.

and for the margin on top of the file
please have a look at

http://www.milonic.com/forum/viewtopic. ... tml+margin

Michael

I would recommend to use .gif files of the same size, one is 4x7 the other 5x7, that creates a visual change of graphics position !!!

Poster: hunchermuncher
Dated: Thursday December 22 2005 - 17:42:10 GMT

Thanks - that's weird because
menuwidth="100%";
fixes the margin on top of the file in Firefox

However it does not fix the resizing of the two tabs.

Poster: hunchermuncher
Dated: Thursday December 22 2005 - 17:42:46 GMT

Nor does the CSS suggestion from the other link. And the other problem is that the menu in Firefox now pokes out slightly from the table on the right edge.

menuwidth etc

Poster: Migru
Dated: Thursday December 22 2005 - 17:51:13 GMT

Hi

I´m almost certain, it is the different space size ( in pixels) of the arrow - gifs. and for me, the css suggestion helped, standardizing the top margin in IE and Firefox, which in my case, is the same, so its not the menu, must be your arrangement within the file.

Michael

Poster: hunchermuncher
Dated: Thursday December 22 2005 - 23:54:32 GMT

Hi Michael, thanks for these suggestions. I have put in gifs of the same dimension and that has solved the resizing problem on individual tabs. You have helped me solve nearly everything - so the only problem I have is that the menu sticks out on the right in Firefox, but is fine in IE. Can anyone suggest anything? Thanks.
http://www.blue-sky-yoga.com

menu sticks out

Poster: Migru
Dated: Sunday December 25 2005 - 17:10:51 GMT

Hi,

just made a test,

please replace
menuwith="100%"; with
menuwidth=550;

Michael

I know, this was already done two steps before, but there must have been something different (I think the gifs) with unwanted effects.

Poster: Ruth
Dated: Sunday December 25 2005 - 17:29:06 GMT

Hi,

One of the things that seems to be different in all browsers is their 'default' margins. I'm not into the internals of browsers so I don't know why that is. One of the fixes I've found for layout problems was to use a css code setting all body margins to 0 and developing the design from there.

Code:

body {margin:0px}

Ruth

Poster: hunchermuncher
Dated: Monday December 26 2005 - 0:25:09 GMT

Michael, I have replaced menuwidth="100%"; with menuwidth=550; and yes - that gets rid of the sticking-out bit, but it gives me the other problem of a thicker margin appearing above the menu in Firefox. However I prefer that problem. So I will leave it like that for now.

Ruth, unfortunately I don't know enough about CSS. I tried typing in body {margin:0px} in the file after <STYLE type=text/css> but it didn't do anything. But I admit I need to study CSS!

CSS etc.

Poster: Migru
Dated: Monday December 26 2005 - 0:44:29 GMT

Hi

Just place it in the Head - section

Code:

<HEAD>

<style type="text/css">
 body {margin:0px}
</style>
</Head>

Michael

Poster: hunchermuncher
Dated: Monday December 26 2005 - 23:36:24 GMT

Hi

Tried the CSS but it doesn't seem to change much for me - thanks all the same.

Poster: Ruth
Dated: Tuesday December 27 2005 - 1:01:21 GMT

Hi,

Try this. It is the best I can get it. But, it's closer than the others. It doesn't have the higher blue space above the menu in FF now, nor does it go over at the right.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Yoga, Drama and Voice holiday in Lesvos, Greece</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta NAME="description" content="Yoga, Drama and Voice holiday in Lesvos, Greece">
<meta name="keywords" content="yoga holiday, yoga holidays, yoga, holidays, holistic, vacation, vacations, activity holidays, retreats, yoga retreats, travel, june 2006, june, courses, Greece, Lesvos, relaxation, relax, beach, single, artist retreat, Lesbos, Molivos, Milelja, Milelia, accommodation, residential, vegetarian, light touch, reflexology, David Farmer, Julia Webb">
<meta NAME="Author" CONTENT="David Farmer">
<STYLE type=text/css>A:hover {
   COLOR: white
}
A {
   TEXT-DECORATION: none
}
.style2 {
   FONT-WEIGHT: bold; FONT-SIZE: 9px
}
BODY {margin:0px;
   BACKGROUND-COLOR: #cccccc
}

</STYLE></head>
<body text="#000000" vlink="#6600FF">
<SCRIPT type="text/javascript" src="milonic_src.js"></SCRIPT>
<script type="text/javascript">
<!--
if(ns4)_d.write("<SCR"+"IPT LANGUAGE=JavaScript SRC=mmenuns4.js><\/SCR"+"IPT>");
else _d.write("<SCR"+"IPT LANGUAGE=JavaScript SRC=mmenudom.js><\/SCR"+"IPT>");
-->
</SCRIPT>
<SCRIPT type="text/javascript" src="menu_data.js"></SCRIPT> 
<!-- Begin Web-Stat code -->
<script type="text/javascript">
var page_name = '';
var invisible = '';
function sE(){return true;}window.onError=sE;
var ui='huncher1';var rn=Math.random();var base=top.document;
var qry=ui+':3::'+escape(base.referrer)+'::'+screen.width
+'x'+screen.height+'::'+screen.colorDepth+'::'+escape(page_name)
+'::'+invisible+'::'+rn+'::'+escape(base.URL);
document.write('<a href="http://www.web-stat.com/stats/'+ui+'.htm');
document.write('"><img src="http://server4.web-stat.com/count.pl?');
document.write(qry+'" border="0" alt="create hit counter"/><\/a>');
</script><noscript><a href="http://www.web-stat.com">
<img src="http://server4.web-stat.com/3/huncher1.gif" 
border="0" alt="create hit counter"></a></noscript>
<!-- End Web-Stat code -->
<TABLE cellSpacing=0 cellPadding=0 width=550 align=center  border=0 bgColor=#8bcff6>
  <TBODY>
  <TR>
    <TD align=middle height=100><table width=550 cellpadding=0 cellSpacing=0  border=0 align="center" bgColor=#8bcff6>
<tr>
       <td height="100px" align="center"><OBJECT 
      codeBase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0 
      classid=clsid:D27CDB6E-AE6D-11cf-96B8-444553540000 width=550 height=100><PARAM NAME="movie" VALUE="bluesky6.swf"><PARAM NAME="quality" VALUE="high">
                        <embed src="bluesky6.swf" quality="high" 
      pluginspage="http://www.macromedia.com/go/getflashplayer" 
      type="application/x-shockwave-flash" width="550" height="100"></embed>    
      </OBJECT></td>
</tr>
<tr>
       <td height=10> <SCRIPT>
with(milonic=new menuname("Main Menu")){
alwaysvisible=1;
position="relative";
orientation="horizontal";
itemheight=10;
itemwidth=109;
menuwidth=549; 
style=menuStyle;
aI("text=home;url=http://www.blue-sky-yoga.com/;");
aI("showmenu=activities;text=activities;");
aI("showmenu=location;text=location;");
aI("text=booking;url=http://www.blue-sky-yoga.com/booking.htm;");
aI("showmenu=more;text=more;");
}
drawMenus();
</SCRIPT></td></tr></table>
<table width="550" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#8BCFF6">
  <tr>
    <td height="15" align="center"></td>
  </tr>
</table>
<table width="550" border="0" align="center" cellpadding="5" cellspacing="2" bgcolor="#8BCFF6">
  <tr>
    <td width="285" valign="top"><blockquote>
        <p><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><img src="images/seaset.jpg" width="201" height="151"><br>
            <br>
          <br>
            <img src="images/house.jpg" width="200" height="150"><br>
            <br>
            <br>
        <img src="images/hall3.jpg" width="200" height="150"></font><font size="1" face="Verdana, Arial, Helvetica, sans-serif">                </font></p>
        </blockquote></td>
    <td width="196" valign="top">
      <p align="justify"><strong><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Blue Sky Yoga is a holiday with a difference on a beautiful and unspoilt Greek island. </font></strong></p>
      <p align="justify"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">On offer are yoga, drama and voice workshops plus reflexology treatments.</font></p>
    <p align="justify"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Stay in a purpose built centre with its own dance studio, amongst olive trees, hills and wild flowers.</font></p>      <p align="justify"><font face="Verdana, Arial, Helvetica, sans-serif"><span class="style2">June 22nd - 29th 2006<br>
    </span></font><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><br>
    The holiday takes place for one week on the island of Lesvos (Lesbos), Greece and is led by <a href="http://www.david-farmer.com/yoga.htm"><strong>David Farmer </strong></a>- theatre director and yoga teacher. This is the third holiday David has run in Lesvos.</font></p>
    <p align="justify"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Milelja is a beautiful purpose-built retreat centre just outside the historic town of Molyvos. The centre overlooks the Aegean sea and provides extremely comfortable accommodation in a very relaxing environment. </font></p>
    <p align="justify"><font size="1" face="Verdana, Arial, Helvetica, sans-serif">Each day will offer one or two yoga sessions suitable for beginners or more experienced students. Additional activities include drama and voice workshops and an optional boat trip. You may also choose to enjoy a reflexology treatment by qualified therapist Julia Webb.</font></p>
    </td>
    <td width="11"></td>
  </tr>
</table>
<table width="550" border="0" align="center" cellpadding="0" cellspacing="2" bgcolor="#8BCFF6">
  <tr>
    <td height="49" valign="top"><blockquote>
        <p align="center"><font size="1" face="Verdana, Arial, Helvetica, sans-serif"><br>
              <a href="drama.htm">drama</a> : <a href="yoga.htm">yoga</a> : <a href="itinerary.htm">typical day</a> : <a href="centre.htm">the centre</a> : <a href="lesvos.htm">the island</a><br>
          <a href="booking.htm">booking</a> : <a href="teacher.htm">the teacher</a> : <a href="faqs.htm">FAQs</a>        </font><img src="file:///D|/david-farmer%202005/images/spacer.gif" width="1" height="1"></p>
    </blockquote>
    </td>
  </tr>
</table>
</body>
</html>

It is very difficult with regard to little shifts of 1 or 2px. I remember one issue about centering and how the menu was 1px off to the right in NN and FF. It had something to do with width and how NN and FF would center 1px more to the right than IE. Sorry, I'm not into browser internals, this was in response to a centered site that was different in the two browsers and different at different resolutions. It's not exactly the same issue, but does have a problem with very small pixels shifts and centered sites and info on what is causing the problem so thought it might give you some more info on the issue. http://www.milonic.com/forum/viewtopic. ... 5605#15547

Anyway, I did get the page to look almost exactly the same in FF and IE, hope this will be good enough.

Ruth

Poster: hunchermuncher
Dated: Tuesday December 27 2005 - 17:49:23 GMT

Hi Ruth

That's superb! Thank you for working on this. I am going to print out the code so I can see exactly the changes you have made - so that I can learn from the master! (Or mistress in this case.)

Best wishes,
David

Industrial Strength JavaScript and DHTML Menus

Menu shrinks each time you click on it

gaps and shrinking............

menuwidth etc

menu sticks out

CSS etc.