CODEWITHSUNDEEP
htmlcss
Michael Zucker
Michael Zucker

Reputation: 49

Content over footer

So I have reviewed all of the posts about this and have tried everything... My content is pushing my footer down as I want. However, there is a very small portion of a div that is overlaying my footer. It can be found at http://www. newshongumpto.org

Its only that bottom portion of the div and I cannot figure out why. I had to move my footer css to the actual includes files as it wasn't find the media query to hide the footer on mobile but I digress. I know, a lot going on here:

Site CSS:

@charset "UTF-8";

.navbar-nav> li > a {
  font-family: 'Arial';
  font-weight: bold;
  color: #000000;
  font-size: 15px;  
}

.dropdown-menu > li > a {
    font-family: 'Arial';
  font-weight: bold;
    color: #000000;
    font-size: 15px;    
}

.navbar-default { 
  border-color: #000000; 
}

.nav.navbar-nav a:hover {
  color: #206E38;
}

.dropdown-menu .dropdown .dropdown-toggle a {
    font-family: 'Arial';
    font-weight: bold;
    font-size: 15px;
}

.banner {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,206e38+100&1+0,0.52+43,1+100 */
background: linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(159,193,169,0.52) 43%, rgba(32,110,56,1) 100%); /* FF3.6-15 */
background: linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(159,193,169,0.52) 43%,rgba(32,110,56,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#206e38',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

}


.ptobigtitle {
    font-family:'Anton', sans-serif;
    padding: 10px;

}

.ptosubtitle {
    font-family: 'Anton', sans-serif !important;
    padding-left: 10px;
    font-size: 30px;
    color: #535252;
}

.navbar-btn {
    float: right;

}

.btn-default {
    background-color: #206E38;
    color:#FFF;
}
.jumbotronimg {
    float: right;
}

.learnmorebtn {
    margin-left: 200px;

}

.articleheadline{
    font-family: 'Anton', sans-serif;
    font-size: 20px;
    background: #A1C2AB;
    color: #000;
    letter-spacing: 2px;
    padding: 5px;
    max-width: 400px;
    margin: 0 auto;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    border-style: solid;
    border-width: 1px;
}

.info{

    text-align: center;
    top: 37px;
}

.rightinfo{

    text-align: center;
}


.footer { 

    display:block;
    background:#CDCDCD;
    overflow:hidden;
    margin-bottom: 0;
    postion: fixed !important;
    height: auto;
    bottom: 0 !important;
    width: 100%;
    clear: both;

        }


.bottomfooter {
    color:#FFF;
    font-family: 'Arial';
    font-size: 10px;
    background: #CDCDCD;
    bottom: 0;
}


.footerheading {
    font-family: 'Anton', sans-serif;
    font-size: 18px;
    text-align: center;
    text-decoration: underline;


}

.form-inline{
    background: #CDCDCD;
}

#mc_embed_signup #mce-EMAIL{
    font-family: "Arial";
    font-size: 13px;
    padding: 5px;
    padding-top: 2px;
    margin-left:auto;
    margin-right:auto;
}


.callistcontainer {
    margin-left: auto;
    margin-right: auto;
    height: 150px;
    width: 300px;
    overflow: scroll;
}

.footertext{
    font-size: 11px;
    table-layout: fixed;
    width: 100%;
    height: auto;
    text-align: center;
    margin-left: auto;
    margin-right:auto;

}
.footerposition{
    font-weight: bold;
    text-align: right;
    padding-right: 10px;
    border-right: solid;
    border-width: 1px
}

.footername{

    border-width: 1px;
    text-align: center;
}

.footerphone{

    border-width: 1px;
    text-align: center
}

.footeremail {
    padding-left: 10px;

    border-width: 1px;
    text-align: center
}

.vl {
    border-right: solid;
    border-width:1px;
    border-color: #000000;
}

