Menu
I have a site that has an absolutely positioned nav menu div. Each item in the div can be clicked on to show its subitems. The problem I am having is that if I go and open all of the main items in the div to show their corresponding subitems, in IE, the viewport is not correctly resizing itself to show all of the options. A scroll bar will appear for the body, but when you scroll to the bottom, you lose the bottom part of the menu (meaning it is not scrolling enough to show all of the menu). I don’t have this problem in FF or NN, where the last item in the nav menu is at the very bottom of the viewport, which is what I would expect.
Has anyone ever encountered a similar problem? Does anyone have any suggestions for correcting this?
My layout is as follows:
[CODE]
<html>
<body>
<div id=”header” />
<div id=”subHeaderWrapper”>
<div id=”subHeader”>
<div id=”userLoggedIn” />
<div id=”currentLocation” />
</div>
<div id=”statusMsg” />
<div id=”mainNavMenu”>
<div class=”mainMenuItem”>
<div id=”xxx_subHeader” class=”submenuDiv”>
<div class=”submenuItem” />
</div>
</div>
<!– mainMenuItem div repeats for all of the top level menu items –>
</div>
</div>
<div id=”content”>
<div id=”contentBottom” />
</div>
</body>
</html>
And the relevant CSS is:
[CODE]
html, body { margin: 0; padding :0; }
#header { position: relative; height: 91px; }
div#content { margin-left: 176px; padding-left: 5px; padding-right: 5px border-left: 2px solid black; }
div#subHeaderWrapper { position: relative; }
div#subHeader { position: relative; border-bottom: 3px solid black; border-top: 1px solid black; height: 25px; }
div#subHeader div#userLoggedIn { position: absolute; top: 20%; left: 0; margin-left: 0.35em; }
div#subHeader div#currentLocation { position absolute; top: 20%; right: 0; margin-right: 1em; }
div#mainNavMenu { position: absolute; top: 0; width: 175px; margin: 26px 0 0; border: 1px solid black; border-top: 1px solid black; border-right: 2px solid black;}
Any help is greatly appreciated!