Problems with Menu in a Table Cell

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

Problems with Menu in a Table Cell

Poster: Justice
Dated: Friday February 13 2004 - 19:52:52 GMT

This is a minor annoyance, but the Menu is positioned inside a table cell, and is center aligned inside the cell. However, the cell's width is larger than the menu width. Sometimes when the page is loaded, the menu fills in this blank space by expanding to fill the whole cell, but this looks awkward.

The main page is located here:

http://www.justiceknight.com

The effect seems to be random, so it may or may not show when you go there...

Any help fixing this problem would be greatly appreciated!

Advance apologies to Mozilla users, the site's alignment is still screwed up in that browser. I'm going to try to correct it over the weekend.

Poster: kevin3442
Dated: Friday February 13 2004 - 20:49:07 GMT

I think I saw the effect, but only briefly (IE6/Win2k). Does the effect take place only as the page loads, or does it persist after the loading is finished?

A couple of things to note that may or may not influence the problem:

(1) Your table is in a <td> that has no </td> end tag.

(2) There appears to be a <b> tag in the menu's table cell that serves no apparent purpose, and it also has no end tag.

(3) As the sample on the website indicates, you cuold get "unexpected results" by embedding the menu in a table, although yours seems to work for the mst part. May I be so bold as to suggest that your page layout does not require the menu to be in a table cell? You could get the same layout by sing the menu's built-in positioning. Then, you wouldn't get any table/menu-reated weirdness. If you want to try that, but need help with position options, give a holler.

Hope that helps,

Kevin

Poster: Justice
Dated: Friday February 13 2004 - 23:04:51 GMT

</td> tag added.

<b> tag removed (remnant from recycled code).

As to using the menu in outside a table, I've tried to avoid doing that, since I use a general template, and pictures on the top of the page and layouts might upset the placement. When I used Milonic Menu version 3, it was in a static spot on the page, and that was sometimes troublesome.

The funniest thing is, this problem never occurs when I load the pages locally, which is why I'm surprised it happens on the web. The problem usually shows up only on first load. A reload almost always eliminates it.

Poster: kevin3442
Dated: Friday February 13 2004 - 23:56:56 GMT

Justice wrote:

...As to using the menu in outside a table, I've tried to avoid doing that, since I use a general template, and pictures on the top of the page and layouts might upset the placement....

I see... makes sense then.

Quote:

The funniest thing is, this problem never occurs when I load the pages locally, which is why I'm surprised it happens on the web. The problem usually shows up only on first load. A reload almost always eliminates it.

Odd indeed. Perhaps the addition of the </td> will fix it. Let us know.

Kevin

Poster: Ruth
Dated: Saturday February 14 2004 - 2:52:21 GMT

If that doesn't and you can't find another solution, you might insert a single cell table centered and the exact size you want for the menu inside the cell in which you now have the menu and put the menu in it. Geesh, that sounds like one of those i know that you know that I know, lol. I know that's not the fixing what causes it, but it would do what you want.

Ruth

Poster: Justice
Dated: Saturday February 14 2004 - 5:36:17 GMT

LOL! Yeah, I know all about those tricks. When you have a rotten wall, you stick a framed picture over it to hide it. :lol:

It seems to be working okay now. Even better, I fixed enough syntax errors to get the thing to display right in Mozilla (well, main page anyway). I'll just hope things work okay in Opera and Firebird.

Poster: John
Dated: Saturday February 14 2004 - 5:47:15 GMT

Ruth, is it past your bed time... :?:

Poster: Ruth
Dated: Saturday February 14 2004 - 6:13:42 GMT

Bed??? what's that?

Sometime in the middle of the week, my pages snuck up on me, slipped handcuffs on a tied me to the chair. :lol:

Ruth

Poster: kevin3442
Dated: Saturday February 14 2004 - 6:14:55 GMT

jgillett wrote:

Ruth, is it past your bed time... :?:

I don't think Ruth has a proper bed time. She's a late lurker, just like you are sometimes!

Poster: Justice
Dated: Saturday February 14 2004 - 20:05:00 GMT

Er...sorry guys, I just tried again, and the result is the same as before. Any other suggestions, other than just sucking it up and living with it?

Poster: John
Dated: Saturday February 14 2004 - 21:59:29 GMT

kevin3442 wrote:

She's a late lurker, just like you are sometimes!

But aren't we all? Of course, with my -0700GMT, this post will appear as 2200 (approx.) in the UK, so the appearance is nice...

Poster: Ruth
Dated: Sunday February 15 2004 - 3:03:13 GMT

