Firefox vs. IE

Hallo und frohe Weihnachten nachträgloich.

Ich beschäftige mich mit der CE 4.4.x Version jetzt schon eine Weile, war zu Beginn ein Newbie und wollte so langsam “aufsteigen”. Aber wie es scheint, fehlt mir noch sehr viel.

Ich habe eine Bannerrotation mit dem Nivo-Slider auf der Startseite eingebaut, die auch wunderbar funktioniert (hat). Allerdings nur im Firefox. Im IE verschob sich das Ganze nach rechts. Daraufhin habe ich den Slider einfach wieder rausgenommen und den Begrüßungstext auf 560px (body.welcome) gesetzt, damit wenigstens ein ganzspaltiger Text zu lesen ist. Das klappt im Foirefox, im IE leider auch nicht mehr. Der Text ist zu breit. Zusätzlich ändert sich jetzt auch ncihts mehr an der Breite im Firefox, wenn ich z.B. (zu Testzwecken), body.welcome auf 280 zurück setze.

By the way, Cache ist geleert…

Was mache ich falsch?

Danke für Eure Hilfe !!!

beachte bitte, dass gewisse features des sliders nicht im IE gehen (6-8) wie z.b. ein schattierter rand etc. mit den optionen also mal spielen.

ansonsten weiß ich grad nicht, wo es bei dir was verschiebt. schau doch mal auf meiner startseite da hab ich auch den nivoslider drin (ketchup-mayo-senf)

Hallo caladan (cooler Name),

danke für die Antwort… Dann beschreibe ichs mal etwas genauer… Hier ist die _header.tpl, Nivo-Slider-Zeilen sind auskommentiert im Moment…

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
<html[{if $oView->getActiveLangAbbr()}] lang="[{ $oView->getActiveLangAbbr() }]"[{/if}] [{if $oViewConf->getFbAppId()}]xmlns:fb=“http://www.facebook.com/2008/fbml”[{/if}]>
<head>

… (alles original)

[{if $rsslinks}]
[{foreach from=$rsslinks item=‘rssentry’}]
<link rel=“alternate” type=“application/rss+xml” title="[{$rssentry.title|strip_tags}]" href="[{$rssentry.link}]">
[{/foreach}]
[{/if}]

[B]&lt;!-- FMU: Hier Nivo Slider --&gt;[/B]       [B]
&lt;!-- FMU: Temporär wieder ausgeblendet, weil es im IE nicht richtig angezeigt wird.
&lt;link rel="stylesheet" type="text/css" href="[{ $oViewConf-&gt;getResourceUrl() }]nivo-slider.css" media="screen" /&gt;
&lt;script src="[{ $oViewConf-&gt;getResourceUrl() }]jquery-1.4.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="[{ $oViewConf-&gt;getResourceUrl() }]jquery.nivo.slider.pack.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="[{ $oViewConf-&gt;getResourceUrl() }]myinits.js" type="text/javascript"&gt;&lt;/script&gt;
--&gt;
&lt;!-- Ende Nivo Slider Definitionen --&gt;[/B]

</head>
<body onload=“flyout();”>

… weiter alles Original

