Page not loading correctly in Chrome

I have a problem with a site not loading properly in Chrome. If anybody can help it would be greatly appreciated.

When I scroll down blank spaces (or portions of the background) appear where content should be. They start where the bottom of the screen would have been before scrolling. This only happens in Chrome and not all the time. If I refresh the page it loads correctly.

This is my html:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MYA @ CHC - Non-Surgical Procedures</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="cosmetic surgery, surgical procedures, non surgical, procedures, mya, make yourself amazing, courthouse clinics, chc, cosmetic, surgery" /><meta name="description" content="UK cosmetic surgery, breast enlargement, liposuction and nose reshaping specialists providing surgical &amp; non surgical procedures from MYA (Make Yourself Amazing). Quality surgical and non surgical cosmetic procedures from one of the UK&#8217;s top cosmetic surgery / breast enlargement teams" />
    
<link rel="shortcut icon" href="/images/favicon.ico" />

<style type="text/css">
body {
	background-color: #fdebf2;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
}
a:hover {
	text-decoration: none;
}
a:active {
	text-decoration: none;
}
</style>


<link rel="stylesheet" type="text/css" href="fonts/fonts.css" />
<link href="style.css" rel="stylesheet" type="text/css" />




</head>

<body>
<div id="container">
  <div id="header_background">
  &nbsp;
    <div align="center" id="header_main">
    <p align="center"><img src="images/mya_logo_for_header.jpg" width="40%" border="0" /></p>
    <p align="center">NON-SURGICAL PROCEDURES PROVIDED BY <img src="images/chc_logo_for_header.jpg" width="25%" border="0" /></p>
    </div>
    
  </div>
 
    
 <div id="navcontainer">
 
    
  
  
  <div id="centeredmenu">
    <ul>
      <li><a href="index.html">HOME</a>
      </li>
      <li class="active"><a href="treatments.html" class="active">FACE TREATMENTS</a>
         <ul>
            <li><a href="anti_wrinkle_injections.html">Anti-Wrinkle Injections</a></li>
            <li><a href="acne_acne_scarrring.html">Acne / Acne Scarring</a></li>
            <li><a href="dermal_fillers.html">Dermal Fillers</a></li>
            <li><a href="sculptra_facial_contouring.html">Sculptra Facial Contouring</a></li>
            <li><a href="hair_fue_transplant.html">Hair FUE Transplant</a></li>
            <li><a href="hair_micrografting.html">Hair Micrografting</a></li>
         </ul>
      </li>
            <li class="active"><a href="treatments.html" class="active">BODY TREATMENTS</a>
          <ul>
            <li><a href="laser_hair_removal.html">Laser Hair Removal</a></li>
            <li><a href="alizone_rapid_weight_loss.html">Alizonne Rapid Weight Loss</a></li>
            <li><a href="body_contouring.html">Body Contouring</a></li>
            <li><a href="endermologie.html">Endermologie</a></li>
            <li><a href="excessive_sweating.html">Excessive Sweating</a></li>
            <li><a href="hair_loss_medication.html">Hair Loss Medication</a></li>
            <li><a href="hand_rejuvenation.html">Hand Rejuvenation</a></li>
            <li><a href="thread_veins.html">Thread Veins</a></li>
          </ul>
      </li>
      <li class="active"><a href="treatments.html" class="active">SKIN TREATMENTS</a>
     <ul>
          <li><a href="tattoo_removal.html">Tattoo Removal</a></li>
            <li><a href="dermaroller.html">Dermaroller</a></li>
            <li><a href="fraxel_skin_resurfacing.html">Fraxel Skin Resurfacing</a></li>
            <li><a href="laser_skin_resurfacing.html">Laser Skin Resurfacing</a></li>
            <li><a href="ipl.html">IPL</a></li>
            <li><a href="microdermabrasion.html">Microdermabrasion</a></li>
            <li><a href="mole_skintag_cyst_removal.html">Mole / Skin Tag / Cyst Removal</a></li>
            <li><a href="omnilux_light_therapy.html">Omnilux Light Therapy</a></li>
            <li><a href="skin_health_assessment.html">Skin Health Assessment</a></li>
            <li><a href="skin_peels.html">Skin Peels</a></li>
            <li><a href="soprano_skin_tightening.html">Soprano Skin Tightening</a></li>
            <li><a href="thermage.html">Thermage</a></li>
            <li><a href="wart_removal.html">Wart Removal</a></li>
        </ul>
      </li>
       
      <li><a href="locations.html">CLINICS</a>
         <ul>
            <li>CHC @ MYA LOCATIONS</li>
            <li><a href="clinics_london_fenchurch_street.html">London (Fenchurch Street)</a></li>
            <li>COURTHOUSE CLINICS LOCATIONS</li>
            <li><a href="clinics_birmingham.html">Birmingham</a></li>
            <li><a href="clinics_brentwood.html">Brentwood</a></li>
            <li><a href="clinics_bournemouth.html">Bournemouth</a></li>
            <li><a href="clinics_haywards_heath.html">Hayward's Heath</a></li>
            <li><a href="clinics_london_wimpole_street.html">London</a></li>
            <li><a href="clinics_maidenhead.html">Maidenhead</a></li>
            <li><a href="clinics_sheffield.html">Sheffield</a></li>
            <li><a href="clinics_southampton.html">Southampton</a></li>
            <li><a href="clinics_watford.html">Watford</a></li>
            <li><a href="clinics_wilmslow.html">Wilmslow</a></li>
         </ul>
      </li>
      <li><a href="http://www.mya.co.uk/mya-space/" target="_blank">MYASPACE</a>
      </li>
      <li><a href="http://www.mya.co.uk/" target="_blank">RETURN TO MYA.CO.UK</a>
      </li>
     
   </ul>
