Search code examples
htmlcssgoogle-chromefooter

Chrome on Laptops; footer keeps moving out of place


I've tested my site on every browser, different resolutions, and desktop settings, etc.

www.teetimelawncare.com

For some reason; one of the footer DIVs only moves out of place on Chrome ON a Laptop(desktop with similar resolution works perfect).The company that wanted the website only uses laptops and loves chrome....talk about PITA. They're using the newest version of chrome.

CSS:

@charset "utf-8";
body {
    background-color: #DAFFD1;
    margin: 0;
    padding: 0;
    background-image: url(background2.jpg);
    background-repeat: repeat-x;
    font-size: 16px;
    background-attachment: fixed;
    font-family: "Open Sans";
    -webkit-font-smoothing: subpixel-antialiased;
    z-index: 1;
}

.footer {
    background-color: #336600;
    clear: both;
    float: none;
    padding-top: 10px;
    padding-right: 0;
    padding-bottom: 0px;
    padding-left: 0px;
    height: 330px;
    color: #F7F7F7;
    min-width: 1400px;
    width: 100%;
    max-height: 350px;
    text-align: center;
    display: inline-block;
}

.....4 divs used in footer;


#third {
    width: 180px;
    float: left;
    text-align: left;
    margin-left: 10px;
    display: inline-block;
}


#first {
    width: 300px;
    float: right;
    overflow: visible;
    margin-right: 10px;
}
#second {
    float: right;
    margin-right: 10px;
    margin-left: 10px;
}
#fourth {
    height: 300px;
    width: 400px;
    float: left;
    clear: none;
    padding-left: 10px;
}

Relevant HTMl:

 <div class="footer">
 <div id=third>
   <h1>Site Map
   </h1>
     <p1>
     <a href="/index.html">Home page
</a>  <br>
<a href="/estimate.htm">Estimate Form
</a>  <br>  <p1>
<a href="/lawncare.htm">Lawn Care Process
</a> <br>
 <p1>
 <a href="/tree.htm">Tree And Shrub Control
</a> <br>
 <p1><a href="/pestcontrol.htm">Pest Control Services
</a> <br>
 <p1><a href="/landscape.htm">Organic Landscaping </a> <br>
 <p1><a href="/billpay.htm">Secure Online Bill Pay
</a>  <br>
 <p1>
 <a href="/careers.htm">Careers And Team
</a> 
 <p1>
<br>
 <p1>
 <a href="/testimony.htm">Customer Testimony And Lawn Gallery
</a> 
<br>

 </div>
  <div id=first>
    <h1>Tee Time Lawn Care</h1>
   <a href="http://goo.gl/maps/LoE3p"> <p1>23736 W 119th St
Plainfield, IL 60585</p1></a>
<br>
    <p1> (815) 609-6969</p1>
    <br>
    <br>
   <p2> A local lawn and landscaping company with an emphasis on safe,organic lawn care. Lawn care companies like us will treat your lawn and yard like a golf course so give us a call if your need the best lawn in your neighborhood. </p2>
  </div>
 <div id=second> 
  <h1>Lawn care company service in  Illinois (IL)<br>
  Chicago-land suburbs including:</h1>
      Naperville lawn care, Naperville landscaping<br>
      Plainfield lawn care, Plainfield landscaping<br>
      Aurora lawn care, Aurora landscaping<br>
     Channahon lawn care, Channahon landscaping<br>
      Oswego lawn care, Oswego landscaping<br>
      Shorewood lawn care, Shorewood landscaping<br>
      Bolingbrook lawn care, Bolingbrook landscaping<br>  Barrington lawn care, Barrington landscaping<br>
      And nearby  towns and cities for your yard service needs.
</p2>
  </div><div id=fourth>
  <h1> Our lawn care and landscaping services include:</h1>
 <p2>Organic and granular fertilization, aeration and seeding, pest control, tree and shrub maintenance service, soil conditioning, heat guard, summer recovery, root rejuvenation, winterizing, blanket barrier, mole removal, yard cleaning, lawn and yard mowing, commercial landscaping, weed removal, weed prevention, vole removal, and more!
 <br> Please contact us for additional services.</p2>
  </div>
  <!-- end .footer -->

</div>

Solution

  • On all browsers looking at different resolutions the 'Our lawn care and landscaping services include:' section moves out of place.

    This works for me:

    fourth {

    height: 300px;
    clear: none;
    padding-left: 10px;
    

    }