Horizontal menu pushes main content downwards

Question

I created a website for my nonprofit with a spry horizontal menu inside the header.  I then created submenus for several of the tabs.  On one of the pages the submenus drop down into the main content space.  On all of the other pages, the submenus inexplicably push the main content downwards - as though they are expanding the header.  I have set the vertical size of the header in all cases at 175 pixels.  All of the spry menus use the same global style sheet and I've gone through them line by line and see no differences. The wrappers are the same when I click on the header.  Do you have any idea why a spry submenu might be pushing the header (that it is inside) downwards rather than just overlapping the main page the way most subheaders do?
Thank you so much!

Answer 1

Hiya, Karin,
Nice to hear back from you.
Without getting into the mishigas (don't know how to spell that...don't actually speak Yiddish)... of the templates, etc., here are a couple of fixes for the Events page (and any others you worked on the same way):
There's a line up in the head (at least in my copy of your page) that looks like this: <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> You can take that out, I would comment it out at least, like this: <!-- <%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%> -->
When you save the page, you should be getting a javascript error...a widget has been removed from the page, etc., etc....when I got the error, it took me to this code in the page, which should also be removed (notice that I commented it out). Leaving javascript in a page when the widget itself has been removed leads to errors (!):
<!--var MenuBar2 = new Spry.Widget.MenuBar("MenuBar2", {imgRight:"../SUDAN/SpryAssets/SpryMenuBarRightHover.gif"});-->
The thing that is pushing your submenus into your content (in Internet Explorer) is the lack of 'hacks' to make it work correctly in IE browsers. So, copy this code as is to the bottom of your SpryMenuBarHorizontal.css stylesheet:
BROWSER HACKS: the hacks below should not be changed unless you are an expert
/* HACK FOR IE: to make sure the sub menus show above form controls, we underlay each submenu with an iframe */
ul.MenuBarHorizontal iframe
    position: absolute;
    z-index: 1010;
    filter:alpha(opacity:0.1);
/* HACK FOR IE: to stabilize appearance of menu items; the slash in float is to keep IE 5.0 from parsing */
@media screen, projection
    ul.MenuBarHorizontal li.MenuBarItemIE
        display: inline;
        f\loat: left;
        background: #FFF;
By putting them at the bottom of your stylesheet, they will correct and override any styles that they need to fix...
Regarding your trials and tribulations with templates (ttttt), I heartily sympathize. I actually love templates, myself, but it took a while to 'get into' them. Once you have them set up they're fine, but getting to know them well takes a little work. There are those on the Forums who believe in using Server-Side Includes, but I have not used them, and the non-profits I design for usually are not on servers that support PHP or SSI. So I have gotten to know templates reasonably well.
It's too bad you have a hybrid running now of templated and untemplated pages; a templated site is ultimately much easier to maintain. But I trust you will get back to it. The difficulties you describe were probably not due to the templates, but to the lack of IE hacks (see code above that you will restore to the stylesheet).
Please let me know if these measures work! I will send you a private message in addition to this response.
Best wishes,
Beth Marshall