Hi, this is the first time here so I hope i do thinks right. I have as part of a student group written a website for the school i work at. I'm using IE6 and the site displays images in 800 by 600 fine but in 1024 by 768 the image displays a bit to the left until i hit refresh and then its alright. I have no idea why. Please help. Its got quite a few pages so i'll put a copy of one page and the css in this email.Both the page and css are validated xhtml 1.0 transitional.
the page. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Middle School</title> <link rel="stylesheet" type="text/css" href="../rules.css" /> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> <meta name="author" content="Michael Tsakrios, Greg Harrington, Debbie Gale" /> <meta name="keywords=" content="Gray Primary School" /> <meta name="description" content="Gray Primary School" /> <meta name="robots" content="noindex, nofollow" /> </head> <body> <div id="container"> <div id="header"> <img height="123" alt="School Bannner" src="../images/banner.gif" width="100%" /> </div> <div id="navbar"> <div id="menu"> <div class="sitemenu" onmouseover="this.className='display'" onmouseout="this.className='sitemenu'"> <a class="sl" href="../index.html">Home</a> </div> <div class="sitemenu" onmouseover="this.className='display'" onmouseout="this.className='sitemenu'"> <a class="sl" href="../aboutus.html">About Us</a> <div class="submenu"> <a class="sl" href="../aboutus/introduction.html">Introduction</a> <a class="sl" href="../aboutus/vision.html">School Vision</a> <a class="sl" href="../aboutus/enrolment.html">Enrolment</a> <a class="sl" href="../aboutus/handbook.html">Parents Handbook</a> <a class="sl" href="../aboutus/policies.html">Policies</a> <a class="sl" href="../aboutus/council.html">School Council</a> <a class="sl" href="../aboutus/asspa.html">ASSPA</a> <a class="sl" href="../aboutus/description.html">Description of School</a> <a class="sl" href="../aboutus/history.html">History and School</a> <a class="sl" href="../aboutus/staff.html">Staff List</a> <a class="sl" href="../documents/canteen_menu.doc" target="_blank">Canteen Menu</a> <a class="sl" href="../aboutus/assemblies.html">Assemblies</a> <a class="sl" href="../aboutus/awards.html">Awards</a> </div> </div> <div class="sitemenu" onmouseover="this.className='display'" onmouseout="this.className='sitemenu'"> <a class="sl" href="../curriculum.html">Curriculum Initiatives</a> <div class="submenu"> <a class="sl" href="earlylearn.html">Early Learning Centre</a> <a class="sl" href="yr1to3.html">Junior School</a> <a class="sl" href="middle.html">Middle School</a> <a class="sl" href="literacy.html">Literacy</a> <a class="sl" href="numeracy.html">Numeracy</a> <a class="sl" href="cpa.html">CPA</a> <a class="sl" href="boys_ed.html">Boys In Education</a> <a class="sl" href="sport.html">Sports and Camp Program</a> <a class="sl" href="breakfast_prog.html">Breakfast Program</a> <a class="sl" href="itc.html">ICT</a> <a class="sl" href="indigenous.html">Indigenous Programs</a> <a class="sl" href="homework.html">Homework Centre</a> </div> </div> <div class="sitemenu" onmouseover="this.className='display'" onmouseout="this.className='sitemenu'"> <a class="sl" href="../events.html">Calendar & Events</a> <div class="submenu"> <a class="sl" href="../calender/calendar.html">Calendar</a> <a class="sl" href="../calender/event.html">Events</a> </div> </div> <div class="sitemenu" onmouseover="this.className='display'" onmouseout="this.className='sitemenu'"> <a class="sl" href="../kidscorner.html">Kids Corner</a> <div class="submenu"> <a class="sl" href="../kidscorner/stud_council.html">Student Council</a> <a class="sl" href="../kidscorner/edlinks.html">Educational Links</a> <a class="sl" href="../kidscorner/studart.html">Student Art Gallery</a> </div> </div> <div class="sitemenu" onmouseover="this.className='display'" onmouseout="this.className='sitemenu'"> <a class="sl" href="../newsletter.doc" target="_blank">Newsletter</a> </div> </div> </div> <div id="lcontainer"> <p><a href="../index.html"><img height="110" alt="Return Home" src="../images/homelogo.gif" width="110" border="0" /></a></p> </div> <div id="content"> <h2>Middle School</h2> <img class="mid" height="200" alt="A happy student" src="../images/middle.jpg" width="200" border="0" /> <p>Our team is committed to enhancing our understanding and focusing on the needs of our students in the middle years with the purpose of improving their educational outcomes.</p> <p>Teachers, along with parents, face the challenge of assisting these students to build the skills and confidence that will help them to achieve in school and later in further education and training, work and life.</p> <p>Supportive relationships are central to students engagement with school.</p> <p>Our team is committed to providing students with access to a range of positive relationships and a curriculum that assist them to explore and understand their personal development and the world in which they live, and to experience a sense of connection with their schooling and the world beyond.</p> <p> We look forward to sharing with the Gray School Community some of the exciting and innovative practices being employed in our middle school classrooms.</p> <p>Back to <a href="middle.html">Top</a></p> </div> <div id="footer"> © Gray Primary School Palmerston ¦ ¦ Last Updated: November 2004<br /> <a href="../sitemap.html">Site Map</a>¦ ¦ <a href="../contact.html">Contact Us</a>¦ ¦ <a href="../acknowledgments.html">Acknowledgments</a> </div> </div> </body> </html> the css. p, ul, ol, dd { font-size: .7em; color:#000; } dt{ font-size:14px; color:#000; } th{ font-size:10px; color:#000; } em{ font-size:20px; color:#000; } caption{ font-family: Helvetica, Verdana, Arial, sans-serif; font-size:20px; color:#000; } td{ vertical-align: middle; } img.left200 { float: left; padding: 1% 1% 0% 1%; } img.right200 { float: right; padding: 1% 1% 0% 1%; } img.mid { float: right; padding: 5% 1% 0% 1%; } img.righttop { float: right; padding: 10% 1% 0% 1%; } img.lefttop { float: left; padding: 10% 1% 0% 1%; } h1 { margin: 0 0 0 0; font-size:24px; color:#000; } h2 { margin: 0 0 0 0; font-size:20px; color:#000; } h3 { margin: 0 0 0 0; font-size:16px; color:#000; } h4 { margin: 0 0 0 0; font-size:14px; color:#000; } body { font-family: Verdana, Helvetica, Arial, sans-serif; background-color: #efefef; } /* *********** MAIN CONTAINER ************* */ #container { padding: .1em; width: 770px; margin: 10px auto; background-color: #399ccc; /* border: #000 1px solid; */ line-height: 130%; } /* ********** HEADER CONTAINER ************* */ #header { padding: .5em; margin: 0px 0px 0px 0px; background-color: #5D90BF; } /* ************* BAR CONTAINER ************* */ #navbar { margin: 1px; height: 21px; background-color: #036; } /* ************* MENU CONTAINER ************ */ #menu { color: #069; position: absolute; } #menu a.sl { padding: 1px 0.8em; display: block; font-weight: normal; font-size: 9px; margin: 1px; color: #fff; line-height: 17px; background-color: #069; text-align: left; text-decoration: none; } #menu a.sl:hover { font-weight: bold; background-color: #036; } #menu a.sl:active { background-color: #036; } .display { float: left; width: 128px; background-color: #036; } .sitemenu { float: left; width: 128px; background-color: #036; } .sitemenu .submenu { display: none } /* *********** Right CONTAINER ************** */ #rcontainer { float: right; width: 16.68%; margin: 0px; /* padding: 1em;*/ background-color: #399ccc; } #rcontainer a { display: block; font-weight: bold; font-size: 10px; margin: 10px; color: #036; line-height: 17px; background-color: #399ccc; text-align: left; text-decoration: none; } #rcontainer a:hover { font-weight: bold; color: #fff; } /* ********** Left CONTAINER ************* */ #lcontainer { float: left; width: 16.68%; margin: 0px; text-align: center; line-height: 120%; padding: 1em 0em 0em 0em; background-color: #399ccc; } #lcontainer p { text-align: center; } /* ******** MAIN CONTENT CONTAINER ********* */ #content { margin-left: 16.6%; border-left: 1px solid gray; margin-right: 16.6%; border-right: 1px solid gray; padding: 1em; max-width: 36em; /*height: 256px;*/ background-color: #fff; } /* *********** FOOTER CONTAINER *********** */ #footer { clear: both; margin: 2px; padding: .5em; font-size: 10px; color: #036; text-align: center; background-color: #5D90BF; } #footer a { padding: 0px 0.5em; font-weight: bold; text-align: left; color: #036; font-size: 10px; text-decoration: none; } #footer a:hover { color: #fff; } .bold{font-weight: bold;} .italic{font-style: italic;} cheers Greg Harrington Gray School IT Tech ****************************************************** The discussion list for http://webstandardsgroup.org/ See http://webstandardsgroup.org/mail/guidelines.cfm for some hints on posting to the list & getting help ******************************************************