Help me fix this DIV height problem!

[sama]

Hello,

The following is the main page for a site I'm working on: LINK (http://www.uwo.ca/biology/BUGS/new/index.html)

I can't make the left menu spacer to work. Basically, I made a DIV at the bottom of the last button (div id="stem"), and I'm trying to make it fill the rest of the height of the column. It doesn't want to work though, and I have no idea why.

I tried making the height of the "stem" DIV 100% and a bunch of other things, but they all act funky and none does what I want.

Note: Open the link with Firefox. The page doesn't look right at all in IE (I don't care for IE right now).

I hope I have explained my problem clearly enough. If you click a few of the links to the left, you will see what I mean by the menu spacer not behaving correctly.

[BetaWar]

Just wondering, what IE are you using? Because it looks okay in IE 6.

Looking at it the problem is you CsS, here you have:


#stem {
min-height: inherit;
background-color: blue;
}

Which is good for the height, but does not tell it how wide to make the div.

I would try something like this:


#stem {
width: 10px;
min-height: inherit;
background-color: blue;
}

To start out with and see if that helps, you may need to change the number to the width of the plant stem that you have in the background image of the menu; which may or may not be greater than 10 px.

[sama]

My fault for not providing the proper CSS file.

I have updated it, and you will see what I mean now. The CSS has been changed to:


#stem {
height: 100%;
background-color: blue;
}I made the height to "100%" so you can get an idea of what I want it to do, and you will also see that, for some reason, it's not quite working (it doesn't fill to the bottom like it should).

Click on a few of the links to the left to view it in different page heights to get an idea of what I mean. The "People" link is a good one. As you can see, it doesn't fill properly to the bottom as it should, while with the other links, it stretches the size of the column far beyond what it should be.

Also: the "blue" colour is just so you can see what is going on (for troubleshooting). The actual colour is supposed to match the backdrop (#dbfebc), to create the illusion of a stem on its right...


Just wondering, what IE are you using? Because it looks okay in IE 6.
I am using IE7. The bottom looks screwed up, but at least it doesn't necessarily stretch the column far beyond what it should! But I'm not basing my bug-testing on IE... it's much less standards compliant than is Firefox.

EDIT: I've been playing around with the "100%" thing, and it seems to have zero effect on how the page is displayed at all. I am very confused.

[BetaWar]

Okay I believe that I have found your issue. The menuColumn is not given a specific height to go for so it is giving th estem height as little as possible (most standard heights are about 20px). If you change this:


#menuColumn {
width: 83px;
float: left;
background-color: #dbfebc;
height: inherit;
}

To this:


#menuColumn {
width: 83px;
height: 100%;
float: left;
background-color: #dbfebc;
height: inherit;
}

I believe your problem will be solved.

Thanks for changing the stem color, that really helped me to find what you were talking about.

[sama]

I tried it, and it didn't work. :upset: I appreciate the help though!

I changed the CSS file back though, for future people trying to help.

[sama]

*bump*

I have modified the CSS since my last post somewhat, but it is still not working.

Help still needed!

Again: the problem is that the blue area (DIV "stem") is a fixed height for some strange reason.