content over lapping footer in ie

I made a few change to my css and ie6 started drawing the content in a column wrong, I made the changes on Friday and didn't check it in ie until this morning so I'm not sure what did it. It is not stretching the column and is drawing over the footer below. Firefox draws it correctly. Where is the error?

html: http://www.networkenvironmental.com/nes2006/index.htm
ccs: http://www.networkenvironmental.com/nes2006/nes.css

Thanks in advance

My guess is you can't specify the height for the right column. If you leave it fluid, the footer will be pushed down (which is what you want, right?)

Nope that doesn't do it. It just makes the overlap worse. I set the rightcol up to be a min-height so that the full background image always draws even if the content in the leftcol is not long enough to push both down. Thanks for the suggestion though.

OK.

Q: why is #rightcol float: left? What if you changed that to right?
Then in theory, the footer having a clear: both value should solve your issue.
If this is not an optiion for whatever reason, maybe try changing clear: both to clear: left in your footer.

Q: why is #rightcol float: left? What if you changed that to right?
Then in theory, the footer having a clear: both value should solve your issue.
If this is not an optiion for whatever reason, maybe try changing clear: both to clear: left in your footer.

Lol, that was the first thing I tired and again no help.

heh... well....
I'm out of ideas, other than to go back to my original thought -- if you just left the min-height in for the rightcol, and removed the rest of the height stuff??

The rest of the height stuff is a hack for ie. I tried that too. No go. I don't even know what div is causing the issue at this point. I wish I knew what changes I made Friday. I know they were minor and I bet you it turns out to some mundane detail. I really do appreicate all the ideas.

Well I tried a bunch of stuff and have come to the conclusion that no matter what you do IE will remain in quirks mode since your HTML is invalid.

html: http://validator.w3.org/check?uri=http://www.networkenvironmental.com/nes2006/index.htm
CSS: http://jigsaw.w3.org/css-validator/validator?uri=http://www.networkenvironmental.com/nes2006/nes.css

After that gets fixed up, you'll be closer to narrowing down the problem. But it is a head-scratcher. You'll have to clean up the Google search table to validate as XHTML.

It's all valid now. Man there were a lot error in the search portion. Still drawing incorrectly in IE and is still in quirk mode. I'm at a lost. I really appreciate the help bustamelon. There must be something that is causing IE to get confused.

You're welcome. Sorry it didn't get you anywhere. I'm sure you're right about it being something really simple. I guess you don't have a backup of the old version (from before the change)? Oh well. Step away for a while and try again.

peek-a-boo bug in IE it looks like.

try this:


#footer {
clear: both;
background-color: #666666;
color: #fff;
padding: 15px;
border-top: 10px solid #27425c;
font-size: 10px;
position: relative;
}


all this is based on the code you have online right now.

Thanks! That fixed that the overlap issue, but the border-top is not drawing and the size of the footer is drastically different in IE. Is there some other hacks that I need to look into to make it work in both?

All (or most) of the notorious IE bugs in one convenent reference:

http://www.positioniseverything.net/explorer.html

I was able to fix the top border in footer not drawing by adding a clearing div, but I went through those hacks and it didn't seem to fix my problem with the footer drawing incorrectly in IE. I just can't figure out why the footer is drawing longer and without the bottom margin that I set for the container div. I updated the code to the latest revision if you guys would take one more look and see if you see anything that jumps out at you. Again Firefox seems to draw it just fine...

thank is advance