jQuery Accordion Image Slider füntioniert im IE7 und IE8 nicht.

Vansoul · 31.10.2012

jQuery Accordion Image Slider funktioniert im IE7 und IE8 nicht.

Hallo an alle,

ich bin gerade dabei eine Homepage zu erstellen und scheiter an dem Accordion Image Slider.
Eingebunden habe ich den Slider, wie von der Demo-Seite () und soweit so gut. Im FF und IE9 funktioniert der Slider wunderbar nur nicht im IE7 und IE8.
Ich teste die Seite immer mit dem IETester und habe auch die Demo-Seite ausprobiert und dort funktioniert bei der Demo-Seite alles von IE5-IE9.
Ich habe kein Plan, was ich noch ändern muss! Von mir aus könnte man den IE abschaffen.
Vielleicht kann mir jemand von euch einen Tipp geben.

Danke für die Mühen im voraus.

Code:

* {
vertical-align: baseline;
font-weight: inherit;
font-family: inherit;
font-style: inherit;
font-size: 1em;
border: 0 none;
outline: 0;
padding: 0;
margin: 0;
}
 
@font-face {
font-family: 'Puritan20Normal';
src: 
url(type/puritan_regular-webfont.eot) format('eot'),  
url(type/puritan_regular-webfont.woff) format('woff'),  
url(type/puritan_regular-webfont.ttf) format('truetype'),  
url(type/puritan_regular-webfont.svg#webfontJ25dHiGv) format('svg');
font-weight: normal;
font-style: normal;
}
/*----------------------------------------------------------------*/
 
body, html { 
font-size: 100.01%; 
background: #f8f8f8 url(../hp-image/background.png) left top; 
width: 100%; 
height: 100%; 
margin: 0; 
padding: 0; 
}
a { 
text-decoration: none; 
}
 
/*----------Schriften----------*/
h1, h2, h3, h4, h5, h6 { 
font-family: Puritan20Normal;
font-weight: normal;
color: #7D7764;
margin-bottom: 10px;
}
h1 {
font-size: 28px;
}
h2 {
font-size: 24px;
}
h3 {}
h4 {}
h5 {}
h6 {}
 
p { 
font-family: Helvetica, Arial, sans-serif; 
color: #8a8985; 
font-size: 14px; 
margin-bottom: 20px; 
line-height: 20px;
}
 
/*----------Geruest----------*/
#container { 
position: relative; 
width: 960px; 
height: auto!important; 
height:100%; /* IE6: treaded as min-height*/ 
z-index: 10; 
min-height: 100%; 
margin: 0 auto 0;
padding: 0; 
}
#wrapper {
position: relative; 
z-index: 20;
width: 960px; 
height: auto;
margin-bottom: 100px; 
padding: 0; 
}
.push {
width: 100%; 
height: 100px; 
clear: both; 
margin-right: auto; 
margin-left: auto; 
padding: 0; 
}
#footer {
position: relative;
z-index: 20; 
clear: both; 
height: 100px; 
width: 960px;
margin-top: -100px;
margin-right: auto; 
margin-left: auto;  
padding: 0; 
}
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
}
 
/*----------Header----------*/
#header { 
width: 960px; 
height: 180px;
position: relative; 
padding: 0; 
}
.titel { 
background-color: transparent; 
background-image: url(../hp-image/Titel.png); 
background-repeat: no-repeat; 
background-position: left 10px; 
width: 352px; 
height: 110px; 
position: absolute; 
top: 0; 
left: 0; 
}
.navback { 
background-color: #f4f4f4; 
position: absolute; 
left: 0; 
bottom: 0; 
width: 958px; 
height: 50px; 
padding: 0; 
border: solid 1px #d5d5d5; 
}
.navc { 
background-color: #93caad;
width: 948px; 
height: 40px; 
margin: 5px; 
padding: 0; 
}
 
/*----------content----------*/
#content { 
position: relative; 
width: 960px; 
height: auto;
padding: 0; 
margin: 0;
}
.slidermain { 
background-color: #f4f4f4; 
width: 958px; 
height: 310px; 
margin-top: 20px; 
padding: 0; 
border: solid 1px #d5d5d5; 
}
 
.cl{ 
width: 630px; 
height: auto;  
padding: 0 0 0 5px; 
float: left; 
margin-top: 20px; 
}
 
/*---------slider---------*/
#accordion-slider-wrap {
width: 948px; 
height: 300px;
margin: 5px;
padding: 0;
}
ul#accordion-slider{
 margin: 0;
 padding: 0;
 list-style: none;
 position: relative;
}
ul#accordion-slider li{
 display: block;
 overflow: hidden;
 padding: 0;
 float: left;
 width: 236px;
 height: 300px;
}
 
/*----------sidebar----------*/
.sidebar {
width: 300px; 
height: auto;  
padding: 0; 
float: right; 
margin-top: 20px; 
}
.sidebar a { 
color: #c24646; 
font-style: italic; 
text-align: right; 
}
/*----------clear----------*/
div.clear {
clear : both;
height : 0;
font-size : 0;
margin : 0;
padding : 0;
} 
.clearleft {
clear : left;
height : 0;
font-size : 0;
margin : 0;
padding : 0;
}
.clearright {
clear : right;
height : 0;
font-size : 0;
margin : 0;
padding : 0;
}
/* für IE7 */
*:first-child+html .clear { 
min-height: 0; 
}
/* für IE6 */
* html .clear { 
height: 1%; 
}
 
