Javascript-Problem in IE8 / Slideshow / Wordpress

[Firithlaith]

Hallo,

ich habe eine Slideshow auf einer Wordpress-Seite erstellt (mit Artisteer - ja, ich weiß, nicht optimal aber musste schnell gehen).

Das ist die Seite: caro.sillie.de

Im FF wird es mir korrekt angezeigt, aber im IE8 so ganz und gar nicht. Die Slideshow wird gar nicht angezeigt, die Sidebar auch nicht und das Layout nicht so wie es aussehen sollte.

Folgende Fehlermeldung:

Details zum Fehler auf der Webseite

Benutzer-Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E)
Zeitstempel: Tue, 24 Jul 2012 05:32:01 UTC


Meldung: 'css(...)' ist Null oder kein Objekt
Zeile: 310
Zeichen: 17
Code: 0
URI: http://caro.sillie.de/wp-content/the...t.js?ver=3.4.1


Es scheint sich um folgende Zeile zu drehen (dick markiert)

var shadow = 0;
        if (subm.length > 0) {
            var lnk = itm.children("a");
            var lnkWidth = lnk.outerWidth();
            itm.css("width", Math.round(parseFloat(lnkWidth, 10)) + "px");
            var menubarMargin = 0 * 2; // margin * 2 sides
            var menubarBorder = 0 * 2; // border 1 side
            var submWidth = subm.width() + shadow + menubarMargin + menubarBorder;
            var w = submWidth - lnkWidth;
            jQuery("<div class=\"ext-m\"></div>").insertBefore(lnk);
            if (w < 0) {
                var submA = subm.children("li").children("a");
                var pL = parseInt(submA.css("padding-left").replace("px", ""), 10) || 0;
                var pR = parseInt(submA.css("padding-right").replace("px", ""), 10) || 0;
               [B] var bL = parseInt(submA.css("border-left").replace("px", ""), 10) || 0;[/B]
                var bR = parseInt(submA.css("border-right").replace("px", ""), 10) || 0;
                subm.children("li").children("a").css("width", (lnkWidth - pL - pR - bL - bR) + "px");
                submWidth = subm.width() + shadow + menubarMargin + menubarBorder;
                w = submWidth - lnkWidth;
            }
            jQuery("<div class=\"ext-l\" style=\"width: " + (lw > 0 ? lw : Math.round(parseFloat(w, 10))) + "px;\"></div>").insertBefore(lnk);
            jQuery("<div class=\"ext-r\" style=\"width: " + (rw > 0 ? rw : Math.round(parseFloat(w, 10))) + "px;\"></div>").insertBefore(lnk);
            itm.addClass("ext");
        }

Das ist die komplette Datei: http://www.sillie.de/script.txt

Ich hoffe mir kann jemand helfen, verzweifle bald!

lg

Firithlaith

[Kropff]

Also bei mir fragt der IE, ob ich ein Addon ausführen möchte. Wenn ich das bestätige, sieht es genaus so aus wie im FF. Nämlich ziemlich verrutscht.

Peter

[Firithlaith]

Mittlerweile habe ich auch eine komplett andere Slideshow drin und ein komplett anderes Problem - nämlich die Positionierung.

Wie mache ich es, dass die Slideshow genau über dem Hintergrundbild ist?

Ich habe die Slideshow hier in Wordpress eingefügt:

<div id="sis-main">
    <div class="cleared reset-box"></div>
    <div class="sis-header">
        <div class="sis-header-position">
            <div class="sis-header-wrapper">
                <div class="cleared reset-box"></div>
                <div class="sis-header-inner">
<?php do_shortcode( '[responsive_slider]' ); ?>

              <div class="sis-logo">
                </div>
                </div>

Der CSS Code vom Hintergrund-Bild lautet:

div.sis-header
{
   min-width: 700px;
   max-width: 1536px;
   margin: 0 auto;
   position: relative;
   z-index: -5;
   width:80%;
   height: 450px;
   margin-top: 165px;
   margin-bottom: 0;
}
.sis-header-position
{
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
} 

.sis-header-wrapper 
{
   position: relative;
   top:0;
   width:100%;
   margin:0 auto;
}
.sis-header-inner 
{
   position: relative;
   margin: 0 1px;
}

