Update von Firefox 3.6 auf 4.0 - Shop Layout zerschossen

[ZAMKARA yogawear]

Hallo zusammen,

mein shop läuft seit gut einem Jahr mehr oder weniger problemlos und funktioniert recht gut. Gestern habe ich endlich meinen Firefox von 3.6 auf 4.0.1 aktualisiert und bin gleich mal erschrocken:
der shop ist nicht mehr zentriert, sondern linksbündig, mein header nicht mehr zentriert, sondern zerpflückt, die breadcrumbleiste geht über den ganzen Bildschirm, etc.

Kurz, ich nehme an, dass das CSS-stylesheet unter FF 4 anders als unter FF 3.X interpretiert wird. Mit Firebug komme ich irgendwie nicht weiter - bin leider kein CSS-Künstler

Meine Suche nach 'firefox 4' bzw 'CSS' und XTC5 (das Template) bringt mich irgendwie auch nicht weiter. Kann jemand mich kurz auf das Darstellungsproblem bzw deren Lösung hinstupsen?!

Mein Shop: http://www.zamkara-yoga-shop.de/
war bisher immer schön zentriert, 980 px breit und hatte einen weissen Hintergrund.

Vielen Dank,
Jürgen



Linkback: https://www.modified-shop.org/forum/index.php?topic=12831.0

[h-h-h]

Hallo Jürgen,

poste mal Deine index.html aus dem templates/xtc5/-Verzeichnis.

Gruß

h-h-h

[ZAMKARA yogawear]

Hallo h-h-h

hier ist meine index.html

Code: PHP  [Auswählen]