.footernavigation {
    text-align: center;
    color: #000000;
    font-size: 11px;
    margin-left:auto;
    margin-right: auto;
    border: none;
    border-collapse: separate;
    border-spacing: 20px 0

}
.footernavheader{
    text-align: center;
    text-decoration: underline;
    font-size: 11px
}
.copywrite{
    font-family: "Arial";
    font-size:11px;
    text-align: center;
    font-weight:bold;
    padding-top: 25px;

}

#mc-embedded-subscribe{
    -webkit-appearance: none;
    margin-left:285px
}
.paypal_btn{
display: inline-block;
font-family: "Gotham", "Helvetica Neue", "Helvetica", "Arial", "sans-serif";
font-size: 14px;
font-weight: 500;
color: #000000;
text-align: center;
padding: 5px 10px;
margin-top: 10px;
margin-left: 30px;
background: #FFD700;
border: solid;
border-width:thin;
border-color: #C5C5C5;
cursor: pointer;
outline: none;
border-radius: 3px;
}
.paypal_btn:hover{ background:#e7e7e7; 
}

.shongumTitle{
    font-family: 'Anton', sans-serif !important;
    font-size: 20px;
    color: #767373;
    padding-right:5px

}
.store{
    margin-top:60px;
}

FOOTER CSS

