IE ignores margin-top and margin-bottom on a div

Need a hand getting IE to mimic the (correct) behavior of Firefox

[Fuzzplug Jones]

Hey there, I'm doing a site where I want to have an absolute-positioned div with overflow: auto. I've found that in this design, setting the "height" property of the div to a percentage gives unpredictable results as it bumps into absolutely-sized elements under certain conditions (however it's pretty much pixel-perfect in Firefox and IE/Win). I'm trying to go through the site and make it work a little better.

In Firefox, I noticed that commenting-out the height property and using margin-top and margin-bottom on the div makes it perfect, and rock solid. IE seems to ignore the margin-top and margin-bottom, and simply makes the div as big as the content (which overflows the page, which is unacceptable in this design).

Does anyone know a way to make IE and Firefox behave the same when it comes to this?

The page in question is here: <snip>

Thanks

[edited by: encyclo at 1:22 am (utc) on Aug. 7, 2007]

[doodlebee]

Yes, use a conditional comment to serve up ther stuff that works for IE. Firefox will ignore it, and both will render it exactly how you want it to.

[Fuzzplug Jones]

Perhaps I wasn't exactly clear...

... I need to know WHAT will make IE behave the same in this situation.

[Fuzzplug Jones]

Is there any way to make IE respect margin-top and margin-bottom on an absolutely positioned DIV?

[alias]

Try using PADDING instead of MARGIN (it should work but it doesn't always suit your needs), or try setting position:relative to the element, and see how it affects the view then.

[doodlebee]

did you try "overflow:scroll" for your div.content? Instead of "overflow:auto"? In IE, "overflow:auto" will do just that - make the container an automatic height to the browser window, and nothing more - it'll just cut off the rest. "Overflow:scroll" tells it to scroll.

To make this work in IE only (if you like how it is now in Firefox) just serve up the "overflow:scroll" for IE using a conditional comment. Then firefox will stay the same, and IE will scroll the content.

[Fuzzplug Jones]

overflow: scroll looks exactly the same in IE except it adds an unused scroll bar - the content still stretches all the way down past the viewport, and since the div has stretched to fit the content, the scrollbar is visible but useless.

What this comes down to I think is IE needs a height parameter for the div, but i can't give it one, because the height is, explicitly, the height of the viewport minus top and bottom margins. Firefox seems to understand (assume?) that without a height declaration, the div assumes 100% height, minus margins. IE simply stretches it out past the viewport.

I would just make it a normal scrolling page with "CSS Frames" for top and bottom except the background graphic resizes with the window, meaning the page physically cannot scroll, because that image is an img tag in a div with height: 100%. Maybe I'm trying too many Stupid CSS Tricks in one page? I hope not, it looks pretty smashing (and unique) in Firefox.

[Fuzzplug Jones]

Actually, setting height: 100% ALMOST works. It seems to respect the top margin but not the bottom. Also the bottom of the scrollbar is missing, leading me to believe that the div is 100% of the viewport (in pixels) hight, PLUS the margins. This behavior seems to be identical in IE and Firefox. The page is hacked up that way currently. Maybe it'll give someone an idea?

[Fuzzplug Jones]

Still no idea?