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>© 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;
}