.sis-header-inner:after
{
   position: absolute;
   z-index:-1;
   display:block;
   content:' ';
   top: 0;
   width:100%;
   height: 450px;
   background-image: url('images/slideshow.png');
   background-repeat: no-repeat;
   background-position: center;
}

So und der von der Slideshow:

.responsive-slider.flexslider {
	    width: 865px;
	    position: absolute;
            background-position: center; 	}

Jetzt wird das auf jedem Monitor anders angezeigt. Wie kann ich das geschickter lösen?

lg

[Kropff]

Hab mal ein wenig herumgespielt. Du musst aus dem .sis-header-inner:after ein .sis-header-inner machen, und dann mit background-position arbeiten. Und beim .sis-header-wrapper muss die position angepasst werden. Denke ich zumindest, denn die CSS-Anweisungen wirken hier und da ein wenig krude.

Peter

[Firithlaith]

Hallo Peter,

danke dir für deine Hilfe.

ich muss jetzt nochmal nachfragen: Wenn ich das ändere, ändere ich dann nicht nur die Hintergrundposition? Weil die finde ich eigentlich ok.

Es ist im responsive Slider auch möglich, einen Hintergrund anzugeben:

/* FlexSlider Default Theme
*********************************/
.flexslider {background-image: url('images/slideshow.png'); position: absolute; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; zoom: 1;}
.flexslider .slides {zoom: 1;}
.flexslider .slides > li {position: relative;}
/* Suggested container for "Slide" animation setups. Can replace this with your own, if you wish */
.flex-container {zoom: 1; position: relative;}

Das habe ich mal probiert, aber das ist dann immer noch nicht richtig (hier habe ich das ursprüngliche Hintergrundbild entfernt und dem Slider ein Hintergrundbild zugewiesen - passt halt nur irgendwie nicht)


Ich kann den Slider damit positionieren:

.responsive-slider.flexslider {
	    width:920px;
	    
	    margin:30px auto 0 auto;
	}

Jetzt kann ich das natürlich mit dem ursprünglichen Hintergrund so anpassen, dass es bei mir gut aussieht - auf anderen Monitoren siehts dann wieder grottig aus ;-)

Was genau mache ich falsch? Und vor allem, warum kann ich den Slider nicht wirklich mittig positionieren? Habe jetzt nochmal ein Div außenrum gemacht und den mit margin: auto positioniert, den Slider auch margin: auto gesetzt - eigentlich müsste das doch jetzt exakt mittig sein oder??

[Kropff]

Wie ich schon sagte, das CSS macht auf mich einen kruden Eindruck. Ich werde mir das heute Abend noch mal anschauen.

Peter

[Firithlaith]

Ja für mich ehrlich gesagt auch. Hatte das um Zeit zu sparen, da ich vorher noch nie ein Theme für Wordpress erstellt hab, in Artisteer gemacht. Mittlerweile habe ich mehr Zeit damit verbracht Fehler von Artisteer auszubügeln als sonst was :-/

Hätte es wahrscheinlich schneller hinbekommen wenn ich es ganz selbst gemacht hätte :S

[Kropff]

Ja für mich ehrlich gesagt auch. Hatte das um Zeit zu sparen, da ich vorher noch nie ein Theme für Wordpress erstellt hab, in Artisteer gemacht. Mittlerweile habe ich mehr Zeit damit verbracht Fehler von Artisteer auszubügeln als sonst was :-/

Hätte es wahrscheinlich schneller hinbekommen wenn ich es ganz selbst gemacht hätte :S

Oder was Vernünftiges genommen hättest. Selbst nach einer Stunde rumprobieren ist das Ergebnis immer noch nicht so, wie es sollte.

Ich habe fertig. Besorg dir einen vernünftigen Slider.

Peter

[Firithlaith]

Hallo Peter,

erstmal vielen vielen Dank das du dir die viele Mühe für mich gemacht hast!

Glaubst du, dass das Problem nur am Slider liegt?

Ich probiere es heute Abend mal mit dem NivoSlider...

Liebe Grüße

Firith

[Firithlaith]

So, mit dem Nivoslider geht es nun.

Ich verzichte auf den Hintergrund, ist mir jetzt irgendwie zu doof :-(