Justice, one thing I noticed is that you do not have a menuwidth listed for the one on the page in the table, that might help...I think it's about menuwidth=510; Also, just in case some browsers sort of overlook that width you could put in addition an itemwidth= for each item, just like the onbgcolor you have... it's somewhere around 40 for the two small ones and 60 - 65 for the others. onbgcolor=#whatever;itemwidth=40;"); and so on. Hope that helps, and ultimately, the surefire way is a table with no border, cellspacing=0 etc. center align, in there the exact width of the menu

Ruth

Poster: Justice
Dated: Tuesday February 17 2004 - 6:09:52 GMT

Alright, I'll give that all a shot...

Out of curiosity, is there any surefire way of measuring exactly how many pixels in length my menu will be, besides hack and guess? I plan on changing the words over time, so that will change the settings.

Poster: Ruth
Dated: Tuesday February 17 2004 - 6:44:15 GMT

I'm sorry, I don't know anyway to do that except by guess and by golly. If you know the font size and how many pixels that will take up based on the letters then you could add to that the padding you have set for the items, the border width and put it together and get close. I know you're using a template but if the menu is always going to be in that cell ...sorry I don't know about templates never having used them... would it be hard to have the template have a separate table in that cell for the menu? But, I think that if you put the menuwidth, or even just item widths it will solve the problem about it filling the cell like that. I know without that it tends to do that in Netscape especially, but with it that seems to disappear. I'd keep up with the new menu downloads [always keeping the last good working version someplace] because little things are getting fixed as they go.

Ruth

Poster: Maz
Dated: Tuesday February 17 2004 - 10:35:07 GMT

Yes, there are screen rulers that measure exactly, there are some nice ones now, and free trial ones to get you started. Do a google search some are pc and some are mac.

I can't measure because I can't see the outline box once it loaded.

But your menu is just under 65% width.

You could use screenposition="center"; top=107; menuwidth="65%"; itemwidth="100%";

With your menu scripts just under the body tag.

maz

Poster: Justice
Dated: Tuesday February 17 2004 - 19:00:32 GMT

The table cell in which the menu resides is fixed at a relative width of 70 percent of the available screen width, with a cellpadding of 2 between the 3 columns of the page. I can, of course, insert a table within that cell with little difficulty. It all comes down to just getting that doggone width measure right.

I don't really want to mess with "itemwidth" because when I inserted that last time, Internet Explorer crashed on me - and also put the menu about a football field right of where it was before.

I'll get to work on hacking all this out tonight and let you all know where it goes.

Poster: Maz
Dated: Tuesday February 17 2004 - 20:58:53 GMT

I think I see it, you have a top and left position, but your position is relative so you don't need them, because the menu will be relative to the table not top and left of the browser.

style=menuStyle;
alwaysvisible=1;
orientation="horizontal";
position="relative";
menuwidth="100%";
itemwidth="100%";

What is overfilter? I don't know why you need that.

Give it a try, because top and left was causing the crash.

Also use td align="center" and remove <center> </center>

maz

Poster: Ruth
Dated: Tuesday February 17 2004 - 21:14:22 GMT

Thanks Maz for the info on screen rulers, never knew there were such things. I got a nice little one free and, I don't know why except maybe it's not being sold anymore, or it's out of date or something, but when I downloaded it includes the 'pro' version so I can change it's colors and such.

Ruth

Poster: Justice
Dated: Wednesday February 18 2004 - 4:39:11 GMT

WE HAVE A WINNER!

Thanks Maz, that solved the problem. Itemwidth was the only parameter needed to stretch the menu out to fill the table cell. Menuwidth I stuck in there just in case.

As far as overfilter, I'm a very lazy slacker. I merely copied verbatim the sample HTML script code in the demo HTML page and never really tinkered with any of the parameters. I figured, so long as things were working, don't touch!

In fact, after experimenting with the menu a tad, there appears to be a little cheat. I used the parameter itemwidth="10%", which shrunk the menu to the smallest size possible for the font size selected. This appears to be functioning in both Mozilla and IE 6. HTML files are being uploaded within the hour to reflect all the advice on all the pages. You can let me know how it goes by posting feedback here or on my board.

Note: Delayed due to FTP access being down all of tonight.

Poster: Justice
Dated: Thursday February 19 2004 - 0:44:32 GMT

Files now uploaded. Let me know if it shows up right. *Crosses fingers*

Poster: Ruth
Dated: Thursday February 19 2004 - 4:53:53 GMT

I hate to be the one to give you the bad news.

1. It's not showing in Netscape 4.79....though it should. I uploaded it to my site, everything in one folder and it shows fine, but on your site I get

Quote:

Bad Request: Your browser sent a request that this server could not understand. The request line contained invalid characters following the protocol string.

2. It is showing in the later versions, netscape 6, 7, and opera 6, 7, and ie5.

3. There's a problem in Netsape 6 easily fixed. You have this code in the table cell where the menu is

