✔ Problem im IE, Slideshow verschiebt sich

[derleo]

Hallo Forum,
ich bin gerade dabei eine neue Seite online zu stellen, wobei ich aber momentan ein Problem mit der Darstellung einer Javascript-Slideshow im Internet Explorer habe.
Ich probiere jetzt schon länger daran rum und tüftle mit margin/padding - und floatangaben rum, komme aber einfach zu keinem Ergebnis.
In den aktuellen Version von Firefox und Opera funktioniert die Seite problemlos.

Problemseite: http://www.leonardclaus.de/test
CSS: http://www.leonardclaus.de/test/stylesheet.css

Vielleicht weiß ja jemand eine Lösung, ich würde mich sehr freuen!

LG
Leonard

 

[Maik]

Hi und Willkommen im Forum

Dir kommt da offensichtlich der The IE5/6 Doubled Float-Margin Bug in die Quere, wenn ich im IE6 die nach rechts verschobene Ausrichtung so betrachte.

Die Slideshow läuft dann dorthin (zurück), wo sie hingehört: in die Mitte

Lösung:

#links {
width: 21px;
height: 140px;
overflow: hidden;
float: left;
margin: 63px 20px 0 93px;
display:inline;
}

#rechts {
width: 21px;
height: 140px;
overflow: hidden;
float: left;
margin: 63px 0 0 20px;
display:inline;
}

mfg Maik

 

[derleo]

Hallo Maik,
vielen Dank ersteinmal für die schnelle Hilfe!

Also an der richtigen Stelle ist die Slideshow jetzt, weißt du eventuell auch warum die bilder innerhalb der slideshow ineinander ragen?

http://www.leonardclaus.de/test

 

[Maik]

Derzeit leider nein. Mir ist eben aber im IE6 auch aufgefallen, dass beim Klick auf die Steuerungspfeile das Bild im Viewport von #mitte verschoben wird.

mfg Maik

 

[Quaese]

Hi,

ich geh mal davon aus, dass das unterschiedliche Interpretieren des Boxmodells für das Verhalten verantwortlich ist.

Versuch mal die Breite des Slide-Anzeigebereichs für die Browser entsprechend anzuzeigen.

#mitte {
position: relative;
overflow: hidden;
width: 615px !important;
width: 619px;
height: 187px;
float: left;
padding: 0px;
}

Jetzt muss das Objekt noch Browser-abhängig initialisiert werden.

new iCarousel("slide", {
  idPrevious: "left",
  idNext: "right",
  idToggle: "undefined",
  item: {
    klass: "section",
    size: ((document.all && !window.opera && Browser.Engine.version<5)? 619 : 611) 
  },
  animation: {
    duration: 200,
    amount: 1
  }
});

Vielleicht hilft das weiter.

Ciao
Quaese

 

[Maik]

Hi,

Versuch mal die Breite des Slide-Anzeigebereichs für die Browser entsprechend anzuzeigen.

#mitte {
position: relative;
overflow: hidden;
width: 615px !import;
width: 619px;
height: 187px;
float: left;
padding: 0px;
}

du meinst hier wohl eher:

#mitte {
position: relative;
overflow: hidden;
width: 615px !important;
width: 619px;
height: 187px;
float: left;
padding: 0px;
}

mfg Maik

 

[Quaese]

... ANT ... da ist die Ameise wohl stiften gegangen ;-)