<div id=“content”>
<div id=“left”>[{ include file="_left.tpl" }]</div>
<div id=“path”>[{ include file="_path.tpl" is_start=$isStart}]</div>
<div id=“right”>[{include file="_right.tpl" }]</div>
<div id=“body”>
[{oxid_include_dynamic file=“dyn/newbasketitem_message.tpl”}]
[{include file=“inc/error.tpl” Errorlist=$Errors.default}]

    [B]&lt;!-- FMU: Weitere slider-Einbauten --&gt;[/B]   [B]
    &lt;!-- FMU: Temporär wieder ausgeblendet, weil es im IE nicht richtig dargestellt wird
    &lt;div id="slider"&gt;
        &lt;img src="http://www.gabelerie.de/out/pictures/Slider/Slider_Gabelerie.jpg"  alt="" title="Ihr Online-Webshop ist 24x365 erreichbar"/&gt;
        &lt;img src="http://www.gabelerie.de/out/pictures/Slider/Slider_Albec.jpg"      alt="" title="Über das Suchfeld Hersteller finden Sie die zu Ihnen passende Besteckaufbewahrung von Albec"/&gt;
        &lt;img src="http://www.gabelerie.de/out/pictures/Slider/Slider_1.jpg"          alt="" title="Unser Klassiker - Die 75-teilige Aufbewahrung von Albec für Ihr Besteck"/&gt;
        &lt;img src="http://www.gabelerie.de/out/pictures/Slider/Slider_2.jpg"          alt="" title="Besteck von mono - Ess- und Tischkultur mit viel Freude"/&gt;
    &lt;/div&gt;

    &lt;script type="text/javascript"&gt;
       $(window).load(function() {
          $('#slider').nivoSlider({
             effect:'random', //Specify sets like: 'fold,fade,sliceDown'
             slices:15,
             animSpeed:500, //Slide transition speed
             pauseTime:6000,
             startSlide:0, //Set starting Slide (0 index)
             directionNav:true, //Next & Prev
             directionNavHide:true, //Only show on hover
             controlNav:false, //1,2,3...
             controlNavThumbs:true, //Use thumbnails for Control Nav
             controlNavThumbsFromRel:false, //Use image rel for thumbs
             controlNavThumbsSearch: '.jpg', //Replace this with...
             controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
             keyboardNav:true, //Use left & right arrows
             pauseOnHover:true, //Stop animation while hovering
             manualAdvance:false, //Force manual transitions
             captionOpacity:0.8, //Universal caption opacity
             beforeChange: function(){},
             afterChange: function(){},
             slideshowEnd: function(){}, //Triggers after all slides have been shown
             lastSlide: function(){}, //Triggers when last slide is shown
             afterLoad: function(){} //Triggers when slider has loaded
          });
       });
    &lt;/script&gt;
    --&gt;
    &lt;!-- Ende weitere Einbauten Nivo Slider --&gt;

[/B][COLOR=Black]
Das klappt, allerdings, wie ich meine, nicht ganz so schön wie bei Dir. Wahrscheinlich mache ich noch was falsch. Mehr als das oben habe ich nicht eingebaut.

Im IE ist die Breite des Sliders viel zu groß, sodass verschiedene Kategorien, wie “Frisch eingetroffen” usw. ebenfalls verschoben werden. Damit ist die ganze Startseite nicht gut dargestellt.

Das ist das Problem mit dem Nivo-Slider, momentan ja ausgeschaltet. Hier die Baustelle, schau’s #Dir mal im IE an (www.gabelerie.de). Firefox=gut, IE= nicht gut.

[/COLOR]

Das fehlt ein ganz entscheidender Teil, um dir helfen zu können. Das Problem wird zu 99% von einer fehlerhaft interpretierten CSS-Angabe verursacht werden.

Am besten du aktivierst den Nivo-Slider erstmal wieder und wir können dann am lebenden Objekt testen. Das sollte schnell erledigt sein.

Is wieder da :slight_smile: Danke schon jetzt für Deine Hilfe.

Gruß aus Ehningen :slight_smile:

Ok, wo fangen wir an.

  • Du hast versucht das Zend-Logo im Partnerbereich auszukommentieren. Dabei ist dir ein Fehler unterlaufen, der nun das Layout der Seite/des Footers zerstört.
  • Im IE gibt es einen javascript-Error in der “myinits.js”
  • Die Grafiken “prev” und “next” für den Slider werden nicht geladen. Überprüf mal die Ordner.
  • Der Slider wird auf allen Seiten gezogen. Er soll aber sicher nur auf die Startseite oder?

Diese Puntk

OK, stimmt, das sollte weg. ist es auch im Firefox…

