Fehler im IE 9 bei der Anzeige der RSS Feeds in den Kategorien

Kaiser3 · May 15, 2011, 4:51pm

Hallo,

mir ist bei Betrachtung des Shops im Internent Explorer 9 aufgefallen, sowohl bei meiner Shop-Installation, als auch im Demoshop, dass in einer Unterkategorie z.B. Kiteboarding/Kiteboards das Logo RSS-Feed und der Text dazu im Container nicht am rechten Rand des Containers stehen.

Bei Opera, Safari, Google-Chrom und Mozilla steht das Logo mit Text richtig am rechten Rand.
Hat jemand für den bug im IE 9 eine Lösung?

Gruß

avenger · May 16, 2011, 6:34am

[QUOTE=Kaiser3;57416]Hallo,

mir ist bei Betrachtung des Shops im Internent Explorer 9 aufgefallen, sowohl bei meiner Shop-Installation, als auch im Demoshop, dass in einer Unterkategorie z.B. Kiteboarding/Kiteboards das Logo RSS-Feed und der Text dazu im Container nicht am rechten Rand des Containers stehen.

Bei Opera, Safari, Google-Chrom und Mozilla steht das Logo mit Text richtig am rechten Rand.
Hat jemand für den bug im IE 9 eine Lösung?

Gruß[/QUOTE]
Anscheinend wird beim IE ein Javascript-Modul eingesetzt, das die von (IE nicht unterstützte) CSS3 “shadow”-Styles nachahmt.

Und dabei ziemlichen Müll Code produziert, dabei vor allem die Breite des Elements auf 42.64 px setzt, was die Position des RSS-Symbols erklärt…

<div style="width: 42.64px; position: relative;"><div style="width: 42.64px; height: 16px; display: inline; position: relative; z-index: 100;" class="JQFEText">Kites
<a id="rssActiveCategory" class="rss external" title="OXID eShop 4/Kiteboarding/KitesArtikel" href="http://demoshop.oxid-esales.com/community-edition/rss/Kategorie/Kites/" target="_blank"><img alt="OXID eShop 4/Kiteboarding/KitesArtikel" src="http://demoshop.oxid-esales.com/community-edition/out/azure/img/rss.png"><span class="FXgradOrange corners glowShadow">OXID eShop 4/Kiteboarding/KitesArtikel</span></a>
</div>
<div style="left: 0px; top: 0px; width: 42.64px; height: 16px; position: absolute; z-index: 90;"><div style="left: 0px; top: -1px; width: 42.64px; height: 16px; color: rgb(16, 77, 92); position: absolute; z-index: 10; opacity: 0.1;" class="JQFEShadow">Kites
<a id="rssActiveCategory" class="rss external" title="OXID eShop 4/Kiteboarding/KitesArtikel" href="http://demoshop.oxid-esales.com/community-edition/rss/Kategorie/Kites/" target="_blank"><img alt="OXID eShop 4/Kiteboarding/KitesArtikel" src="http://demoshop.oxid-esales.com/community-edition/out/azure/img/rss.png"><span class="FXgradOrange corners glowShadow">OXID eShop 4/Kiteboarding/KitesArtikel</span></a>
</div>
<div style="left: 0px; top: -1px; width: 42.64px; height: 16px; color: rgb(16, 77, 92); position: absolute; z-index: 10; opacity: 0.1;" class="JQFEShadow">Kites
<a id="rssActiveCategory" class="rss external" title="OXID eShop 4/Kiteboarding/KitesArtikel" href="http://demoshop.oxid-esales.com/community-edition/rss/Kategorie/Kites/" target="_blank"><img alt="OXID eShop 4/Kiteboarding/KitesArtikel" src="http://demoshop.oxid-esales.com/community-edition/out/azure/img/rss.png"><span class="FXgradOrange corners glowShadow">OXID eShop 4/Kiteboarding/KitesArtikel</span></a>
</div>
<div style="left: 0px; top: -1px; width: 42.64px; height: 16px; color: rgb(16, 77, 92); position: absolute; z-index: 10; opacity: 0.1;" class="JQFEShadow">Kites
<a id="rssActiveCategory" class="rss external" title="OXID eShop 4/Kiteboarding/KitesArtikel" href="http://demoshop.oxid-esales.com/community-edition/rss/Kategorie/Kites/" target="_blank"><img alt="OXID eShop 4/Kiteboarding/KitesArtikel" src="http://demoshop.oxid-esales.com/community-edition/out/azure/img/rss.png"><span class="FXgradOrange corners glowShadow">OXID eShop 4/Kiteboarding/KitesArtikel</span></a>
</div>
<div style="left: 0px; top: -1px; width: 42.64px; height: 16px; color: rgb(16, 77, 92); position: absolute; z-index: 10; opacity: 0.1;" class="JQFEShadow">Kites
<a id="rssActiveCategory" class="rss external" title="OXID eShop 4/Kiteboarding/KitesArtikel" href="http://demoshop.oxid-esales.com/community-edition/rss/Kategorie/Kites/" target="_blank"><img alt="OXID eShop 4/Kiteboarding/KitesArtikel" src="http://demoshop.oxid-esales.com/community-edition/out/azure/img/rss.png"><span class="FXgradOrange corners glowShadow">OXID eShop 4/Kiteboarding/KitesArtikel</span></a>
</div><div style="left: 0px; top: -1px; width: 42.64px; height: 16px; color: rgb(16, 77, 92); position: absolute; z-index: 10; opacity: 0.1;" class="JQFEShadow">Kites
<a id="rssActiveCategory" class="rss external" title="OXID eShop 4/Kiteboarding/KitesArtikel" href="http://demoshop.oxid-esales.com/community-edition/rss/Kategorie/Kites/" target="_blank"><img alt="OXID eShop 4/Kiteboarding/KitesArtikel" src="http://demoshop.oxid-esales.com/community-edition/out/azure/img/rss.png"><span class="FXgradOrange corners glowShadow">OXID eShop 4/Kiteboarding/KitesArtikel</span></a>
</div><div style="left: 0px; top: -1px; width: 42.64px; height: 16px; color: rgb(16, 77, 92); position: absolute; z-index: 10; opacity: 0.1;" class="JQFEShadow">Kites
<a id="rssActiveCategory" class="rss external" title="OXID eShop 4/Kiteboarding/KitesArtikel" href="http://demoshop.oxid-esales.com/community-edition/rss/Kategorie/Kites/" target="_blank"><img alt="OXID eShop 4/Kiteboarding/KitesArtikel" src="http://demoshop.oxid-esales.com/community-edition/out/azure/img/rss.png"><span class="FXgradOrange corners glowShadow">OXID eShop 4/Kiteboarding/KitesArtikel</span></a>
</div><div style="left: 0px; top: -1px; width: 42.64px; height: 16px; color: rgb(16, 77, 92); position: absolute; z-index: 10; opacity: 0.1;" class="JQFEShadow">Kites
<a id="rssActiveCategory" class="rss external" title="OXID eShop 4/Kiteboarding/KitesArtikel" href="http://demoshop.oxid-esales.com/community-edition/rss/Kategorie/Kites/" target="_blank"><img alt="OXID eShop 4/Kiteboarding/KitesArtikel" src="http://demoshop.oxid-esales.com/community-edition/out/azure/img/rss.png"><span class="FXgradOrange corners glowShadow">OXID eShop 4/Kiteboarding/KitesArtikel</span></a>
</div></div><div style="left: 0px; top: 0px; width: 42.64px; height: 16px; position: absolute; z-index: 110;"></div></div>

