Jump to content

Css And Ie Problem


focussss
 Share

Recommended Posts

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 =)

Edited by focus
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Edited by focus
Link to comment
Share on other sites

menuborder.gifThe 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 */} Edited by dsonesuk
Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...