working on website, IE and Firefox doing things differently

[hokeyplyr48]

I'm making a website for my ROTC at my college and I'm using CSS. I have a menu bar on the left and a content section on the right. They are in two separate div's and i'm trying to get them to match up at the bottom.

the menu div stops halfway because the menu doesn't go down all the way. so i set the height to a percentage to try and match up with the content section. (or exact height they're both screwed up)

so here's the two images:
firefox:


IE:


as you can see there's a difference and I can't figure out how to make them match.

any ideas?

EDIT: http://people.rit.edu/~ijs4097/rotc/ View it in firefox and then IE and see the huge difference. I usually just throw everything in tables and it works perfectly. guaranteed. no questions asked, no matter what browser. But I used div's this time because they're supposedly so much better and it's just working great so far as you can tell. I really see the reason to switch over...

[ViN86]

yea ive had this problem before as well. check your IE code really carefully. if you can fix it in IE it will be fixed in FF when you copy/paste the code. IE is much more sensitive to mistakes than FF is.

i suggest using Web Developer Tools Add-On for Firefox. it will display any errors you have in HTML/CSS and any warnings.

once again, if you fix it in IE, in my experience, the problem will be resolved in FF as well.

[hokeyplyr48]

hmm. I have both my CSS and my HTML validated without errors. (there's 4 errors on the HTML page but thats because it doesn't like the way the flash is put in)
so difficult...

[fivefeet8]

Do you have an outer div around the 2 divs? Try creating an outer div with an exact height and width. Then put those 2 divs inside that div and set their heights to 100%.

[hokeyplyr48]

That's still not going to work because IE include padding in the pixel count while Firefox doesn't. So i still end up with the mismatched bottoms.

[LovingSticky]

Probably the easiest solution that will work in IE6, IE7, IE8, FF, Opera and Safari is to use background-image with dark-gray bar on #bottom div. Its height can be 1px only (thus very small), and use "repeat-y" on that background.

#bottom { background: white url(background.gif) top left repeat-y; }

Also #footer should be within this DIV, having "clear:both" property set.

[ViN86]

Originally Posted by LovingSticky

Probably the easiest solution that will work in IE6, IE7, IE8, FF, Opera and Safari is to use background-image with dark-gray bar on #bottom div. Its height can be 1px only (thus very small), and use "repeat-y" on that background.

#bottom { background: white url(background.gif) top left repeat-y; }

Also #footer should be within this DIV, having "clear:both" property set.

that's what i typically do.

[hokeyplyr48]

i decided against that since it's not very flexible.
http://people.rit.edu/~ijs4097/rotc/

that's it at the moment. the only problem is that when you shrink the window the header goes over.
So my two options are to not have the gray bar on the left go all the way down and the footer will stop with 10px from the bottom of the center column and the page becomes scrollable. OR the gray bar (for the menu) goes all the way down and the footer goes over everything and i lose the text below it.
and we got rid of tables for this.....makes sense to me

EDIT: both my CSS and html are completely validated btw

EDIT: i went with your background image thing and it's working fine so far. thanks for the advice!