/*----------Head-Navigation----------*/
#menu { 
width: 100%;
height: 40px; 
}
#menu ul {
margin: 0;
padding: 0;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
list-style: none;
display: inline-block;
margin-left:-3px;
}
#menu a {
display: block;
padding: 0 10px 0 20px;
background: url(../hp-image/Pfeil.png) no-repeat 5px 50%;
line-height: 40px;
position:relative;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: Puritan20Normal;
font-weight: 300;
color: #c24646;
border: none;
}
#menu a:hover {
text-decoration: none;
color: #5B5652;
text-shadow: 1px 1px 0px #d5d5d5;
}
#nav li a#current {
color: #5B5652;
text-shadow: 1px 1px 0px #f4f4f4;
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <title>Vitruvians - Basset Artésien Normand</title>
        <link href="css/layout.css" rel="stylesheet" type="text/css" media="all" />
        <link href="css/basic.css" rel="stylesheet" type="text/css" media="all" />
        <link href="http://fonts.googleapis.com/css?family=Dancing+Script" rel="stylesheet" type="text/css" />
 
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
 
        <script type="text/javascript" src="js/jquery.kwicks-1.5.1.js"></script>
        <script type="text/javascript" src="js/jquery.kwicks-1.5.1.pack.js" ></script>
 
        <script type="text/javascript">
            $().ready(function() {  
            $('#accordion-slider').kwicks({  
            max : 750,  
            spacing : 1
            });  
            });
        </script>
 
        <style type="text/css" media="all"><!--
--></style>
 
 
<!--[if !IE 7]>
    <style type="text/css">
        #container {display:table;height:100%}
    </style>
<![endif]-->
 
    </head>
 
    <body>
        <div id="container">
            <div id="wrapper">
                <div id="header">
                    <div class="titel"></div>
                <div class="navback">
                    <div class="navc">
 
                    </div>
                </div>
            </div>
                <div id="content">
                    <div class="slidermain">
                        <div id="accordion-slider-wrap">
                            <ul id="accordion-slider">
                                <li><img src="Bilder/Slider/Happy02.jpg" width="750" height="300" alt="Happy"/></li>
                                <li><img src="Bilder/Slider/Hilly.jpg" width="750" height="300" alt="Hilly"/></li>
                                <li><img src="Bilder/Slider/Happy02.jpg" width="750" height="300" alt="Happy"/></li>
                                <li><img src="Bilder/Slider/Hilly.jpg" width="750" height="300" alt="Hilly"/></li>
                            </ul>
                        </div>
                    </div>
                        <div class="cl">
                            <h1>Vitruvians - Basset Artésien Normand</h1>
                            <p>Ich bin Blindtext. Von Geburt an. Es hat lange gedauert, bis ich begriffen habe, was es bedeutet, ein blinder Text zu sein: Man macht keinen Sinn. Man wirkt hier und da aus dem Zusammenhang gerissen. Oft wird man gar nicht erst gelesen. Aber bin ich deshalb ein schlechter Text? Ich weiß, dass ich nie die Chance haben werde im Stern zu erscheinen. Aber bin ich darum weniger wichtig? Ich bin blind! </p>
                        <p>Aber ich bin gerne Text. Und sollten Sie mich jetzt tatsächlich zu Ende lesen, dann habe ich etwas geschafft, was den meisten &quot;normalen&quot; Texten nicht gelingt.</p>
                    </div>
                        <div class="sidebar">
                            <h2>Neues</h2>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <a href="#">lese mehr </a></p>
                        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <a href="#">lese mehr </a></p>
                    </div>
                    <div class="clear"></div>
                </div>
    <div class="push"></div>
        </div>
 
        <div id="footer">
 
        </div>
    </body>
 
</html>

cebito · 31.10.2012

AW: jQuery Accordion Image Slider füntioniert im IE7 und IE8 nicht.

Entferne mal den Aufruf der ...pack.js, der Fehler wird in dieser Datei angemahnt. Und wenn ich es richtig sehe, brauchst du die nicht, im verlinkten Beispiel ist die auch nicht eingebunden.
Edith sagt noch - ist ja nur die komprimierte version der anderen also doppelt gemoppelt, dat kann schon mal 'nen Browser durcheinanderbringen...

hub · 31.10.2012

AW: jQuery Accordion Image Slider füntioniert im IE7 und IE8 nicht.

Moin moin,
hab mal kurz reingeschaut. Ist ne doch schon ältere jQuery-Version. Du kannst sie mal zum Test gegen die aktuelle austauschen. Testen kann ich das leider erst morgen irgendwann. Hier hab ich keinen Zugriff auf nen älteren IE.
Also wenn sich kein anderer mehr meldet, bis morgen ...

Gruß Ulli

PS. zu langsam

Vansoul · 01.11.2012

AW: jQuery Accordion Image Slider füntioniert im IE7 und IE8 nicht.

Hallo,

ich habe den Accordion Slider so wie auf der eingebunden.
Teste ich die Demo-Seite im IETester kommen auch keine Mehlermeldungen.
Wenn ich meine Seite teste kommt Fehlermeldung
- Das Objekt unterstützt diese Eigenschaft oder Methode nicht.
- Zeile: 11
- Zeichen: 252

In der Zeile 11 ist :
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Und es gibt auch eine Fehlermeldung in der Zeile 12 und dort ist:
<script type="text/javascript" src="js/jquery.kwicks-1.5.1.pack.js"></script>

Ich selber runzel nur die Augenbrauen.

Vansoul · 03.11.2012

AW: jQuery Accordion Image Slider füntioniert im IE7 und IE8 nicht.

Sich an den Kopf fast. cebito hat recht und ich blind. Klar muss bei (src="js/jquery.kwicks-1.5.1.pack.js" das pack weg. Und ich hatte im engl. Forum gelesen, dass in der .js die Zeile

container = $(this);
auf
var container = $(this);
geändert werden muss.

Gruß ;o)