- Don't put a height on container. There's no need. If you want a min-height of 20, use this code:
HTML Code:
min-height: 20px;
height: auto !important;
height: 20px;
IE 6 treats height like it was min-height (note: it does not treat width like this!), and ignores the !important keyword. Other modern browsers understand min-height and !important, so they don't screw up.
- Remove margin: auto; from your #container. It probably isn't messing with you, but it's completely redundant.
- You're mixing ems and px sizing with line-height versus font-size. Why?
- In #features height: 100% is worthless, and could well be part of what's messing with you. Relative CSS heights never work the way you'd expect/hope. Often the trick to getting a sidebar to look like it's 100% of the available height is to cheat (this only works with fixed width): make a background image 1px tall of your main content and sidebar backgrounds, and then assign it to a wrapper div (like container). As long as you defined backgrounds in the header and footer it will look like the sidebar and content grow and shrink based off one another, when actually the divs end far before the background does.
I haven't looked at the site in Firefox or IE (use Safari, as well, and debugging takes time). Try using the IE 7 developer toolbar,
Xray, and background colors/borders to determine where elements are actually falling in the page. In Firefox, download Firebug.
Good luck!
Linear Mode
Forum Contains New Posts 
Forum Contains No New Posts 
Forum is Closed