web-dev-qa-db-fra.com

Pourquoi ce module apparaît-il différemment dans Chrome et correctement dans Firefox et Internet Explorer?)

J'ai un site dont la page d'accueil est un défilement d'une seule page. Le modèle le construit sous forme de modules consécutifs (le modèle est Joomlart ja_cloris pour référence). J'ai apporté quelques modifications ce soir à mon formulaire de contact qui correspond à la dernière position du module sur la page et qui, pour une raison quelconque, recouvre le pied de page en bas. Cela se produit uniquement dans Chrome. Dans Firefox et IE, il s'affiche correctement. Je ne peux pas comprendre ce qui cause ce problème.

Dans mon modèle, les positions de module sont définies comme telles:

<?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>

Le module présentant le problème est le deuxième module en position "page8". Le site est en ligne sur www.fhsny.com. Faites défiler vers le bas ou cliquez sur le lien de navigation "Questions". Le problème est le deuxième module qui affiche mon adresse et les détails de mon téléphone, ainsi que le widget Google Call "Call me". Comme vous pouvez le constater dans Chrome, cela recouvre la ligne orange du "pied de page" orange et noir alors que dans Firefox et IE cela s’affiche à droite.

Toute pensée, idée ou poussée dans la bonne direction est appréciée. Merci.

joomla-2.5templatescss
2
JoelAZ

En effet, une hauteur définie est appliquée à la .last-item classe pouvant être située sur la ligne 916 de template.css :

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

Tous les navigateurs rendent les choses un peu différemment, comme le texte. Le texte dans les navigateurs web et même IE sont légèrement plus gros que ceux de Firefox).

La meilleure chose que je suggère de faire dans votre cas est simplement de commenter le code ci-dessus afin qu'il ressemble à ceci:

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

Ensuite, vous voulez que le chevauchement disparaisse.

J'espère que cela t'aides

1
Lodder