</div>
  <div id="clear_nav_container"></div>

  </div>
  <div id="separator">&nbsp;</div>
  <div id="top_container">
    <div id="image_tagline_left">
      <div id="image_tagline_box">
      <img src="images/home_image.jpg" width="100%" border="0" />
      <div id="text_tagline_box">
      <p align="center" class="h30"><b>TRULY BEAUTIFUL SKIN IS SOMETHING WE ALL STRIVE TO ACHIEVE</b></p>
      <p align="justify" class="h25">We have developed a range of advanced beauty treatments that offer visible, near instant and long-lasting results to help you achieve youthful, flawless and radiant skin all whilst helping you to prevent the early signs of ageing.</p>
      </div>
      
      
      </div>
    
    
    </div>
    
   
    
    <div id="form_right">
      
      <div id="form_box2">
      
      <p class="h15"><b>CONTACT US NOW</b></p>
      <hr size="1.5" color="#000000" />
      
 <form action="form.php" method="post">
        <div id="form_top_line">
          <div id="form_top_line_left"><p><label for="firstname">NAME*</label></p>
          <input id="firstname" style="width: 95%; text-align: left; font-family:futura_ltlight; font-size:13px; color:#f49ec1;" type="text" required name="firstname" value="" />
          </div>
          
          <div id="form_top_line_right">
          <p><label for="surname">SURNAME*</label></p>
          <input id="surname" style="width: 95%; text-align: left; font-family:futura_ltlight; font-size:13px; color:#f49ec1;" type="text" required name="surname" value="" />
          </div>
          
          <div id="clear_form_top_line"></div>
        </div>
        
        <div id="form_second_line">
          
          <div id="form_second_line_left"><p><label for="phone">PHONE*</label></p>
          <input id="phone" style="width: 95%; text-align: left; font-family:futura_ltlight; font-size:13px; color:#f49ec1;" type="text" required name="phone" value="" />
          </div>
          
          <div id="form_second_line_right"><p><label for="email_from">EMAIL*</label></p>
          <input id="email_from" style="width: 95%; text-align: left; font-family:futura_ltlight; font-size:13px; color:#f49ec1;" type="text" required name="email_from" value="" />
          </div>
          
          <div id="clear_form_second_line"></div>
      </div>
        
        <div id="treatments_of_interest">
      
        <p><label>TREATMENTS OF INTEREST*</p>
