CSS Different in IE

Hello all!

As normal, 90% of my frustrations are learning the CSS differences between IE and the rest of the world.

For instance, I’m working on a site layout, http://www.topsoftdesignstudio.com/devos

In IE ( I have 8 ), I am getting a margin-bottom like gap on the main center page content area. This anomoly does NOT show up in Firefox, Chrome or Safari.

Here is my CSS and HTML. The last time I posted here my only the only response I got was to question my use of this and that. If I could get a response to lead me in a good direction rather than calling me a doofus I would so much appreciate your help!


#page { width:1000px; background-color:#c9c9c9; position: relative; top:-5px; }
	#page-body-top{ width:1000px; height:14px; margin:0; padding:0; background:url(../images/page-body-top.png) no-repeat; position:inherit; border-top:1px solid; border-bottom:1px solid; }
	#page-body { width:1000px; background:url(../images/page-body-bkg.png) repeat-y; }
		.content { margin-left:20px; }
	#page-body-bottom{ width:1000px; height:14px; background:url(../images/page-body-bottom.png) no-repeat; }


<div id="page">
        <div id="page-body-top"></div>
            <div id="page-body">
            	<div class="content">
            		{$content }
            <div id="page-body-bottom"></div>


Glad you fixed it yourself and sorry we were a bit slow in answering.

I fixed it before you were able to look but thank you so much for trying.

Happy little overflow:hidden fix for ie works wonders!!

I’ve looked your page with IE8, FF3.6 and Chrome. The page looks the same. Can you be more specific about the problem? Could you attach a screenshot?