white space bottom of page in firefox but not chrome - html

Question

There is white space below my div in Firefox but not in Chrome. I think it has something to do with my #body-content-container having the properties position: relative; and bottom: 300px; this gets the right positioning effect I'm looking for in Chrome, but in Firefox it creates a white space. When I get rid of these lines the div isn't positioned in the right place in either FF or Chrome.
Here's the code:
HTML:
<div id="body-content-container">
<div id="body-content"class="row">
<div class="small-12 small-centered columns">
<br/>
<div align="center" id="page-title">COMPANY</div>
<h1 align="center">About Us</h1>
<p>ADU Consulting has been developing quality e-learning programs since 2004. It is a training and education company that collaborates with partner organizations in developing, hosting and managing online educational programs based on the individual curriculum and client needs.</p>
<p>It operates from two regional offices one in New York and another in Northern Virginia, close to the capital city of Washington D.C. The ADU datacenter is also located near the corporate office in Virginia.</p>
<p>We:</p>
<ul>
<li>Develop e-Learning courses</li>
<li>Build in-campus and online blended programs</li>
<li>Create Integrated Assessment and Evaluation</li>
<li>Provide white-labeled hosting services</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>ADU business is divided into two areas: <span style="font-family:FuturaStd-Heavy;">e-Learning Consultancy</span> for client organizations and running its <span style="font-family:FuturaStd-Heavy;">International Maritime College</span> where it offers a number of Certificates, College Primers and Vocational Skill Development programs, aimed primarily at the maritime industry. These courses focus on training the seafarers and the shore based employees within the shipping business.</p>
<p>ADU fills the gap between traditional education and the needs of people today. Interactive courses taught by experienced professionals help students keep pace with changing industry demands in addition to providing a holistic and need-based education. Our Instructors are picked from around the world with the majority from the United States; they have the highest professional and academic backgrounds that befit the purpose of industry ready education and training.</p>
<h1 align="center">Our Purpose</h1>
<p>We believe that online education's role is to compliment the "best" practices in education. It must support instructors to teach a larger student body and make learning possible based on individual learning needs. With this in mind, our integrated learning platform is equipped with necessary tools in helping the Instructors create a self-paced learning environment.</p>
<h1 align="center">Technology</h1>
<p>The LMS software and courses system is housed in a tier 1 datacenter that has a redundant firewall, switches and servers for complete data security. This hosted delivery model provides scalability, reliability and eliminates technological burden on client resources.</p>
<h1 align="center">Course Development</h1>
<p>ADU Consulting's content creation and delivery platforms are tied together such that it allows faculty to modify, or enhance contents to fit their unique teaching style. Thus a course developed for an organization can be further customized by the Instructor. In addition, since the world of online resources is expanding every minute, Instructors are able to link external content or add other resources through this platform. The student assessment is an integral part of the learning and evaluation process: the platform is configured with a question bank and a multi-faceted assessment system.</p>
<h1 align="center">Support</h1>
<p>In order to keep pace with the changing landscape of online learning ADU Consulting's platform is constantly updated in keeping with such advances. We are committed to support our partners both from technical management and pedagogical viewpoint.</p>
<h1 align="center">Course Delivery</h1>
<p>Courses are delivered to students in an asynchronous mode that allows students to learn at their own pace and allows flexibility when they want to study; Collaboration and communication with faculty is done in a synchronous mode through online video conferencing. The teacher-centric approach helps to consolidate and maximize the learning outcome.</p>
<h1 align="center">Course Creation & Quality Control</h1>
<p>ADU Consulting has an e-learning Quality Management Process that looks at various quality attributes in a course that must be meet to meet the ADU performance criteria. This is an internal quality audit system that must be satisfied before a course can be put on line for client review. The QA task is done from Virginia.</p>
<p>ADU Consulting’s courses are built at Chennai, India with an affiliated organization that maintains a large content development team including subject matter experts, instructional designers, graphic designers, Flash and other programmers, voice-over specialists etc.</p>
<p>The development is an iterative process and is only signed off once the user client is fully satisfied with the intended and agreed quality standard.</p>
<h1 align="center">Collaberation Projects</h1>
<p>ADU Consulting collaborates with partner organizations in developing, hosting and managing online educational programs based on individual curriculum and client needs and this may take any of the following project types:</p>
<ul>
<li>Develop e-Learning Courses</li>
<li>Build in-campus and online blended programs</li>
<li>Create Integrated Assessment and Evaluation</li>
<li>Provide white-labeled hosting for e-learning services</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div align="center">
<h1>Contact Us</h1>
<span style="font-family:FuturaStd-Heavy;font-size:20px;">ADU Consulting Services</span>
<br/>
<p>6 Pigeon Hill Drive Suite 230<br/>
Sterling, VA 20165<br/>
United States of America</p>
<p>Email: info#adu.us.com</p>
<p>Telephone: [phone]<br/>
Fax: [phone]</p>
</div>
</div>
</div>
<div align="center" id="footer">
<br/>
Copyright © <script type="text/javascript">
document.write(new Date().getFullYear());
</script> ADU Consulting, All Rights Reserved. Site designed & developed by <a target="_blank" style="text-decoration: underline;" href="http://zrrdigitalmedia.com">zrrdigitalmedia</a>
<br/>
<br/>
</div>
CSS:
#body-content-container{
background-color: #d5b93f;
position: relative;
bottom: 300px;
}
Also here's a link to the site: http://zrrdigitalmedia.com/_ADU/company.html
I'm super lost here, any suggestions are much appreciated! Thank you!

Answer 1

Try changing the bottom value for the #body-content-container.
#body-content-container {
background-color: #d5b93f;
position: relative;
bottom: -15px; /* change 300px to -15px */
}
Tested on both, Firefox and Chrome.
Alternatively you can target Mozilla Firefox and add a negative margin-bottom
to the #body-content-container:
#-moz-document url-prefix() {
#body-content-container {
background-color: #d5b93f;
position: relative;
bottom: 300px;
margin-bottom:-320px; }
}

Answer 2

Some digging in FireBug lead me to this:
#body-content-container {
background-color: #d5b93f;
bottom: 300px; /* <-- this is the issue, remove it */
position: relative;
}