Menu shrinks each time you click on it

hunchermuncher · Post by **hunchermuncher** » Thu Dec 22, 2005 12:58 pm

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

Post by **Ruth** » Thu Dec 22, 2005 4:33 pm

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

hunchermuncher · Post by **hunchermuncher** » Thu Dec 22, 2005 5:28 pm

That works! Thank you very much.

hunchermuncher · Post by **hunchermuncher** » Thu Dec 22, 2005 5:42 pm

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

hunchermuncher · Post by **hunchermuncher** » Thu Dec 22, 2005 5:44 pm

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

Migru · Post by **Migru** » Thu Dec 22, 2005 6:10 pm

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

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 !!!

hunchermuncher · Post by **hunchermuncher** » Thu Dec 22, 2005 6:42 pm

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.

hunchermuncher · Post by **hunchermuncher** » Thu Dec 22, 2005 6:42 pm

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.

Migru · Post by **Migru** » Thu Dec 22, 2005 6:51 pm

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

hunchermuncher · Post by **hunchermuncher** » Fri Dec 23, 2005 12:54 am

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

Migru · Post by **Migru** » Sun Dec 25, 2005 6:10 pm

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.

Post by **Ruth** » Sun Dec 25, 2005 6:29 pm

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

body {margin:0px}

Ruth

hunchermuncher · Post by **hunchermuncher** » Mon Dec 26, 2005 1:25 am

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!

Migru · Post by **Migru** » Mon Dec 26, 2005 1:44 am

Hi

Just place it in the Head - section

Code: Select all

<HEAD>

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

Michael

hunchermuncher · Post by **hunchermuncher** » Tue Dec 27, 2005 12:36 am

Hi

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

Post by **Ruth** » Tue Dec 27, 2005 2:01 am

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

<!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://websites.milonic.com/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://websites.milonic.com/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://websites.milonic.com/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. 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

hunchermuncher · Post by **hunchermuncher** » Tue Dec 27, 2005 6:49 pm

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

Milonic JavaScript Menu

Menu shrinks each time you click on it

Menu shrinks each time you click on it

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

menuwidth etc

menu sticks out

CSS etc.