Height problem in IE 7

[creelove]

Hey - I'm hoping someone can help me with a small issue. I have a menu bar on the right of my page that can expand, when it expands - in IE 6 my CSS works and the page automatically adjust. But, in IE 7, the menu expands but the page doesn't. Does anyone know why that it? I'm using the same code. thanks!

[cmarshall]

Can you post any example code?

I'm afraid that I have trouble even picturing what is wrong.

[creelove]

Okay, I just re-read my post and you're right I didn't expalin it correctly. For one my navigation bar is on the left side of the page, if you click a plus sign on the label, it expands downward to expose more item to choose from:

Top Level
- item 1
- item 2

Well, once the menu opens my page is not automatically adjusting to the new length with the menu opened. The menu ends up extending past my footer. Now in IE6, the page automatically adjusts meaning the footer stays at the bottm and the menu doesn't go past it. Right now for the background I have the height set to 759px, and in IE6 that works fine. But since it's not working in IE7 I've tried auto and inherit and neither of those work. Is that a little clearer? I'm sorry about not being able to post the code - I'll have to print it and re-type because of where the original code is located.

[cmarshall]

Again, code would be helpful.

I'll lay odds that you are using a float:left/right property.

When you do that, it "decouples" the content of a container from the container itself.

What I do is add a "breaker" <div> after the floated items to ensure the container keeps up.

To wit:

<div id="container" style="border:1px solid black;height: 20px">
<div id="item_1" style="float:left">
Item 1
Other menu stuff...
</div>
<div id="item_2" style="float:left">Item 2</div>
</div>

The items may extend beyond the div#container (Which can actually be useful for dropdown menus).

Here's how you use a "breaker":

<div id="container" style="border:1px solid black;height: 20px">
<div id="item_1" style="float:left">
Item 1
Other menu stuff...
</div>
<div id="item_2" style="float:left">Item 2</div>
<div style="clear:left"></div>
</div>

By the way, welcome to WebmasterWorld.

[creelove]

I found the problem...in the outermost container (#expand_menu) for my left menu I didn't have the height set to "auto". What's crazy is that it works just fine in IE6 w/out it, but it caused it not to work in IE7....whatever, as long as it works. Thanks for the help cmarshall!

[cmarshall]

Huh...I always thought auto was default.

Well, ya learn something new every day. Glad it worked out.