Right now it is working great. I've fixed the alignment problem. (As far as i can see)... Let me know if you still see any problems
Ok so I never saw the original problem but your left menu still doesn't stretch the background to be the same height as the main content on the index page, there is a white space below it - unlike on the screenshot I sent! Your Version My Version Peace
Use Javascript: Include this Javascript Function and change the DivIDNames in the function function allocateSidebarHeight() { sidebarHeight = document.getElementById("sidebarDivIDName").style.height; contentHeight = document.getElementById("contentDivIDName").style.height; if(contentHeight>sidebarHeight) { document.getElementById("sidebarDivIDName").style.height = contentHeight; } } and have your body execute the js function on load: <body onload="allocateSidebarHeight();">
I think that is what I have been looking around for about two months now. I will put it to work and report how it worked. Thanks NIma
here is the final code that I got from ccoonen and it works beautifully: <script type="text/javascript" language="javascript"> function allocateSidebarHeight() { var contentDom = document.getElementById("main"); var sidebarDom = document.getElementById("nav-one"); if((contentDom.offsetHeight-800) > sidebarDom.offsetHeight) { sidebarDom.style.height = (contentDom.offsetHeight-800)+"px"; } } startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("nav"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmouseover=function() { this.className+=" over"; } node.onmouseout=function() { this.className=this.className.replace(" over", ""); } } } } allocateSidebarHeight(); } window.onload=startList; </script> Code (markup):