Why does this module appear differently in Chrome and correctly in Firefox and Internet Explorer?

Question

I have a site whose front page is a single page scroll. The template builds this as consecutive modules (template is Joomlart ja_cloris for reference). I've made some changes tonight to my contact form which is the last module position on the page and for some reason it overlaps the footer at the bottom. This occurs only in Chrome. In Firefox and IE it displays correctly. I can't figure out what is causing this issue.

In my template, the module positions are defined as such:

<?xml version="1.0" encoding="utf-8"?>
<layout name="desktop">
    <!--Extra css load for this layout-->
    <stylesheets>
    </stylesheets>
    <blocks name="top" style="xhtml">
        <block name="absolute" type="modules" style="raw">absolute</block>
        <block name="top-panel" type="modules" style="raw" main-inner="1">top-panel</block>
        <block name="subnav" type="subnav" main-inner="1"></block>
        <block name="Login Form" type="Login"></block>
        <block name="onepage" type="onepage" pageid="" no-wrap="1" no-main="0">
            <page name="landing" type="modules" title="Intro" class="light first-item">page1</page>
            <page name="home" type="modules" title="Your Home" class="light">page2</page>
            <page name="media" type="modules" title="Media" class="light">page3</page>
            <page name="security" type="modules" title="Security" class="light">page4</page>
            <page name="climate" type="modules" title="Climate" class="light">page5</page>
            <page name="lighting" type="modules" title="Lighting" class="light">page6</page>
            <page name="contact" type="modules" title="Questions" class="light last-item">page8</page>
        </block>        
        <block name="cpanel" type="usertools/cpanel"></block>
        <block name="topsl" type="spotlight" main-inner="1">user1,user2,user3,user4,user5</block>   
    </blocks>
    <blocks name="middle" main-inner="1" colwidth="30">
        <block name="left1">left</block>
        <block name="right1">right</block>
    </blocks>
    <blocks name="bottom" style="xhtml">
        <block name="navhelper" type="navhelper" wrap-inner="1" main-inner="1"></block>
        <block name="botsl" type="spotlight" wrap-inner="1" main-inner="1" special="right" specialwidth="55">user6,user7,user8,user9,user10</block>
        <block name="footer" type="footer" main-inner="1"></block>
    </blocks>
</layout>

The module exhibiting the problem is the second module in position "page8". The site is live at www.fhsny.com. Scroll to the bottom or hit the "Questions" nav link. The problem is the second module which displays my address & phone details and has the Google Voice "call me" widget. As you can see in Chrome, this overlaps the orange line of the orange and black page "footer" while in Firefox and IE this displays right.

Any thoughts, ideas or pushes in the right direction appreciated. Thank you.

Answer 1

This is because you have a set height being applied to the .last-item class which can be located on line 916 of template.css:

div.last-item { height: 780px !important; }

All browsers render something things a little differently, such as text. Text in webkit browsers and even IE are slightly bigger than the likes of Firefox.

The best thing I would suggest to do in your case is simply comment out the above code so it looks like this:

/**div.last-item { height: 780px !important; }**/

Then you will that overlapping disappears.

Hope this helps