menu busts out of table on browser resize [solved]

nwilcox · Post by **nwilcox** » Thu Oct 26, 2006 10:18 pm

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!

kevin3442 · Post by **kevin3442** » Sun Oct 29, 2006 6:44 am

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

nwilcox · Post by **nwilcox** » Sun Oct 29, 2006 5:42 pm

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

I'll try that and let you know

thank yoU!

vikenk · Post by **vikenk** » Sun Oct 29, 2006 6:07 pm

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

nwilcox · Post by **nwilcox** » Mon Oct 30, 2006 3:41 pm

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

nwilcox · Post by **nwilcox** » Mon Oct 30, 2006 3:47 pm

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

vikenk · Post by **vikenk** » Mon Oct 30, 2006 4:24 pm

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

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

<!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/ ... xmodel.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!

nwilcox · Post by **nwilcox** » Mon Oct 30, 2006 4:29 pm

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)

nwilcox · Post by **nwilcox** » Mon Oct 30, 2006 4:42 pm

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

ack!

vikenk · Post by **vikenk** » Mon Oct 30, 2006 5:28 pm

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?

nwilcox · Post by **nwilcox** » Mon Oct 30, 2006 5:37 pm

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

Post by **John** » Mon Oct 30, 2006 7:59 pm

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

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

nwilcox · Post by **nwilcox** » Mon Oct 30, 2006 8:13 pm

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!

nwilcox · Post by **nwilcox** » Mon Oct 30, 2006 8:54 pm

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!

Post by **John** » Mon Oct 30, 2006 10:16 pm

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.

nwilcox · Post by **nwilcox** » Mon Oct 30, 2006 10:21 pm

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

vikenk · Post by **vikenk** » Mon Oct 30, 2006 11:07 pm

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.

nwilcox · Post by **nwilcox** » Mon Oct 30, 2006 11:20 pm

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.

Post by **Ruth** » Mon Oct 30, 2006 11:21 pm

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

nwilcox · Post by **nwilcox** » Mon Oct 30, 2006 11:32 pm

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]