Regarding the maincontent div.... when I take the height off it the background image does not expand down while the div does
Set no height on #maincontent. It needs only to be opened to enclose the float contained within it. Not tested-- reset to (the border is for position only and should be deleted if all is well):
-
#maincontent {
-
border: 1px solid fuchsia;
-
overflow:hidden;
-
background-image:url('images/main_bg.png');
-
background-repeat:repeat-y;
-
margin-top:2px;
-
}
-
I have not tested this. If it is not doing what it should in in IE/6.0, add this hack for IE/6 to the style sheet.
-
* html #maincontent {
-
border: 1px solid fuchsia;
-
overflow:visible;
-
}
-
If it is not working in any browser, write back...
Remember not to forget IE/7.0 is not much better than IE/6.0. And that the forthcoming IE/8.0 will still be at least 3 years behind compliant browsers. This dose not mean you need throw yourself through a closed window. But keeping up to date on coping with stupidity is always an advantage...
A couple of helpful links regarding dealing with IE 6/7:
http://www.satzansatz.de/cssd/onhavinglayout.html http://www.positioniseverything.net/
Current thinking among some is doing little more than making sure IE/6 is not upside down and backward is more than enough. The days of attempting pixel perfect cross-browser perfection are long gone and just encouraged IE to do nothing about its flagrant opposition to web standards.
Trivial pursuits: You still have one or more rule sets set in font-size using points. Using em as you have done is fine. I prefer percent myself for cross-browser consistency. More important: default for em is 1em not .8em as you have on the body; default for percent is 100% not 80%. And line height is almost always set as a raw number (no unit of measure is used). It's line-height: 1.3; Not line-height: 1.3em or line-height:130%;
Good luck and best...
~d