Hier die letzten Zeilen aus der _left.tpl

<!-- FMU - Trusted Shop Partner Logo weg
<strong class=“h2” id=“test_LeftSidePartnersHeader”>[{ oxmultilang ident=“INC_LEFTITEM_PARTNERANDSEAL” }]</strong>

<div class=“partners”>
<div class=“logo”>
[{include file=“inc/trustedshops_item.tpl”}]
</div>
<div class=“logo”>
<a href=“http://www.zend.com” id=“link.zendSite”><img src="[{$oViewConf->getImageUrl()}]
zend_logo.gif" alt=""></a>
[{oxscript add=“oxid.blank(‘link.zendSite’);”}]
</div>
</div>
–>

Im IE ist es teilweise ncoh da, stimmt. Aber warum? Was kann man für Fehler machen beim Auskommentieren? Scheinbar doch mehr als man ahnt. Stehe auf dem Schlauch …

einfach noch zusätzlich die Smarty-Anweisungen auskommentieren mit

<!-- FMU - Trusted Shop Partner Logo weg
[{*
<strong…
hier steht Dein Code Block
</div>
*}]
–>

Der IE wird anscheinend von den vielen HTML-Kommentaren etc. irrtiert und rendert dann einfach irgendwas. Du kannst den Fehler auch gut in der Quelltextansicht des IE sehen. Kommentare sind dort grün dargestellt.
Am besten du entfernst solche Sachen komplett aus dem Quelltext. Auskommentieren ist nur ein Provisorium.

[QUOTE=ChristophH;47123]Der IE wird anscheinend von den vielen HTML-Kommentaren etc. irrtiert und rendert dann einfach irgendwas. Du kannst den Fehler auch gut in der Quelltextansicht des IE sehen. Kommentare sind dort grün dargestellt.
Am besten du entfernst solche Sachen komplett aus dem Quelltext. Auskommentieren ist nur ein Provisorium.[/QUOTE]

Perfekt, das war der entscheidende Hinweis.

Der Fehler der myinitis.js müsste auch draußen sein. Da wollte ich mal “elegant” arbeiten und habe die Initialisierungen in eine separate js gepackt, trotzdem aber weiter unten das Ganze nochmals drinnen gelassen. Jetzt ist es nur noch unten drinnen, die myinits.js wird nciht mehr eingebunden.

Jetzt fehlt mir nur noch das Hochladen der next und prev Buttons. Kapiere ich nicht ganz, stört mich auch ein wenig… Muss noch ein bisschen rumprobieren, außer, Du hast einen schnellen Tipp?

Ansonsten wünsche ich einen guten Rutsch ins enue Jahr !!!

[QUOTE=ChristophH;47120]Ok, wo fangen wir an.

  • Du hast versucht das Zend-Logo im Partnerbereich auszukommentieren. Dabei ist dir ein Fehler unterlaufen, der nun das Layout der Seite/des Footers zerstört.
  • Im IE gibt es einen javascript-Error in der “myinits.js”
  • Die Grafiken “prev” und “next” für den Slider werden nicht geladen. Überprüf mal die Ordner.
  • Der Slider wird auf allen Seiten gezogen. Er soll aber sicher nur auf die Startseite oder?

Diese Puntk[/QUOTE]

Wenn ich darauf noch mal zurückkommen darf, speziell "die Grafiken für Prev und Next werden nicht geladen (alles andere klappt jetzt).

  1. Ich habe keine speziellen Grafiken dafür, muss ich mir wohl erstellen, korrekt?
  2. Woran erkennt NivoSlider dann dass z.B. right und left = next und prev sind? Wo muss ich das definieren?

In der Demo des nivo-Sliders gibt es diesen Block:


.nivo-directionNav a {
    display:block;
    width:30px;
    height:30px;
    background:url(images/arrows.png) no-repeat;
    text-indent:-9999px;
    border:0;
}

Der fehlt bei dir, afaik.