Beim IE7/IE8 fehlt das RSS-Sysmbol dafür ganz…

Im FF sieht das so aus:

<h1 class="pageHead">Kites
<a title="OXID eShop 4/Kiteboarding/KitesArtikel" href="http://demoshop.oxid-esales.com/community-edition/rss/Kategorie/Kites/" id="rssActiveCategory" class="rss external" target="_blank"><img alt="OXID eShop 4/Kiteboarding/KitesArtikel" src="http://demoshop.oxid-esales.com/community-edition/out/azure/img/rss.png"><span class="FXgradOrange corners glowShadow">OXID eShop 4/Kiteboarding/KitesArtikel</span></a>
</h1>

Man könnte versuchen, mit der CSS-Deklaration

.pageHead.JQFE div {
    width:auto !important;
}

die volle Breite zu erzwingen (im IE Debugger hilft das), aber dann tauchen neue Probleme auf…

Das kann man wohl nur durch Neukonstruktion dieses HTML-Bereichs lösen, indem man das RSS-Image aus dem Bereich herauslöst, der von diesem Modul bearbeitet wird.

Oder man verzichtet bei IE generell auf den “Shadow”-Effekt.

Das dürften wohl diese Module sein:

    <!--[if IE]>
        <script src="http://demoshop.oxid-esales.com/community-edition/out/azure/src/js/jquery-fonteffect-1.0.0.js"></script>
        <script src="http://demoshop.oxid-esales.com/community-edition/out/azure/src/js/fonteffect.oxid.js"></script>
    <![endif]-->

Kaiser3 · May 18, 2011, 11:56am

Hallo,

danke für die Antwort.

Kannst du mir sagen, in welchem tpl/Ordner ich die Module finde?

    <!--[if IE]>
        <script src="http://demoshop.oxid-esales.com/community-edition/out/azure/src/js/jquery-fonteffect-1.0.0.js"></script>
        <script src="http://demoshop.oxid-esales.com/community-edition/out/azure/src/js/fonteffect.oxid.js"></script>
    <![endif]-->

Danke

[I]edit by Mod: Vollzitat entfernt[/I]

Kaiser3 · May 18, 2011, 1:12pm

Hallo,
ich habe das jetzt doch noch selbst gefunden im Ordner:

azure/tpl/layout

Es ist das base.tpl

Ich war jetzt mal so frei, folgendes zu entfernen:


    <!--[if (gte IE 6)&(lte IE 8)]>
        <script type="text/javascript" src="[{ $oViewConf->getResourceUrl() }]js/IE9.js"></script>
    <![endif]-->
    <!--[if IE]>
        <script src="[{ $oViewConf->getResourceUrl() }]js/jquery-fonteffect-1.0.0.js"></script>
        <script src="[{ $oViewConf->getResourceUrl() }]js/fonteffect.oxid.js"></script>
    <![endif]-->

Jetzt sieht es auch im IE so aus, wie in allen anderen Browsern.

Danke und Gruß:cool:

[I]edit by Mod: Vollzitat entfernt[/I]