menu busts out of table on browser resize [solved]

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

menu busts out of table on browser resize [solved]

Poster: nwilcox
Dated: Thursday October 26 2006 - 22:18:18 BST

http://www.hearthview.com/

When the homepage is resized in browser, the menu stays fixed to its original position. Is there a parameter I can set to fix this?

I have the height of the table set to 100% of the page so I wonder if that might be causing something to happen with the menu as well.

Thank you!

Poster: kevin3442
Dated: Sunday October 29 2006 - 5:44:59 GMT

Just a quick thought. I believe the recommendation for tables is to load the menu scripts in the page's body, rather than the head. Try moving the <script> tags that load the base menu code and your menu_data.js file into the body... right after the opening <body> tag.

If that doesn't work, we'll try a different approach.

Kevin

Poster: nwilcox
Dated: Sunday October 29 2006 - 16:42:16 GMT

oh okay I thought we were supposed to place everything in the head tags...

I'll try that and let you know

thank yoU!

Poster: vikenk
Dated: Sunday October 29 2006 - 17:07:30 GMT

Hello,

Well, it seems that you have the menu setup properly, even though the Scripts are placed in the HEAD. Moving them to the BODY would be preferred. I have one suggestion. I see that you've set the menu width to 481px. I think what's happening is this: When the browser window is resized smaller, the table width becomes smaller than 481px, causing the menu to pop out.

Try setting the menu width from 481px to 100%. That way it will grow and shrink with the table.

Try it out and let us know how it works.

--
Viken K.
http://www.vikenk.com
http://www.sayatnova.com

Poster: nwilcox
Dated: Monday October 30 2006 - 14:41:16 GMT

I've placed the menu inside the body tag as suggested but it is still moving when I resize the browser

Poster: nwilcox
Dated: Monday October 30 2006 - 14:47:56 GMT

vikenk wrote:

Try setting the menu width from 481px to 100%. That way it will grow and shrink with the table.

removed the height attribute and and the width attribute entirely and the menus still move...

any more suggestions?????? :?:

thank you

Poster: vikenk
Dated: Monday October 30 2006 - 15:24:57 GMT

Hi,

OK....I grabbed your code and played with it on my computer. I noticed that the menu coming out of the table was NOT a problem in Firefox, only in IE. I figured that it was a normal IE quirk. Internet explorer treats tables and div's slightly different from other browsers.

Your webpage did not have a DOCTYPE declaration, so I added one and the problem went away! No more busting out of the tables. I added this to the top of the page before the HTML tag.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

So, it should now look like this

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
<title>Hearthview Residential: Welcome to Hearthview Residential, Inc.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

The DOCTYPE will force IE to follow the standard set of HTML parsing rules. Without the DOCTYPE, IE is free to interpret the HTML code any way it wants.

Add the DOCTYPE to all your pages. You don't have to use the Strict DOCTYPE, you can use the Transitional, if you'd like. To read on the differences between the DOCTYPES, read here http://www.alistapart.com/articles/doctype and here http://css.maxdesign.com.au/listamatic/about-boxmodel.htm

Beware, though! Adding a DOCTYPE may make you have to slightly redesign your pages because of the difference in the TABLE and DIV renderings.

Your website is written very well, so I assume you're an experienced designer and you probably already know all this. If that's the case, then I apologize if it seems like I'm treating you like a beginner! :oops:

Poster: nwilcox
Dated: Monday October 30 2006 - 15:29:06 GMT

thanks vikenk! I'll give that a shot

I didn't actually "slice and dice the page" originally, I've been doing edits here ant there, adding elements as requested. Unfortuntely it is all table based (not something I would have done myself)

Poster: nwilcox
Dated: Monday October 30 2006 - 15:42:06 GMT

okay that fixed it but now the home page isn't vertically aligned center...

ack!

Poster: vikenk
Dated: Monday October 30 2006 - 16:28:44 GMT

Hmmm...I'm not an expert, but I did a Google search and came up with this:

http://apptools.com/examples/tableheight.php

Maybe you can use it?

Poster: nwilcox
Dated: Monday October 30 2006 - 16:37:23 GMT

that fixed the vertical spacing but we're back to the original problem yet again... the menu is breaking out of its containing table cell and staying "fixed"

ackkkkkkkkkkkkkkk :cry:

Poster: John
Dated: Monday October 30 2006 - 18:59:31 GMT

Looks like you've removed the doctype suggested by vikenk. It's an item that should really be in place. However, at this point I'm not sure I'd go strict. Try...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

...as the first line of your code.

Also, just for fun, try changing the suffix on your data file to .asp; i.e., menu_data.asp.

Poster: nwilcox
Dated: Monday October 30 2006 - 19:13:14 GMT

okay doctype is set, the menu code has been moved into the body tag

added the margins as suggestion to get the design to stay at 100%

but .. again, the menu is busting out of the table cell!

Poster: nwilcox
Dated: Monday October 30 2006 - 19:54:14 GMT

nwilcox wrote:

okay doctype is set, the menu code has been moved into the body tag

whoops! okay I've added the margins as suggestion to get the design to stay at 100%

but .. again, the menu is busting out of the table cell!

Poster: John
Dated: Monday October 30 2006 - 21:16:08 GMT

I'm not sure exactly what, "...the menu is busting out of the table cell..." means. FWIW, I'm not seeing anything unusual in IE7 or FF2 (both release versions). I no longer have IE6 loaded. Can you load up a screen shot?

Also, minor point, our instructions do not call for the comment tags you have in the main menu script. May or may not mean anything.

Poster: nwilcox
Dated: Monday October 30 2006 - 21:21:16 GMT