<select style="width:100%; text-align: left; font-family:futura_ltlight; font-size:13px; color:#f49ec1;" id="treatments" name="treatments" >
  <option value="0" selected="selected">Please select...</option>
<optgroup label="FACE">
<option></option>
<option value="Anti-Wrinkle Injections">Anti-Wrinkle Injections</option>
<option value="Acne/ Acne Scarring">Acne/ Acne Scarring</option>
<option value="Dermal Fillers">Dermal Fillers</option>
<option value="Sculptra Facial Contouring">Sculptra Facial Contouring</option>
<option value="Hair FUE Transplant">Hair FUE Transplant</option>
<option value="Hair Micrografting">Hair Micrografting</option>
 <option value="0"></option>
</optgroup>

<optgroup label="BODY">
<option></option>
<option value="Laser Hair Removal">Laser Hair Removal</option>
<option value="Alizone rapid Weight Loss">Alizonne rapid Weight Loss</option>
<option value="Body Contouring">Body Contouring</option>
<option value="Endermologie">Endermologie</option>
<option value="Excessive Sweating">Excessive Sweating</option>
<option value="Hair Loss Medication">Hair Loss Medication</option>
<option value="Hand Rejuvenation">Hand Rejuvenation</option>
<option value="Thread Veins">Thread Veins</option>
 <option value="0"></option>
</optgroup>

<optgroup label="SKIN">
<option></option>
<option value="Tattoo Removal">Tattoo Removal</option>
<option value="Dermaroller">Dermaroller</option>
<option value="Fraxel Skin Resurfacing">Fraxel Skin Resurfacing</option>
<option value="Laser Skin Resurfacing">Laser Skin Resurfacing</option>
<option value="IPL">IPL</option>
<option value="Microdermabrasion">Microdermabrasion</option>
<option value="Mole / Skin Tag / Cyst Removal">Mole / Skin Tag / Cyst Removal</option>
<option value="Omnilux Light Therapy">Omnilux Light Therapy</option>
<option value="Skin Health Assessment">Skin Health Assessment</option>
<option value="Skin Peels">Skin Peels</option>
<option value="Soprano Skin Tightening">Soprano Skin Tightening</option>
<option value="Thermage">Thermage</option>
<option value="Wart Removal">Wart Removal</option>
 <option value="0"></option>

</optgroup>
</select>
</label>

        </div>
        <div id="preferred_clinic">
         <p><label>PREFERRED CLINIC*</p>
<select style="width:100%; text-align: left; font-family:futura_ltlight; font-size:13px; color:#f49ec1;" id="clinic" name="clinic">
  <option value="0" selected="selected">Please select...</option>
<optgroup label="MYA LOCATIONS"></p>
<option></option>
<option value="London (Fenchurch Street)">London (Fenchurch Street)</option>
 <option value="0"></option>
</optgroup>
<optgroup label="COURTHOUSE CLINICS LOCATIONS">
<option></option>
<option value="Birmingham">Birmingham</option>
<option value="Brentwood">Brentwood</option>
<option value="Bournemouth">Bournemouth</option>
<option value="Hayward's Heath">Hayward's Heath</option>
<option value="London">London</option>
<option value="Maidenhead">Maidenhead</option>
<option value="Sheffield">Sheffield</option>
<option value="Southampton">Southampton</option>
<option value="Watford">Watford</option>
<option value="Wilmslow">Wilmslow</option>
 <option value="0"></option>

