Css And Ie Problem

[focussss]

URL:http://squidg.x10hosting.com/kinder2/aboutus.htmlhttp://squidg.x10hosting.com/kinder2/session_times.htmlThe problem i have with both of these pages is that the content does not go inside the wrap even though i created them like every other page.HTML for Aboutus:<div id="wrap"><div id="header"><div id="headerleft"><img src="logo.jpg" width="191" height="130" alt="Logo"></div><div id="headerright"><img src="heading.jpg" width="935" height="130" alt="Doncaster Park Kindergarten"></div></div> <!-- end header--><div id="contentwrap"><div id="menu"><table width="0" border="0" cellspacing="0" cellpadding="0"><tr><td width="65"><p><img src="pink_pencil.gif" width="55" height="43" alt="Image" ></p></td><td width="125"><p><a class="menu-pink" href="index.html">Home</a></p></td></tr><tr><td><p><img src="orange_pencil.gif" width="55" height="43" alt="Image" ></p></td><td><p><a class="menu-orange" href="aboutus.html">About us</a></p></td></tr><tr><td><p><img src="yellow_pencil.gif" width="55" height="43" alt="Image" ></p></td><td><p><a class="menu-yellow" href="session_times.html">Session Times</a></p></td></tr><tr><td><p><img src="green_pencil.gif" width="55" height="43" alt="Image" ></p></td><td><p><a class="menu-green" href="enrolment.html">Enrolment</a></p></td></tr><tr><td><p><img src="blue_pencil.gif" width="55" height="43" alt="Image" ></p></td><td><p><a class="menu-blue" href="fees.html"> Fees</a></p></td></tr><tr><td><p><img src="purple_pencil.gif" width="55" height="43" alt="Image" ></p></td><td><p><a class="menu-purple" href="news.html">News</a></p></td></tr><tr><td><p><img src="red_pencil.gif" width="55" height="43" alt="Image" ></p></td><td><p><a class="menu-red" href="upcoming_events.html">Upcoming Events</a></p></td></tr><tr><td><p><img src="teal_pencil.gif" width="55" height="43" alt="Image" ></p></td><td><p><a class="menu-teal" href="contact.html">Contact</a></p></td></tr></table></div><div id="maincontent"><span class="heading">About us</span><p>Situated in a quiet, leafy area of Doncaster, the Kindergarten provides a safe, secure and stable kindergarten experience. </p><p>Doncaster Park Kindergarten is a place where your child will develop and grow physically, socially, emotionally and intellectually.</p><img src="http://forums.x10hosting.com/images/IMG_7209.JPG" width="280" height="204" alt="Image"><img src="http://forums.x10hosting.com/images/IMG_7946.JPG" width="280" height="204" alt="Image"><p>The Kindergarten is an incorporated association, owned and operated by the parents.</p><p>The staff are employed by the association to offer the pre-school program. Parents have an important role in the operation of the kindergarten at all levels. The committee of management is responsible for all administration and financial affairs of the kindergarten and determines the vision and policy of the kindergarten.</p><img src="http://forums.x10hosting.com/images/IMG_8236.JPG" width="316" height="230" alt="Image"></div> <!--end maincontent--></div> <!--end content--></div></body>CSS:html, body {margin:0;padding:0;height:100%;}#wrap {width:100%;margin:auto;height: 100%;}#contentwrap {width:auto;background-color:#A8D3FF;height: 100%;}#headerleft {width:191px;float:left;}#headerright {width: auto;}#menu {height:100%;float:left;width:190px;background: #62B0FF;border: solid thin #000;vertical-align:bottom;}#maincontent {margin-left: 26%;margin-right: 8%;padding: 1%;text-align: left;}Also the only page that is displayed properly in IE is the contact page... Why is that?Thanks for your time =)

[bigsilk]

I don't guess I see your problem. Looks fine to me in IE8. Which IE are you viewing it through?Also, get around to designing in CSS and leave the tables behind...Oh, and the link for 'Enrollment' is spelled wrong (Enrolment)

[focussss]

Thank you bigsilk.I am viewing it through IE6 that might be why...How about on those 2 pages. I am viewing it via firefox and i see that on both of those pages the content does not stay within the #maincontentAs you can see on the About Us page at the bottom half the image is within #maincontent and half is out. This causes the gab between the #maincontent and the background.The same happens on the Session Times page. But it doesn't happen on any other page?

[dsonesuk]

the wrap is not wrapping to main content but to the menu only.to force it to wrap the main content use overflow: hidden, also try it without 100% height in html,bodyhtml, body {margin:0;padding:0;}#wrap {height:100%;margin:auto;overflow:hidden;width:100%;}

[focussss]

If i dont have the height: 100% in the body then the menu doesn't extend all the way down to the bottom of the page... =[i've realised that if i remove the images at the bottom of the page from:http://squidg.x10hosting.com/kinder2/aboutus.htmlhttp://squidg.x10hosting.com/kinder2/session_times.htmlIt displays correctly. But i want to keep those images?

[dsonesuk]

The only way i can get this to work in most browsers, is to use and image (above) to give an illusion that the menu container borders continues to the bottom edge. This image repeats on the left hand side of the #contentwrap container div.with the below amendments this will work, in IE6, IE7, FireFox, Safari, Opera and Chrome#wrap {height:auto;margin:auto;width:100%;}#contentwrap {background:url(images/menuborder.gif) repeat-y left #A8D3FF;height:100%;width:auto;}#menu {background:#62B0FF none repeat scroll 0 0; border: 0px;border-top:thin solid #000;float:left;height:100%;vertical-align:bottom;width:190px;margin-left: 2px !important; margin-left:1px; /*IE6 fix */}

[focussss]

Thank you so much dsonesuk!!!! You really did save me!!Your solution worked well however the only problem with it is that it does not expand the contentwrap automatically so i need to fill space using <p> </p> so it reaches down to the bottom of the page. But other then that its perfect! Thanks again!!!One last thing... In my IE6 in some of the links it looks like this:http://i143.photobucket.com/albums/r129/focussss/3-1.jpgIs there a fix for this?

[dsonesuk]

(1) #contentwrap problem add overflow:hidden; (2) to force menu below header add clear:both; also to #contentwrap

[focussss]

Does overflow work in IE6?Because in my IE it looks like this:http://squidg.x10hosting.com/kinder2/index.html

[dsonesuk]

yes! overflow does work in IE6, and sorry can't see any problems in IE6? only the home pencil image, which when i swap for different colour pencil image works fine. try uploading image again, if this is what the problem is.taking a wild guess here that it relates to the "Doncaster Park Kindergarten" image positioning itself under logo.this wlll happen if screen size becomes smaller than logo img (width 190px) + "Doncaster Park Kindergarten" image (935px) + padding, margins.one option would be to set the width of "Doncaster Park Kindergarten" image to about 75%, which will cause the image to shrink lengthwise to accomodate the users screen size.

[focussss]

ahh fixed...Thanks again! great hope!!i really appreciate it