Code:

That align=middle isn't a valid code there, but Netscape 6 is reading it and putting the menu in the middle of that top table so it goes under the words. Once that's gone it works fine.

4. With the fontsize="80%" in the menu_data.js file, it looks much bigger when i go to the site with any netscape. I would set that to a pixel. I tried 11px, it made the menu seem the same size in Netscape as in IE.

5. It is centering, but for some reason it looked like it wasn't. Drove me nuts, until I realized it's the shield image. The image is 134 px wide, but the shield doesn't sit in the center of it. It sits to the right, so when you use the image on the right side of the page, the menu looks farther from the shield leg because there is more blank space on the left side of the image. If you have a graphics program just flip it horizontally, save it as _right or something and then use that on the right side of the page. If you don't. I already did it with mine so I could check it, and i'd be glad to put the image up for you.

6 THE GOOD NEWS, it does seem to center in the table

how come you're not using the final release? you should, hopefully all this work doesn't change with the newer releases.

Ruth

Poster: Justice
Dated: Friday February 20 2004 - 0:03:45 GMT

#1 - My Host is having problems with the particular webserver my site is located on. I might apply for a transfer, but that's going to take some time to propagate. They haven't given me any specifics.

#2 - Good.

#3 - That is extremely odd. My copy of the index.html file has the proper code align=center. I haven't been able to find that coding mistake anywhere on my pages. Could you tell me where it showed up?

#4 - I've noticed Netscape makes the font sizes larger than in IE. I've made that change in the menu_data.js file to 12px - let me know if it looks any better.

#5 - I honestly never noticed that problem before. I've stuck center tags in each cell to eliminate the problem.

#6 - YAY! :lol:

As to me not using the final release, I'm not one to mess around with things. If it ain't broke on the webpage, for the sake of sanity, don't mess with it! Really, it's just that I downloaded the code a couple months ago and I haven't bothered to get a more recent copy. If it's just a modification of the 3 source files, I might update sometime in the future...yeah, that's it...

Poster: Ruth
Dated: Friday February 20 2004 - 2:52:40 GMT

#3

Code:

<COLGROUP>
  <COL align=middle span=3 vAlign=center></COLGROUP>
  <TBODY>

and

Code:

<TD align=middle vAlign=top width="70%"><IMG 
      src="TitleBar.gif"></TD>

There are others. In first the acceptable align and valign attributes are switched but in the second you are using a valign attribute for align and valign.

#5, centering the item won't solve the problem. I have a hard time putting the visual into text so you can understand what I mean, so here's page where you can actually see it. http://www.poems2u.com/1/b/imageview.htm

Ruth

Poster: Justice
Dated: Friday February 20 2004 - 3:45:53 GMT

Now I'm really confused. I don't ever use <tbody> tags in my code, and my align attributes are generally enclosed in quotes. The code, as it appears in my index.html file, is exactly this:

Quote:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<link rel="stylesheet" type="text/css" media="screen" href="Style Sheets/Christmas2.css" />
<head>


<SCRIPT language=JavaScript src="Menus/milonic_src.js" type=text/javascript></SCRIPT>
<script language=JavaScript>
if(ns4)_d.write("<scr"+"ipt language=JavaScript src=Menus/mmenuns4.js><\/scr"+"ipt>");
else _d.write("<scr"+"ipt language=JavaScript src=Menus/mmenudom.js><\/scr"+"ipt>");
</script>

<SCRIPT language=JavaScript src="Menus/menu_data.js" type=text/javascript></SCRIPT>
</head>
<body background="Backgrounds/12a4.gif">

<table border="0" bordercolor="gold" width="95%" cellspacing="0" cellpadding="2" cellborder="0" align="center">

<colgroup>
<col span="3" valign="middle" align="center" />
</colgroup>

<tr>
<td rowspan="2" width="15%" height="124" align="center"> <img src="Images/sh8_swb.gif" height="124" /></td>
<td width="70%" align="center" valign="top"><img src="Backgrounds/TitleBar.gif" /></td>
<td rowspan="2" width="15%" align="center"> <img src="Images/sh8_swb.gif" height="124" /></td>
</tr>

