SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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:

    HTML Code:
    <!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’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>
    Last edited by cpradio; Mar 25, 2013 at 10:31. Reason: Added html tags

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    I think we'd really need to see a live link to be able to offer any useful suggestions regarding this.

  3. #3
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  4. #4
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I think we'd really need to see a live link to be able to offer any useful suggestions regarding this.
    Thanks - this is the live link: http://www.mya.co.uk/nonsurgicaldev/index.html

  5. #5
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  6. #6
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  7. #7
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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.

  8. #8
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks. Here is a screenshot
    Attached Images Attached Images

  9. #9
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,266
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.
    I don't see the rectangles either....it looks fine for me in Chrome 25.0.1364.172 m (latest & greatest prod version)
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  10. #10
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by DaveMaxwell View Post
    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?

  11. #11
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am also using the latest version

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    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?

  13. #13
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    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.

  14. #14
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,203
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Cool, glad you got it sorted.

  15. #15
    SitePoint Member
    Join Date
    Mar 2013
    Posts
    13
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Cool, glad you got it sorted.
    Me too. Thanks everyone :-)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •