2

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.

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

  • Interesting, thank you. Based on your info I solved it by simply removing the class .last-item from the module definition (in case that class is used elsewhere in the template, it's still valid). I'm curious, if you don't mind, how it is that you track that down (i.e. what tool(s) you used.) Thanks much for the help. – JoelAZ Nov 27 '14 at 9:52
  • I simply used Chrome Web Inspector (press F12 or right click and "Inspect Element"), then just started looking through the elements to see if there was any styling looked odd. It sometimes take a little getting used to but once you become more familiar with frontend dev, tracking issues like this can be done rather quickly ;) – Lodder Nov 27 '14 at 9:55
  • I was using that and was unable to find the problem so I think a good dose of experience makes the difference. Thanks for your help. – JoelAZ Nov 27 '14 at 10:08
  • @JoelAZ - You're welcome. As this solved your issue, please mark the answer as accepted so people know it has been solved. – Lodder Nov 27 '14 at 10:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.