Please help this has been frustrating me all night. The page displays correctly in IE, but not FF, which tells me there is a problem. All CSS and HTML have been validated and I am using transitional for school. The "events.html" page shifts about 5-10 pixels to the left when the page is viewed at a resized or repositioned window. It seems to work OK when the window is at the correct, maximum length the page was designed for. This is only happening in FF, and is not happening to my other pages (index, about, surrender, etc.) You can see the transition from http://www.amandambruce.com/DROH/events.html to http://www.amandambruce.com/DROH/surrender.html Here is the HTML for the page I'm having trouble with: <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Events & News from the Dachsund Rescue of Houston</title> <meta name="keywords" content="about, dachshund, dachshunds, rescue dachshunds, miniature dachshund, pet, pet rescue, Houston, Houston dachshund"/> <meta name="description" content="The Dachshund Rescue of Houston news and event information."/> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> <LINK href="droh.css" rel="stylesheet" type="text/css"> </head> <body> <div id="contain"> <div id="home"> <a href="index.html"><img src="images/home.png" alt="Home" title="Home" border="0"/></a></div> <div id="menu"> <a href="about.html"><img src="images/about_btn.png" alt="About button" title="About" border="0"/></a> <a href="adopt.html"><img src="images/adopt_btn.png" alt="Adopt button" title="Adopt" border="0"/></a> <a href="help.html"><img src="images/help_btn.png" alt="Help button" title="Help DROH" border="0"/></a> <a href="resources.html"><img src="images/resources_btn.png" alt="Resources button" title="Resources" border="0"/></a> <a href="contact.html"><img src="images/contact_btn.png" alt="Contact button" title="Contact" border="0"/></a> </div> <div id="content"> <p class="nav"> <a href="events.html"> Events & News</a> | <a href="surrender.html"> Surrendering a Dachshund</a></p> <h2>DROH Events & News</h2> <h1>Join us on Facebook & Twitter </h1> <p class="contenttext"> <a href="http://www.facebook.com/profile.php?id=53199821407" target="_blank"><img src="images/facebook.png" align="left" border="0" ></a> <a href="http://www.twitter.com/DROH_Houston" target="_blank"><img src="images/twitter.png" align="absmiddle" border="0" hspace="20"></a></p> <h1>2009 Barnard Foundation Grant </h1> <p class="contenttext"> On October 25, 2009 Dachshund Rescue of Houston received a grant of $7,500 from Barnard Foundation for the purpose of educating the public on dog care and the dachshund breed, and for payment of our veterinary bills and medical supplies. Additionally, Barnard Foundation issued a challenge: If we can raise $15,000 in donations between October 25, 2009 and December 31, 2009, they will provide another grant of $7,500 for a total of $15,000. Please help us meet this challenge by donating to Dachshund Rescue of Houston today. Click here to check the fund drive status or make a donation - and remember, ultimately it will count twice! <a href="barnard09.html"> Check the fund status</a> or <a href="https://www.paypal.com/us/cgi-bin/webscr?cmd=_flow&SESSION=d1JehTB26m3eghN70M4UHk1O-jWwFI08hncWmt4Thkn5cZjR4i7FqqBiEve&dispatch=50a222a57771920b6a3d7b606239e4d529b525e0b7e69bf0224adecfb0124e9b833248354cf50881e4ea372b2a42d76305e03018dc2a2bc7">donate today</a>.</p> <h1>2008 Results from Barnard Foundation Matching Fund Drive</h1> <p class="contenttext"> Thanks to all of our great supporters, we successfully met the challenge issued by the Barnard Foundation and raised $10,000 between October 26 and December 31, 2008. As a result, the Barnard Foundation is graciously providing a matching grant of $10,000. This will help many dachshunds in need in 2009. Our thanks to all of you and the Barnard Foundation for your continued support. And don't forget, additional donations are always welcome! </a></p> <h1>REPEATED REPEATED </h1> <p class="contenttext"> Thanks to all of our great supporters, we successfully met the challenge issued by the Barnard Foundation and raised $10,000 between October 26 and December 31, 2008. As a result, the Barnard Foundation is graciously providing a matching grant of $10,000. This will help many dachshunds in need in 2009. Our thanks to all of you and the Barnard Foundation for your continued support. And don't forget, additional donations are always welcome! </a></p> <h1>Photos from Spring Fling 2009</h1> <p class="contenttext"> <a href="images/sp09/Elliott_and_Deuce.jpg" rel="lightbox[fart]" title="Deuce and Elliot (Click upper-right corner to see the next photo)"><img src="images/sp09/Elliott_and_Deuce_thumb.jpg"/></a> <a href="images/sp09/gimme_a_cupcake.jpg" rel="lightbox[fart]" title="Gimme a cupcake"><img src="images/sp09/gimme_a_cupcake_thumb.jpg"/></a> <a href="images/sp09/js06.jpg" rel="lightbox[fart]" title="Spring Fling '09"><img src="images/sp09/js06_thumb.jpg"/></a> <a href="images/sp09/js16.jpg" rel="lightbox[fart]" title="Spring Fling '09"><img src="images/sp09/js16_thumb.jpg"/></a> <a href="images/sp09/my_Elliott.jpg" rel="lightbox[fart]" title="Elliot"><img src="images/sp09/my_Elliott_thumb.jpg"/></a> <a href="images/sp09/P4261333a.jpg" rel="lightbox[fart]" title="Spring Fling '09"><img src="images/sp09/P4261333a_thumb.jpg"/></a> <a href="images/sp09/P4261335a.jpg" rel="lightbox[fart]" title="Spring Fling '09"><img src="images/sp09/P4261335a_thumb.jpg"/></a> <a href="images/sp09/time_for_door_prize.jpg" rel="lightbox[fart]" title="Time for a door prize"><img src="images/sp09/time_for_door_prize_thumb.jpg"/></a> <a href="images/sp09/Spring_Fling_2009_084.jpg" rel="lightbox[fart]" title="Spring Fling '09"><img src="images/sp09/Spring_Fling_2009_084_thumb.jpg"/></a> <a href="images/sp09/various_086.jpg" rel="lightbox[fart]" title="Spring Fling '09"><img src="images/sp09/various_086_thumb.jpg"/></a> </a></p> </div> </div> </body> </html> <!-- text below generated by server. PLEASE REMOVE --><!-- Counter/Statistics data collection code --><script language="JavaScript" src="http://us.js2.yimg.com/us.js.yimg.com/lib/smb/js/hosting/cp/js_source/whv2_001.js"></script><script language="javascript">geovisit();</script><noscript><img src="http://visit.webhosting.yahoo.com/visit.gif?us1259045850" alt="setstats" border="0" width="1" height="1"></noscript> Code (markup): and here is the CSS - #contain{ width: 800px; height: 640px; margin-left: auto; margin-right: auto; background: url(images/background_solid.jpg) no-repeat top center; } #home{ width: 320px; height: 90px; float: left; margin-top: 10px; } #menu{ width: 466px; height: 98px; float: right; margin-top: 15px; } #dog{ width: 491px; height: 257px; margin-top: 19px; margin-left: 22px; float: left; } #community{ float: right; background: url(images/community_spot.jpg) no-repeat; width: 231px; height: 259px; margin-top: 19px; margin-right: 22px; } #arrival{ clear: right; background: url(images/arrivals.png) no-repeat; width: 800px; height: 286px; margin-left: auto; } #content{ background-image: none; background-color: #dce2f0; width: 800px; height: auto; margin-top: 0px; margin-left: 0px; float: left; } a:link { font-weight: bold; color: #6b0e1c; text-decoration: none; } a:visited{ font-weight: bold; color: #1c3f95; text-decoration: none; } a:hover { font-weight: bold; color: #003466; text-decoration: underline; } a:active { font-weight: bold; color: #003466; text-decoration: none; } .communitytext { font-family: helvetica; font-size: 10pt; color: #000000; padding: 160px 10px 0 15px; /*up, right, bottom, left */ margin: 5px auto 5px 10px; /*up, right, bottom, left */ } .arrivaltext { font-family: helvetica; font-size: 10pt; color: #000000; padding: 105px 10px 0 10px; /*up, right, bottom, left */ margin: 15px 10px 5px 10px; /*up, right, bottom, left */ } .arrivaltext2 { font-family: helvetica; font-size: 10pt; color: #000000; padding: 3px 10px 0 10px; /*up, right, bottom, left */ margin: 15px 10px 5px 10px; /*up, right, bottom, left */ } .contenttext { font-family: helvetica; font-size: 10pt; color: #231f20; margin: 5px 10px 5px 10px; /*up, right, bottom, left */ } .nav { font-family: helvetica; font-size: 11pt; text-align: right; color: #6b0e1c; margin: 5px 10px 5px 10px; /*up, right, bottom, left */ } .img { margin-left: auto; margin-right: auto; width: 21.5em; } h1{ font-family: helvetica; font-size: 12pt; text-align: left; color: #6b0e1c; margin: 10px auto 5px 10px; /*up, right, bottom, left */ } h2{ font-family: helvetica; font-size: 14pt; font-style:italic; text-align: left; color: #1c3f95; margin: 5px auto 5px 10px; /*up, right, bottom, left */ } #lightbox{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;} #lightbox img{ width: auto; height: auto;} #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100% ; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; outline: none;} #overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; } Code (markup): Thanks in advance, I really really appreciate it.
I don't see it on those pages but you are probably seeing the scrollbar appearing/disappearing and causing the shift?
now that I am at work, I don't see it happening! It must be something that has to do with the monitor resolution; at home I have a 22" widescreen, and at work I think it's a 19" standard. i'll take a look at the scroll when I get home. Thanks for all your help, i really appreciate it!
it's because IE always displays the scroll bar on the right --> even if it isn't longer than one page.
Yup, that's right - IE always displays a scrollbar, even if there's no scrollable content. Simply set the scrollbar to always appear, like this: html { overflow: -moz-scrollbars-vertical; } Code (markup):