CSS text div ignoring header and menu divs in FireFox

Question

Everything was looking fine in IE, Chrome, iOS, and Android, but my brother-in-law just informed me the page is acting up in FireFox. I installed FF to test, and this is what I saw:

http://www.sourceplumbing.com/images/ffscreenshot.jpg

And this is how it should look (and does in the other browsers):

http://www.sourceplumbing.com/images/iescreenshot.jpg

I would appreciate any help figuring this one out. Why does the text cut through the previous DIV's in FF, but not other browsers? Thank you in advance!

HTML:

<div id="wrapper">
  <div id="content">

    <div id="header">
      <a href="/"><img id="logo" src="/images/logo.png" alt="Source Plumbing Home"></a>
      <img id="servingsince" src="/images/servingsince.png" alt="Serving Since 1997">
    </div>
    <div id="phone">
      <a href="tel:1-949-632-5995"><img src="/images/phone-fax-number.png" alt="Click here from your mobile phone to call us now." title="Click here form your mobile phone to call us now."></a>
    </div>

    <div id="menu">
      <ul>
        <li><a href="/">About Us</a></li>
        <li><a href="/leak-detection.html">Leak Detection</a></li>
        <li><a href="#">Leak Repairs</a>
          <ul>
            <li><a href="/reroute.html">Leak Rerouting</a></li>
            <li><a href="/repipe.html">Complete Repipe</a></li>
            <li><a href="/drywall-repair.html">Drywall Repair</a></li>
          </ul>
        </li>
        <li><a href="#">Water Heaters</a>
          <ul>
            <li><a href="/traditional-water-heater.html">Traditional Water Heaters</a></li>
            <li><a href="/tankless-water-heater.html">Tankless Units</a></li>
            <li><a href="/hybrid-water-heater.html">Hybrid Systems</a></li>
          </ul>
        </li>
        <li><a href="#">Plumbing Fixtures</a>
          <ul>
            <li><a href="/fixtures-faucet.html">Kitchen & Bathroom Faucets</a></li>
            <li><a href="/fixtures-toilet.html">Toilet Installs & Upgrades</a></li>
            <li><a href="/fixtures-shower.html">Shower Fixtures</a></li>
          </ul>
        </li>
        <li><a href="#">Reviews</a>
          <ul>
            <li><a href="/reviews.html">Customer Reviews</a></li>
            <li><a href="/social-media.html">Social Media</a></li>
            <li><a href="http://www.angieslist.com/companylist/us/ca/laguna-niguel/christensen-plumbing-reviews-7190213.htm" target="_blank">Angie's List</a></li>
          </ul>
        </li>
        <li><a href="/blog/">Blog</a></li>
        <li><a href="/contact.html">Contact Us</a></li>
      </ul>
    </div>
  </div>
</div>

<!-- TemplateBeginEditable name="Content" -->
<div id="paragraph">
  <h1>Welcome to Source Plumbing</h1>
  <h2>Orange County's Leak Detection Experts</h2>
  <p>TEXT, TEXT, TEXT</p>