<style>
    .footer {
    display: none;
}
@media (min-width: 767px) {
        .footer { 

    display:block;
    background:#CDCDCD;
    overflow:hidden;
    margin-bottom: 0;
    postion: fixed;
    height: auto;
    bottom: 0;
    width: 100%;
    clear: both;


</style>

HTML 

    <?php include("includes/navigation.php");?>



    <div class="jumbotron banner">
          <img src="images/ShongumSkyhawkBird_bg.png" alt="Shongum Elemtary School - Skyhawks" width="252" height="321" class="jumbotronimg img-responsive"/>
        <h1 class="ptobigtitle">Shongum Elementary School</h1>
        <h2 class="ptosubtitle">Parent Teacher Organization - A Quest for Excellence</h2>
        <a class="btn btn-primarybtn-lg btn-default learnmorebtn" href="contentPages/about.php">Learn more »</a>
      </div>
<div class="col-lg-4 info">
  <h2 class="articleheadline"><img src="images/003-calendar.png" width="32" height="32" alt=""/> UPCOMING EVENTS</h2><br>
    <div class="callistcontainer">
  <link href="http://www.newshongumpto.org/calendarScript/core/framework/libs/pj/css/pj.bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="http://www.newshongumpto.org/calendarScript/index.php?controller=pjFront&action=pjActionLoadCss&theme=5" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://www.newshongumpto.org/calendarScript/index.php?controller=pjFront&action=pjActionLoad&theme=5&view=list&icons=T&cats=T"></script>
    </div>
    </div>
<div class="col-lg-4 info">
  <h2 class="articleheadline">
  <img src="images/001-news.png" width="32" height="32" alt=""/> LATEST NEWS</h3>
  <p><style type="text/css">
<!--
.display_archive {font-family: arial,verdana; font-size: 12px;}
.campaign {line-height: 125%; margin: 5px;}
//-->
</style>
<script language="javascript" src="//ShongumPTO.us14.list-manage.com/generate-js/?u=94f392b8b8898807cb75b5931&fid=6999&show=5" type="text/javascript"></script></p>
  <p> </p>
</div>

<div class="col-lg-4 rightinfo">
  <h2 class="articleheadline">
  <img src="images/002-group.png" width="32" height="32" alt=""/> GET INVOLVED!</h3>
</div>
    </div>
    <br>

<?php include("includes/footer.php");?>

</body>
</html>

FOOTER

<body id="footer" is="dmx-app">
<dmx-serverconnect id="serverconnect1" url="../dmxConnect/api/homePage/officerInfo.php"></dmx-serverconnect>
<div class="footer">
<div class="container-fluid">
    <div class="col-lg-4">
      <h2 class="footerheading"> Officers</h2>
      <div class="footertext" dmx-repeat:repeat1="serverconnect1.data.ptoOfficers">
        <table width="549" height="46" class="footertext">
  <tbody>
    <tr>
      <td class="footerposition">{{col_position}}</td>
      <td class="footername">{{col_firsrtName}} {{col_lastName}}</td>
      <td class="footerphone">{{col_phone}}</td>
        <td> <a href="mailto:{{col_email}}" class="footeremail">{{col_email}}</a> </td>
    </tr>
  </tbody>
</table>
      </div>
    </div>
    <div class="col-lg-4">
      <h2 class="footerheading">Navigate</h2>
      <table class="footernavigation">
  <tbody>
    <tr>
        <p class="footernavheader"><strong>PTO</strong></p>
    </tr>
      <tr>
      <td><a href="../contentPages/about.php">About Us</a></td>
      <td><a href="../contentPages/membership/membership.php">Membership</a></td>
    </tr>
    <tr>
      <td><a href="../contentPages/programs/programs.php">Programs</a></td>
      <td><a href="../contentPages/classes/classes.php">Classes</a></td>
    </tr>
    <tr>
      <td><a href="../contentPages/store.php">Store</a></td>
        <td><a href="http://maschiofood.com/shongum-elementary-school/">Lunch Menu</a></td>
    </tr>
    <tr>
     <td><a href="../contentPages/newsCalendar/news.php">News</td>
     <td><a href="../contentPages/newsCalendar/calendar.php">Calendar</td>
    </tr>
   </tbody>
      </table>
        <br>
      <table class="footernavigation">
  <tbody>
    <tr>
        <p class="footernavheader"><strong>Randolph School District</strong></p>
    </tr>
      <tr>  
      <td><a href="https://www.rtnj.org/Page/2444">RAM Alerts</a></td></td>
      <td><a href="https://www.rtnj.org/domain/162">District Calendar</a></td></td>
    </tr>
  </tbody>
</table>

  </tbody>
</table>
    </div>
    <div class="col-lg-4">
      <h2 class="footerheading">Stay in Contact!</h2>
      <!-- Begin MailChimp Signup Form -->
<link href="//cdn-images.mailchimp.com/embedcode/slim-10_7.css" rel="stylesheet" type="text/css">
<style type="text/css">
    #mc_embed_signup{background:#CDCDCD; clear:left; font:10px "Arial",sans-serif;  width:500px;}
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
       We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
</style>
<div id="mc_embed_signup">
<form action="https://ShongumPTO.us14.list-manage.com/subscribe/post?u=94f392b8b8898807cb75b5931&amp;id=07d0e3a6fb" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">

    <input type="email" value="" name="EMAIL" class="email" id="mce-EMAIL" placeholder="Newsletter Signup" required>
    <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_94f392b8b8898807cb75b5931_07d0e3a6fb" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="btn btn-default"></div>
    </div>
</form>
</div>

<!--End mc_embed_signup-->
    </div>
<br>
<br>
<div class="col-lg-12 copywrite"> © <?php echo date("Y"); ?> Shongum Elementary School Parent Teacher Organization

  </div>
</div>
<script type="text/javascript">
/* dmxServerAction name "ptoOfficersExecutor" */
       jQuery.dmxServerAction(
         {"id": "ptoOfficersExecutor", "url": "../dmxConnect/api/homePage/officerInfo.php", "method": "GET", "sendOnSubmit": false, "sendOnReady": true, "data": {}}
       );
  /* END dmxServerAction name "ptoOfficersExecutor" */
</script>
</body>
</html>

Upvotes: 1

Views: 57

Answers (1)

RiddleMeThis
RiddleMeThis

Reputation: 1345

You have this...

.info {
    text-align: center;
    top: 37px;
}

Remove the 37px and it will fix it.

Upvotes: 1

Related Questions