John wrote:

I'm not sure exactly what, "...the menu is busting out of the table cell..." means. FWIW, I'm not seeing anything unusual in IE7 or FF2 (both release versions). I no longer have IE6 loaded. Can you load up a screen shot?

Also, minor point, our instructions do not call for the comment tags you have in the main menu script. May or may not mean anything.

here is a screen shot in IE 6... (it is actually fine in Firefox.. no surprise)

...image removed...

when you resize the browser window to make it bigger or smaller, the menu stays fixed to the position it was when the window first loaded the page. When the browser repositions the contents of the window upon reisze, the Milonic menu doesn't move with it. It "breaks out of the table cell" and just sits all by itself.. in this case way above where it should be...

Poster: vikenk
Dated: Monday October 30 2006 - 22:07:25 GMT

That's weird, it doesn't do that for me. I use IE6 / Windows XP

See this screenshot, taken at 1024x768 resolution. See how small your window is. The menu is intact. Not sure why it still happens for you, though.

Poster: nwilcox
Dated: Monday October 30 2006 - 22:20:57 GMT

it doesn't happen when the browser is that small. If you drag the bottom of your browser window down and watch what happens...

drag it to the full size vertically... as soon as you move it down, the menu will stay where it was when the page first loaded.

The weird thing is when the browser is full screen.. then I resize it, the menu stays in place. If the browser is not full screen and I start moving it aroud, it screws up and pops out of the table.

Poster: Ruth
Dated: Monday October 30 2006 - 22:21:20 GMT

Hi,

I get the same thing as Vikenk on IE5.5 800x600 and 1024x768 which I then used the arrow to make the window smaller in both cases. The menu stays just fine. Same thing on IE6 on 1024x728

Ruth

Poster: nwilcox
Dated: Monday October 30 2006 - 22:32:17 GMT

here is another example: The two rows of buttosn here are two separate Milonic menu calls so that is why I'm even more concerned. It is happening to both menus. Windows XP with IE6, all windows hotfixes, etc etc

[/img]

Poster: vikenk
Dated: Monday October 30 2006 - 23:31:53 GMT

Sorry, nwilcox, but I just can't duplicate your problem. No matter how I manipulate it, I just can't get it to break out of the table.

I go to http://www.hearthview.com and no matter how I resize the window, it just won't happen?! I've looked at your code and it all seems OK.

This may be a stab in the dark, but what is that toolbar that your using? Is it remotely possible that the javascript used to resize the window is affecting the menu?

All I know is that I can't get it to break out of the table...

Poster: Ruth
Dated: Monday October 30 2006 - 23:33:57 GMT

Hi,

I'll report to Milonic in case they can do anything, but the problem is in the wrapper style set at height:100%;

I don't do enough css to figure out how you can get the actual orange layout to be in the center of the page at higher resolutions without using that height. I tried removing that and setting the table at 100% but it still did the same thing. IE5.5 and IE6 and I went from resolution setting 800x600 to 1280x1024 then resized the browser using the js resize function I have. [I think it's the same you have

]

Ruth

Poster: nwilcox
Dated: Tuesday October 31 2006 - 1:21:15 GMT

thanks everyone for the help.. I guess I'll just not 100% center the design. With the DOCTYPE it has messed everything up.. but that is IE for you...

I may try to redo the 100% centered design and see if I can comeup with another solution.

much appreciated!

Poster: Ruth
Dated: Tuesday October 31 2006 - 5:35:33 GMT

Hi,

Well, some good news....maybe. I could only test in my old browsers IE5.5 and FF1.0.7 but it did work in them, as good as I could get it.

Here is a zip with a new page and stylesheet. I made no changes in how it looks, but so you know what I did, I removed the outer wrapping table and replaced it with a div that has a class coded in the stylesheet. It's the last thing in the new sheet.

Everything was in the same folder on my computer so for you to see it with the images and stuff you need everything in the same folder or you need to change all the links

edit: link removed

This is where I found the info for this IGather Info

You really need to test in other browser to see how this works, at least you know it works in the old FF and IE

Ruth

PS: EDIT: I forgot to ask that you let me know when you have this so I can remove it from my site

Poster: nwilcox
Dated: Tuesday October 31 2006 - 14:11:22 GMT

got it! I'll take a look later today.

Thanks for the help

You can delete it now

Poster: vikenk
Dated: Tuesday October 31 2006 - 14:32:49 GMT

nwilcox wrote:

With the DOCTYPE it has messed everything up.. but that is IE for you...

Hi,

Just as an FYI: I wouldn't avoid using the Doctype because it screwed things up. Using the doctype will actually increase cross-browser compatibility and greatly reduce problems with things not lining up in one browser vs another.

The problem here is that the page seems to have been designed without a Doctype in the first place, so introducing one after the design forces some adjustments. The page coding is actually very well written, IMO. It's just missing the Doctype.

Just my two cents :>)

Poster: nwilcox
Dated: Tuesday October 31 2006 - 14:45:53 GMT

oh I know

again I didn't design or layout this site. I'm just stuck with it now trying to make the updates.

Poster: nwilcox
Dated: Tuesday October 31 2006 - 15:05:26 GMT

Ruth wrote:

Hi,

Well, some good news....maybe. I could only test in my old browsers IE5.5 and FF1.0.7 but it did work in them, as good as I could get it.

edit: link removed

This is where I found the info for this IGather Info

thanks Ruth! IT WORKS WOOOT!

wow that is really wild looking CSS. It is cross browser as far as Mozilla and Opera (the 3 other browsers I have to test on)

Industrial Strength JavaScript and DHTML Menus

menu busts out of table on browser resize [solved]