</div>
<!-- TemplateEndEditable -->

  <div id="footer">
    <p><img src="/images/footer-bar.png" alt="footer image"></p>
    <p>For more information <a href="/contact.html">Contact Us</a> or call <a href="tel:1-949-632-5995">(949) 632-5995</a></p>
    <p><img src="/images/footer-bar.png" alt="footer image"></p>
    <p>&copy; 2014 All rights reserved. <a href="terms.html">Terms of Use</a> | <a href="privacy.html">Privacy Policy</a> | <a href="/sitemap.html">Site Map</a></p>
  </div>
  <div id="media-footer">
    <div class="fb-like" data-href="http://www.sourceplumbing.com" data-layout="button" data-action="like" data-show-faces="true" data-share="true"></div>
    <div class="g-plusone" data-annotation="bubble" data-width="300" data-href="http://www.sourceplumbing.com"></div>
    <script type="text/javascript">(function(){var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://apis.google.com/js/plusone.js?onload=onLoadCallback";var t=document.getElementsByTagName("script")[0];t.parentNode.insertBefore(e,t)})()</script>
  </div>
</div>

And the CSS:

/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;    } body {line-height: 1;    }ol, ul{list-style:none;    } blockquote, q{quotes:none;    } blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;    } :focus{outline:0;    } ins{text-decoration:none;    } del{text-decoration:line-through;    } table{border-collapse:collapse; border-spacing:0;    }
body {
    background-color:#7296d9;
}
#wrapper {
    width:auto;
    min-width:225px;
    min-height:1024px;
    background:url(../images/bg.jpg);
    background-repeat:repeat;
    margin:4px;
}
#content {
    width:98%;
    text-align:center;
    margin:auto;
}
#header {
    width:98%;
    max-height:30px;
    min-width:350px;
    position:relative;
}
#header #logo, #logo img {
    max-width:400px;
    min-width:200px;
    width:40%;
    height:auto;
    float:left;
}
#header #servingsince, #servingsince img {
    float:right;
    max-width:400px;
    min-width:230px;
    width:40%;
    height:auto;
    margin: 8% auto auto auto;
}
#phone, #phone img {
    position:absolute;
    top:7px;
    right:2%;
    max-width:400px;
    min-width:120px;
    width:50%;
    height:auto;
}
#paragraph {
    width:80%;
    font-size:18px;
    color:#666;
    font-weight:100;
    text-align:justify;
    margin:10px auto 25px auto;
}
p {
    margin:15px 0 15px 0;
}
h1 {
    line-height:48px;
    font-size:36px;
    font-weight:bold;
    text-align:center;
    margin-top:10px;
}
h2 {
    line-height:42px;
    font-size:24px;
    font-weight:bold;
    text-align:center;
}
span.pointer {
    cursor:pointer;
}
a:link, a:visited {
    color: #666;
    text-decoration: underline;
}
a:hover, a:active {
    color: #fff;
    text-decoration: underline;
}
#menu ul ul {
    display: none;
}
#menu ul li:hover > ul {
    display: block;
}
#menu {
    display:table;
    width:100%;
    background: -webkit-linear-gradient(#d5d5d5, #595959); /* For Safari */
    background: -o-linear-gradient(#d5d5d5, #595959); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#d5d5d5, #595959); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#d5d5d5, #595959); /* Standard syntax */
    -webkit-border-radius: 25px;
    -o-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    float:left;
}
#menu ul {
    height:auto;
    font-size: 16px;;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 2px #cccccc;
    text-decoration:none;
    list-style: none;
    position: relative;
    display: table-row;
    margin:10px;
}
#menu a:link, a:visited {
    text-decoration: none;
    color: #000;
}
#menu a:hover, a:active {
    text-decoration:none;
    color: #fff;
}
#menu ul:after {
    content: "";
    clear:both;
    display: block;
}
#menu ul li {
    display:table-cell;
    width:auto;
    padding:10px;
}
#menu ul a:link, a:visited {
    color: #000;
    text-decoration: none;
}
#menu ul a:hover, a:active {
    text-decoration:none;
    color: #fff;
}
#menu ul ul {
    background-color: rgba(153,153,153,.9);
    border-radius: 0px;
    position: absolute;
}
#menu ul ul li {
    border-top: 1px solid #ccc;
    position: relative;
    display:block;
}
#menu ul ul:last-child, nav ul ul:last-child a {
    -webkit-border-bottom-right-radius: 10px;
    -o-border-bottom-right-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    -webkit-border-bottom-left-radius: 10px;
    -o-border-bottom-left-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px;
}
#menu ul ul li a {
    text-align:left;
    color: #000;
}        
#menu ul ul li a:hover {
    color: #FFF;
}
#mediaicons {
    text-align:center;
}
#mediaicons img {
    margin:auto;
    padding: 10px 0px 10px 0px;
    width:5%;
    min-width:32px;
}
#reviews {
    width:80%;
    text-align:justify;
    overflow:hidden;
    margin:25px auto 25px auto;
}
#reviews img {
    position:relative;
    float:left;
}
#form-webmaster, #form-plumber, #form-webmaster p, #form-plumber p {
    display:block;
    color: #666;
    margin:0px auto 0px auto;
    text-align:left;
    width:400px;
}
input[type=text], textarea {
    width:100%;
}
.bottombar {
    margin:auto;
    width:100%;
}
#footer, #footer p {
    font-size:12px;
    color: #666;
    text-align:center;
    width:auto;
    margin:5px 0 5px 0;
}
#footer img {
    width:100%;
}
#media-footer, #media-footer img {
    text-align:center;
    margin:10px 0 15px 55px;
}
nav ul {
    display:none;
}
#minimenu {
    display:none;
}
.reviews {
    width:80%;
    margin:auto;
    text-align:justify;
    color: #666;
}
#vcard-button {
    background: -webkit-linear-gradient(#d5d5d5, #595959); /* For Safari */
    background: -o-linear-gradient(#d5d5d5, #595959); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#d5d5d5, #595959); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#d5d5d5, #595959); /* Standard syntax */
    -webkit-border-radius: 25px;
    -o-border-radius: 25px;
    -moz-border-radius: 25px;
    border-radius: 25px;
    font-size: 16px;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    text-align: center;
    text-shadow: 2px 2px 2px #cccccc;
    text-decoration:none;
    margin: 20px auto 20px auto;
    color:    #000;
    padding:10px;
    display:inline-block;
    width:150px;
}
#vcard-button a:link, a:visited{
    color: #000;
    text-decoration:none;
}
#vcard-button a:hover, a:active {
    color: #000;
    text-decoration:none;
}
#vcard-button:hover {
    color: #FFF;
    text-decoration:none;
}
#vcard-div {
    width:350px;
    margin:auto;
}

Answer 1

change your div structure to:

html
 wrapper
  header
    navigation titles logo`s etc,..
  /header
  content
    sidebars, contents
  /content
 footer
 /footer
/wrapper
/html

It makes youre HTML a bit better organized, and will probably solve your problem. Change 1: you set you background as reset to transparent. try it without this statement. Change 2: Set before the Content div an clear:both. usually it is been done as so:

html: before

<div class="clear"></div>

after Css:

.clear{clear:both}