<tr> <td align="center" valign="bottom"> <script>
with(milonic=new menuname("Main Menu")){
style=menuStyle;

alwaysvisible=1;
orientation="horizontal";
position="relative";
itemwidth="10%";
menuwidth="10%";
overfilter="";
aI("text=Home;url=http://www.justiceknight.com;status=Back To Home Page;onbgcolor=#999999;offbgcolor=#E2E2E2;oncolor=gold;");
aI("text=Catholic;showmenu=Catholic;onbgcolor=#007100;oncolor=gold;offbgcolor=#00FF40;oncolor=gold;");
aI("text=Europe;showmenu=Europe;onbgcolor=#999999;offbgcolor=#E2E2E2;oncolor=gold;");
aI("text=Personal;showmenu=Personal;offbgcolor=#3582F4;onbgcolor=#0000FF;oncolor=gold;");
aI("text=Academic;showmenu=Academic;offbgcolor=#E2E2E2;onbgcolor=#999999;oncolor=gold;");
aI("text=Writing;showmenu=Writing;onbgcolor=gold;offbgcolor=#FFFF50;oncolor=white;");
aI("text=Messageboard;url=http://www.justiceknight.com/messageboard;onbgcolor=#999999;offbgcolor=#E2E2E2;oncolor=gold;");
aI("text=Special;showmenu=Special;onbgcolor=#FF0000;offbgcolor=#FF6666;oncolor=gold;");
aI("text=Links;url=http://www.justiceknight.com/links.html;onbgcolor=#999999;offbgcolor=#E2E2E2;oncolor=gold;");
}
drawMenus();

</script>
</td>
</tr>
</table>

<table border="0" bordercolor="gold" width="95%" cellspacing="5" cellpadding="10" cellborder="0" align="center">

<colgroup>
<col span="3" valign="middle" align="center" />
</colgroup>

<tr>
<td width="15%"><b><center> I hope you all enjoy the new medieval theme on the main page.</center></b></td>
<td rowspan="2" valign="top" width="70%"><center> <h2> Welcome! </h2>
<p> Justice Knight's Castle is currently undergoing a massive reconstruction. For now, enjoy the limited pages I have up. I will eventually get it all together. </center>
<p>
<table align="center" cellpadding="2">

<colgroup>
<col span="3" valign="middle" align="center" />
</colgroup>

<tr>
<td width="35%" valign="middle" align="center"> <h3> <u> Quick Site Links</u><p>
<a href="europe.html"> Europe Trip </a><p>
<a href="Catholic.html"> Catholicism<br>(Updated 1/10) </a><p>
<a href="Gametheory.html"> Game Theory <br> (NEW! 1/16) </a><p>
<a href="gallery/"> Photo Gallery <br>(Updated 12/12) </a></td>
<td width="30%" align="center"> <img src="Images/Peterkeys.jpg" height=375 /></td>
<td width="35%" valign="middle" align="center"> <h3> <u> Passion of the Christ </u><p>
Mel Gibson's movie Passion of the Christ opens on Wednesday, February 25. I encourage everyone to see the film. If anyone is interested, Sub Board is selling discount sneak-preview tickets for February 24.</h3></td>
</tr>
</table>

</td>
<td width="15%" align="center"> <h4>The Daily Mass Readings from EWTN </h4> <p> <a href="http://www.ewtn.com/Devotionals/inspiration.htm"> Click Here </a></td>
</tr>

<tr>
<td align="center"> <p><b> Lent begins with Ash Wednesday on February 25, and goes until Easter Sunday on April 11. Catholics are required to abstain from meat on all Fridays of Lent and Ash Wednesday, and to fast on Ash Wednesday and Good Friday. </b></td>
<td align="center"> <p><h4> The Weekly Standard </h4><p> <a href="http://www.weeklystandard.com"> Click Here </a></td>
</tr>
</table>

<table align="center">
<tr>
<td align="center"><div align="center">
<a href="http://pub19.bravenet.com/guestbook/show.php?usernum=1603273658&cpv=2">
<img src="http://images.bravenet.com/cp/guestbook.gif" border="0" title="Free Guestbook from Bravenet" alt="Free Guestbook from Bravenet" /></a> <a href="http://www.bravenet.com"><img src="http://images.bravenet.com/cp/bn-guestbook.gif" border="0" title="Free Guestbook from Bravenet" alt="Free Guestbook from Bravenet" /></a>
<p>
<script language="JavaScript" type="text/javascript" src="http://pub19.bravenet.com/counter/code.php?id=355872&usernum=1603273658&cpv=2"></script><p><h4><center> Copyright 2003-2004 by Justiceknight. <br> Prepare ye the way of the Lord.<br> <p> Menu system is made by <a href="http://www.milonic.com"> Milonic</a><p>This site is best viewed in Internet Explorer 6 under 1024 x 768 Resolution<br>If something looks awkward on your browser, e-mail me so I can fix it</center></h4></div></td>
</tr>
</table>
</body>
</html>

These errors might be on another page, but if so, I really don't know which one it is. I do have a tendency to flip the order in which I place my valign and align tags, so that might be it. I've looked over the existing index.html code, and it looks okay to me. As far as the image, I will try fiddling with it in Photoshop tomorrow.

Industrial Strength JavaScript and DHTML Menus

Problems with Menu in a Table Cell