{config_load file="$language/lang_$language.conf" section="index"}
<div id="wrap">
    <div id="header">
      <div id="logo"><a href="{$index}"><img src="{$tpl_path}img/zamkara-logo.gif" width="350" alt="{$store_name}" /></a>
      </div>
      <div class="header_info"
      {if $language == 'german'}
        <div class="fl_left">
                <img src="{$tpl_path}img/head-tel-1.gif" alt="Telefon"/><br />
                <a href="shopping_cart.php"><img src="{$tpl_path}img/head-korb-1.gif" alt="Warenkorb"/></a>
            </div>
        <div class="fl_right">

                <div id="fl_right">{$box_CART}</div>
               zzgl. <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=1');{/php}">Versandkosten</a><br />
            </div>

        {else}
        <div class="fl_left">
                <img src="{$tpl_path}img/head-tel-1_e.gif" alt="Telephone"/><br />
                <a href="shopping_cart.php"><img src="{$tpl_path}img/head-korb-1.gif" alt="Shoppingcart"/></a>
            </div>
        <div class="fl_right">

                <div id="fl_right">{$box_CART}</div>
               Plus <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=1');{/php}">shipping costs</a><br />
            </div>
            <div style="clear:both;"></div>
            {/if}

        </div>
    </div>

    <div id="breadcrumb">
        <p class="left">{$navtrail}</p>
        <p class="right">
            {if $smarty.session.customer_id}
            <a href="{$logoff}">{#link_logoff#}</a> |
           {else}
            <a href="{$login}">{#link_login#}</a> |
           {/if}
            {if $account}
            <a href="{$account}">{#link_account#}</a> |
           {/if}
            <a href="{$cart}">{#link_cart#}</a> |
           <a href="{$checkout}">{#link_checkout#}</a>
                           
                        {$box_LANGUAGES}
         </p>
           <div style="clear:both;"></div>
    </div>

<!--    <div id="topmenuwrap">
        <ul id="topmenu">
            <li>{$navtrail}</li>
            <li>nix1</li>
            <li>nix2</li>
            <li><a href="{$index}">{#link_index#}</a></li>
           {if $smarty.session.customer_id}
            <li><a href="{$logoff}">{#link_logoff#}</a></li>
           {else}
            <li><a href="{$login}">{#link_login#}</a></li>
           {/if}
            {if $smarty.session.customers_status.customers_status_id == '1'}
            <li><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">{#new_customer#}</a></li>
           {/if}
            {if $account}
            <li><a href="{$account}">{#link_account#}</a></li>
           {/if}
            <li><a href="{$cart}">{#link_cart#}</a></li>
           <li><a href="{$checkout}">{#link_checkout#}</a></li>
       </ul>
        <div id="languages">{$box_LANGUAGES}</div>
    </div>
-->

    <div id="contentwrap"> {if !strstr ($smarty.server.PHP_SELF, 'checkout')}
        <div id="leftcol">
        <div id="search">{$box_SEARCH}</div><br/>
        {$box_CATEGORIES}
        {$box_INFORMATION}
        {$box_NEWSLETTER}
        {$box_ADMIN}
        <!--

        {$box_LAST_VIEWED}
        {$box_REVIEWS}
        {$box_SPECIALS}
        {$box_WHATSNEW}
        {$box_CART}
        {$box_LOGIN}
        {$box_BESTSELLERS}
        {$box_INFOBOX}
        {$box_CURRENCIES}
        {$box_MANUFACTURERS_INFO}
        {$box_MANUFACTURERS}
        {$box_ADD_QUICKIE}
        {$box_CONTENT}
        -->
        </div>
        {/if}
        <div
                {if !strstr ($smarty.server.PHP_SELF, 'checkout')}
                        id="content"
                {else}
                        id="contentfull"
                {/if}
                >
        {$main_content}
            <p class="content-footer"
            {if $language == 'german'}
                        <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=12');{/php}"><img src="{$tpl_path}img/footer-pic2.png" alt="Garantie"/></a>
                        <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=10');{/php}"><img src="{$tpl_path}img/footer-pic3.png" alt="Yogalehrer"/></a>
                        <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=10');{/php}"><img src="{$tpl_path}img/bezahlarten.png" alt="Sicher kaufen"/></a>
                        <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=10');{/php}"><img src="{$tpl_path}img/footer-pic4.png" alt="Sparen"/></a>
                {else}
                        <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=12');{/php}"><img src="{$tpl_path}img/footer-pic2_e.png" alt="Guarantee"/></a>
                        <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=10');{/php}"><img src="{$tpl_path}img/footer-pic3_e.png" alt="Yogateacher"/></a>
                        <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=10');{/php}"><img src="{$tpl_path}img/bezahlarten_e.png" alt="Safe buying"/></a>
                        <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=10');{/php}"><img src="{$tpl_path}img/footer-pic4_e.png" alt="Saving"/></a>
                {/if}
                </p>
        </div>
    {if !strstr ($smarty.server.PHP_SELF, 'checkout')}

    <div id="rightcol">
    <!-- die rechte Spalte ist und bleibt leer! -->
    </div>
    {/if} </div>

<p class="footer">
<a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=3');{/php}">AGB</a> | <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=4');{/php}">Impressum</a> | <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=2');{/php}">Datenschutz</a> | <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=7');{/php}">Kontakt</a><br />
{$smarty.const.TITLE} © {$smarty.now|date_format:"%Y"}<br /><br /><br /><br /><br />Template © 2009 by modified eCommerce Shopsoftware eCommerce Shopsoftware</p>
</div>
 

Danke für das Interesse und das schnelle Feedback.
Viele Grüsse,
Jürgen

[rakna]

Hallo,

nicht nur im Firefox 4.01, auch der IE 9 stellt die Seite so dar, versuchs mal mit:

Code: CSS  [Auswählen]

#wrap {
        margin: 0 auto;
        width:980px;
        ...
}
 

funktioniert mit de IE 9 und Firefox 4.01

zu sehen auf (noch in Bearbeitung): http://www.shop.rakna-e.com/Silberketten_925/index.php

grüße rakna

[Tomcraft]

Eure Basteleien an Templates gehören nicht nach "Bugs oder Funktionsfehler"!

Man sollte meinen, dass das eigentlich logisch ist...

Verschoben in die "Bastelecke".

Grüße

Torsten

[h-h-h]

Code: XML  [Auswählen]

<div id="wrap">
    <div id="header">
      <div id="logo"><a href="{$index}"><img src="{$tpl_path}img/zamkara-logo.gif" width="350" alt="{$store_name}" /></a></div>
        <div class="header_info">
        {if $language == 'german'}
        <div class="fl_left">
            <img src="{$tpl_path}img/head-tel-1.gif" alt="Telefon"/><br />
            <a href="shopping_cart.php"><img src="{$tpl_path}img/head-korb-1.gif" alt="Warenkorb"/></a>
        </div>
        <div class="fl_right">

            <div id="fl_right">{$box_CART}</div>
           zzgl. <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=1');{/php}">Versandkosten</a><br />
        </div>

        {else}
        <div class="fl_left">
            <img src="{$tpl_path}img/head-tel-1_e.gif" alt="Telephone"/><br />
            <a href="shopping_cart.php"><img src="{$tpl_path}img/head-korb-1.gif" alt="Shoppingcart"/></a>
        </div>
        <div class="fl_right">

            <div id="fl_right">{$box_CART}</div>
           Plus <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=1');{/php}">shipping costs</a><br />
        </div>
        {/if}
        <div style="clear:both;"></div>
        </div>
    </div>

    <div id="breadcrumb">
        <p class="left">{$navtrail}</p>
        <p class="right">
            {if $smarty.session.customer_id}
            <a href="{$logoff}">{#link_logoff#}</a> |
            {else}
            <a href="{$login}">{#link_login#}</a> |
            {/if}
            {if $account}
            <a href="{$account}">{#link_account#}</a> |
            {/if}
            <a href="{$cart}">{#link_cart#}</a> |
            <a href="{$checkout}">{#link_checkout#}</a>
               
            {$box_LANGUAGES}
         </p>
           <div style="clear:both;"></div>
    </div>

{*
    <div id="topmenuwrap">
        <ul id="topmenu">
            <li>{$navtrail}</li>
            <li>nix1</li>
            <li>nix2</li>
            <li><a href="{$index}">{#link_index#}</a></li>
            {if $smarty.session.customer_id}
            <li><a href="{$logoff}">{#link_logoff#}</a></li>
            {else}
            <li><a href="{$login}">{#link_login#}</a></li>
            {/if}
            {if $smarty.session.customers_status.customers_status_id == '1'}
            <li><a href="{php}echo xtc_href_link(FILENAME_CREATE_ACCOUNT, '', 'SSL');{/php}">{#new_customer#}</a></li>
            {/if}
            {if $account}
            <li><a href="{$account}">{#link_account#}</a></li>
            {/if}
            <li><a href="{$cart}">{#link_cart#}</a></li>
            <li><a href="{$checkout}">{#link_checkout#}</a></li>
        </ul>
        <div id="languages">{$box_LANGUAGES}</div>
    </div>
*}

    <div id="contentwrap"> {if !strstr ($smarty.server.PHP_SELF, 'checkout')}
        <div id="leftcol">
        <div id="search">{$box_SEARCH}</div><br/>
        {$box_CATEGORIES}
        {$box_INFORMATION}
        {$box_NEWSLETTER}
        {$box_ADMIN}

        {*
        {$box_LAST_VIEWED}
        {$box_REVIEWS}
        {$box_SPECIALS}
        {$box_WHATSNEW}
        {$box_CART}
        {$box_LOGIN}
        {$box_BESTSELLERS}
        {$box_INFOBOX}
        {$box_CURRENCIES}
        {$box_MANUFACTURERS_INFO}
        {$box_MANUFACTURERS}
        {$box_ADD_QUICKIE}
        {$box_CONTENT}
        *}
        </div>
        {/if}
        <div id="{if !strstr ($smarty.server.PHP_SELF, 'checkout')}content{else}contentfull{/if}">
        {$main_content}
        <p class="content-footer">
        {if $language == 'german'}
            <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=12');{/php}"><img src="{$tpl_path}img/footer-pic2.png" alt="Garantie"/></a>
            <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=10');{/php}"><img src="{$tpl_path}img/footer-pic3.png" alt="Yogalehrer"/></a>
            <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=10');{/php}"><img src="{$tpl_path}img/bezahlarten.png" alt="Sicher kaufen"/></a>
            <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=10');{/php}"><img src="{$tpl_path}img/footer-pic4.png" alt="Sparen"/></a>
        {else}
            <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=12');{/php}"><img src="{$tpl_path}img/footer-pic2_e.png" alt="Guarantee"/></a>
            <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=10');{/php}"><img src="{$tpl_path}img/footer-pic3_e.png" alt="Yogateacher"/></a>
            <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=10');{/php}"><img src="{$tpl_path}img/bezahlarten_e.png" alt="Safe buying"/></a>
            <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=10');{/php}"><img src="{$tpl_path}img/footer-pic4_e.png" alt="Saving"/></a>
        {/if}
        </p>
        </div>
    {if !strstr ($smarty.server.PHP_SELF, 'checkout')}

    <div id="rightcol">
    {* die rechte Spalte ist und bleibt leer! *}
    </div>
    {/if} </div>

<p class="footer">
<a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=3');{/php}">AGB</a> | <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=4');{/php}">Impressum</a> | <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=2');{/php}">Datenschutz</a> | <a href="{php}echo xtc_href_link(FILENAME_CONTENT, 'coID=7');{/php}">Kontakt</a><br />
{$smarty.const.TITLE} © {$smarty.now|date_format:"%Y"}<br /><br /><br /><br /><br />Template © 2009 by modified eCommerce Shopsoftware eCommerce Shopsoftware</p>
</div>

Hier sind mal die beiden HTML-Fehler entfernt worden.

Gruß

h-h-h

[rakna]

@ h-h-h,

und was hat das mit der Zentrierung zu tun, nichts,

wäre sowieso besser die ganzen (nicht benötigten Box und Aufrufe) zu enternen, als sie nur auszukommentieren.

Grüße rakna

[piru]

Bei mir war auch das Problem die auskommentierte Boxen, siehe: Kommentieren klappt manchmal bei Firefox nicht

[Markus]

Hi ...

weshalb das im Firefox 3.6 funktioniert haben soll ist mir unklar ... da fehlt meiner Meinung nach einiges

1. Boxen in der index.html nicht auskommentieren sondern komplett rauslöschen
2. Der "wrap" läuft nicht über die gesamte Seite sondern beinhaltet eigentlich nur den header ... von daher muss da nochmal ein DIV drumherum ...

suche in der index.html:

Code: PHP  [Auswählen]

<div id="wrap">

Davor folgendes einfügen

Code: PHP  [Auswählen]

<div id="site_wrap">

suche in der index.html:

Code: PHP  [Auswählen]

by modified eCommerce Shopsoftware eCommerce Shopsoftware</p>
</div>

Danach folgendes einfügen

Code: PHP  [Auswählen]

<div style="clear:both;"></div>
</div>

In der stylesheet.css ganz am Schluss folgendes einfügen:

Code: CSS  [Auswählen]

#site_wrap {
width:980px;
background-color:#ffffff;
margin:0 auto;
}

Ich vermute mal dann wird es noch in den Spalten ein wenig klemmen ... aber dazu dann mehr, wenn das mal soweit drin ist.

Markus

[claudia]

Wenn ich mir das im Firebug anschaue, sehe ich keinen Grund warum es zentriert sein sollte.

Der div-Container #wrap hat margin-left und margin-right auf auto (damit zentriert man Blockelemente). Da dieses Element allerdings nur den Header einschließt ist auch nur dieser zentriert.

Setze doch mal

Code: CSS  [Auswählen]

margin: 20px auto;

für das body-Element (Zeile 20 in Deinem Stylesheet).

Ansonsten wäre die Frage, ob das div#wrap nicht den gesamten Inhalt einschließen sollte. Ich verwende selbst kein xtc5-Template, aber im Demoshop schließt das div#wrap den gesamten Inhalt von header bis footer ein? Schau noch mal Deine div's durch.

Claudia

[ZAMKARA yogawear]

Danke für das Feedback - da hatte ich doch tatsächlich ganz verzweifelt an der falschen Stelle geschaut.
@ h-h-h: danke für die korrigierte index.html - schaut deutlich besser aus
@ tomcraft: sorry, ich dachte das problem beträfe auch das template, da ich ja nur kommentare gesetzt hatte.

Viele Grüsse und vielen Dank,
Jürgen

[Tomcraft]

Für mich sah das ehrlich gesagt gar nicht mehr aus wie das xtc5 Template.

Von wegen nur Kommentare gesetzt.

Grüße

Torsten

[rakna]

@ h-h-h

und wieder was dazu gelernt, die Anweisung zum parsen auf {* *} kannte ich noch nicht,

{* und weg mit allem *}

Danke rakna

[ZAMKARA yogawear]

@Torsten: äh - tja - soo viel hab ich doch gar nicht am Template gemacht. *pfeif*

Hab halt seit gut einem Jahr nichts mehr an Layout und Funktionalität gebastelt und war der Ansicht, dass ich das Template nicht grossartig verändert hatte. Never change a running system...

Aber wenn ich es recht sehe, muss ich mal einen Update auf ein neues Framework machen?!
Kann ich gleich mal mit einem generellen Make-up verbinden.

Viele Grüsse,
Jürgen

[Tomcraft]

Vergleiche doch nur mal die "index.html" deines Templates mit der aus dem xtc5 Template von modified eCommerce Shopsoftware 1.05.

Grüße

Torsten