IE not accomodating for size of expanding absolute div [Archive]

Click to See Complete Forum and Search --> : IE not accomodating for size of expanding absolute div

wood_tah

04-13-2006, 08:46 AM

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:

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

</div>
</div>
<div id="content">
<div id="contentBottom" />
</div>
</body>
</html>

And the relevant CSS is:

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!

drhowarddrfine

04-13-2006, 10:14 AM

I can't get any of that to work right.
You will never get IE to display like modern browsers without a proper doctype.
In HTML, there is no such thing as a tag ending as />. That is xhtml and is used to close a tag.
So, close your divs with </div>

WebJoel

04-13-2006, 07:19 PM

I can't figure out why in your *css you have several "position:relative" selectors with no declaration(s) to make it do anything. The only other use for "position:relative" without a "top:#px; bottom:#px;" would be to get proper control on a "z-index:#;" declaration in IE under some circumstances.

Ending a DIV with "/>" oddly enough seems it might work, at least without a !doctype, but that is essentially ending the DIV before taking any action to it's contents so maybe not. I suppose that a Div like <div style="clear:all; width:100%; height:1%;" /> would be as valid as <div style="clear:all; width:100%; height:1%;"></div> (used here only clear a previous float (and a 1% vertical spacer, for whatever reason), perhaps?, with nothing contained within this DIV, of course.
I'm interested to see what others more proficient in css have to add. :)

I noticed in the css part:
border: 1px solid black; border-top: 1px solid black; border-right: 2px solid black;
Note that the BOLD text, it works, but is redundant because the RED selector/declaration has already defined everything you need to have a 2px solid black border on all four sides of this DIV anyway.
If you don't believe me, take out just the red text and you'll have a 2px solid black border on the top and on the right only, on that DIV. "border:" means "all four sides". 'Nuff said. You don't need to then add "border-top" or "border-right" (unless they are different, but then you've got selectors & declarations doing/undoing things to each other... unnecessary and over-complicated. :)

And upon having said all of this, if this is a 'navigation menu', I'd do it with <ul><li> etc... It would be a lot simpler and probably easier to understand/edit/style.

wood_tah

04-14-2006, 11:32 AM

Thanks for the replies. I should have stated that I did not post the complete code, I was just posting the layout to try and give you a feel for what my structure was like. I actually have content in the divs, but b/c I am pretty confident that it didn't have any effect on what was giving me trouble, I didn't include it.

The position:relatives are used b/c I have abosultely positioned items within them and I was defining the container that the absolutely positioned elements will be positioned.

The duplicate border declaration was just an error on my part. I had to re-type all of the code for proprietary reasons, and also b/c I don't have an internet connection from the computer I am doing my coding on. Because of my re-typing, I left some things out (only things that I am sure have no effect on my problem).

Having said all of that, and looking at the basic structure of what has been posted, can anyone notice anything that would give them any idea why I am having my trouble? Does anyone know of any known issues about IE and not accomodating expanding content that is absolutely positioned?

If I have to, and can try and re-create a working example, but it will take me some time ...