</optgroup>
</select>
</label>
        </div>
        
        <div id="arrange_consultation">
        <p>
        <input id="consultation" type="checkbox" name="consultation" value="1" />
        <label for="consultation" >ARRANGE A CONSULTATION</label> </p>
        </div>
        <div id="call_me">
       <p>
       <input id="callback" type="checkbox" name="callback" value="1" />
       <label for="callback" >PLEASE CALL ME</label> </p>
        </div>
        
        <div id="further_information">
      <p>
      <input id="furtherinformation" type="checkbox" name="furtherinformation" value="1" />
      <label for="furtherinformation" >REQUEST FURTHER INFORMATION</label></p>
        </div>
        
        
        
        <div id="form_submit_button">
        <p>&nbsp;</p>
        
        <p align="center"><input type="submit" name="submit" value="Submit" id="submit" /></p>
        
       
        </div>
        
        
        
  </div>
    
    
    
    
    
    
    </div>
    
    <div id="clear_top_container"></div>
    
    <div id="lower_container">
      <div id="lower_box_left">
     
      <img src="images/advert 4.jpg" width="100%" border="0" />
      </div>
      <div id="lower_box_mid">
    
      <a href="laser_hair_removal.html"><img src="images/advert_removal2.jpg" width="100%" border="0" /></a>
      </div>
      <div id="lower_box_right">
 
      <img src="images/new_map.png" width="100%" border="0" />
      </div>
      <div id="clear_lower_boxes">
     
      </div>
      
      
    
    
    
    </div>
    
      <br/>
    
  </div>
  
  <div id="footer">
  <p align="center" class="h36"><b><a href="http://www.mya.co.uk/accessibility" target="_blank">ACCESSIBILITY</a> | <a href="http://www.mya.co.uk/terms-and-conditions" target="_blank">TERMS & CONDITIONS</a> | <a href="http://www.mya.co.uk/cookies-and-privacy" target="_blank">COOKIES & PRIVACY</a> | <a href="http://www.mya.co.uk/privacy-policy" target="_blank">PRIVACY POLICY</a></b></p>
    <p align="center" class="h35">
   <b> ©2013 MYA. </b> Calls may be recorded or monitored for training purposes </p>
    </div>


 
 
  
</div>


</body>
</html>

I think we’d really need to see a live link to be able to offer any useful suggestions regarding this.

Thanks. It’s not live yet. I will post a link when uploaded.

Thanks - this is the live link: http://www.mya.co.uk/nonsurgicaldev/index.html

It looks the same to me in all my browsers, but is broken in each. You’ve got a few layout flaws there that need fixing. If you narrow the browser, things get forced out of place, because you haven’t accounted for what will happen in narrower windows. You’ll either need to set a min-width on your conatiner (e.g. 940px) or do some work on resizing elements, margins etc. in narrower windows.

Feel free to post a screen shot of what you are expecting to see. I didn’t really understand what you meant about backgrounds.

Thanks, I’ve set a min-width now, cheers for that. I can’t upload a screenshot, the forum gives me an error. Basically these rectangles that are the same colour as the background appear in the foreground at the bottom when you scroll down using Chrome. It doesn’t happen all the time, but obviously I would prefer if it didn’t happen at all.

Have you uploaded those changes? Page is still the same for me.

I don’t see the rectangles you are describing. You can upload screen shots by clicking the Go Advanced button and then the Manage Attachments button.

Thanks. Here is a screenshot

I don’t see the rectangles either…it looks fine for me in Chrome 25.0.1364.172 m (latest & greatest prod version)

That’s good news - thank you. I’d still like to fix this issue though, if anyone can help?

I am also using the latest version :-/

I can’t see anything in the page that could cause that. Have you got some kind of browser add-ons that might cause this? Are you on Windows?

I’ve managed to fix this. The problem was caused by the images I used for the ticks in my checkboxes. I was linking to an external image and for some reason this caused the rectangles. When I replaced it with an image within my site the problem no longer occurred.

Cool, glad you got it sorted. :slight_smile:

Me too. Thanks everyone :slight_smile: