Overflow: hidden not working in ie7

I am having a problem with overflow: hidden; not working in IE7. The design entails three fixed columns (two of which are contained within another div) and a footer with clear: both; set. I have used the equal height columns technique described here: http://www.ejeliot.com/blog/61. For some reason in IE7 overflow hidden is not working and the sidebar as well as the containing div are being driven the full 2000px down, and appear under (under as in "as if on another 'layer' ") the footer.

It renders perfectly in firefox.

here is the relevant code for the sidebar:

#sidebar {
width: 248px;
padding: 5px 15px 18px 7px;
padding-bottom: 2000px;
margin-bottom: -2000px;
margin-top: 20px;
}

the containing div for the other two columns:

#mainContent {
width: 530px;
float: right;
z-index: 1;
}

and the outer "wrapper":

#allContent {
width: 804px;
margin: 15px auto 10px auto;
clear: right;
overflow: hidden;
position: relative;
}

many thanks in advance for help with this tricky (to me) problem!

 

heh - did i not give enough information or are you guys stumped too?

 

Not so much stumped, as not enough info. CSS tells how to present the html elements, and without the html, it's not much use. Can you post a link to the page? It would be good to see the bug in action, and have the complete code to work with. Even better would be a link to a minimal test case that exhibits the issue.

cheers,

gary

 

Without thinking about it too hard, I believe this is going to be the IE bug where it expands an element to contain a floated one. This is an IE bug you will have to work around.

 

http://arcadiagasstorage.com/bugtest/bug_test.htm

here is a somewhat toned down version illustrating the bug. I tried to create a much simpler one but could not seem to replicate the problem - i have done some somewhat tricky css in order to acomplish the visual design and not have to use sliced images for the header - i think the problem may be there somewhere but am not sure..

 

You've got a lot of problems here (which are not all related). First, you've set the body to a small width (802px) and centered it. There's no reason I can think of to do that, because now the "html element" or root element (which IE treats differently than other browsers) has to carry the background color and any images. Let the body do that. Then inside the body you have a box (allContent) which is BIGGER than it's container (the body)! Howd'ya think something 804px wide (plus margins!) will fit in a box that's 802 px wide? That browsers can figure out what you mean is the miracle of browsers, but why make them guess?

Okay, what's this?

	#sidebar {
	  width: 248px;
	  margin-top: 20px;
	  padding: 5px 15px 18px 7px;
	  [b]padding-bottom: 2000px;
	  margin-bottom: -2000px;[/b]
	  background: #a6a9d4;
	}

Code (markup):

Cause yes, the sidebar is indeed longer than the rest of the page. Aardvark even shows it.

And now I wonder... I see content is floated right... I didn't see anything right away floated left* but I have just been told that IE does not clear floats going in both directions.

You should go through and validate the code on the example you made first, and see what you get, then go bug-hunting. Generally the solution you find can also be applied to your more complicated page.

*edit content-left is floated left.

Ie doesn't need overflow: hidden to contain floats, as it illegally does that anyway whether you want it to or not. Overflow: hidden is for browsers who correctly let the floats hang out. So I don't think it's overflow:hidden not working, it's the clearing that's not working...

 

"Without thinking about it too hard, I believe this is going to be the IE bug where it expands an element to contain a floated one. This is an IE bug you will have to work around."

I believe you are right. Does anyone know of a link for a fix, or does this bug have a name that i can google - can't figure out how to phrase the problem to make the goog give me anything useful.

 

"IE bug expanding container"
"IE css bug" (get all of them, they'll all plague you)
"IE enclose floats "overflow :hidden" "

This will get you your start.

 

Life becomes easier with a 1px height image that serves as background image for both, sidebar and content. You are taking the rough road.