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.
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 "normalen" 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>
Zuletzt bearbeitet: