IE6-Problem - Button verschwunden und springender Text?

[hinkel11]

Hallo,

ich hab mal wieder ein Problem mit dem IE6. Im Firefox und IE8 sah von Anfang an alles so aus wie es soll. Für den IE7 musste ich ein separates Stylesheet anlegen. Haut soweit auch hin. Doch für den IE6 bekomme ich es einfach nicht hin.

Hier die Seite:
http://www.corona-gehren.de/main

1.Problem:
In der Slideshow springen rechts in der Navigation die Zahlen hin und her, je nachdem welcher Slide aktiv ist.

Hier die betreffenden Klassen:

#navi-outer li a span.navbar-tagline { 
padding-top:10%; 
padding-left:54%; 
display:block; 
z-index:100; 
font-family:Verdana; 
font-weight:normal; 
font-size:3.0em; 
line-height:12px; color:#f2f2f2; 
} 

#navi-outer li a:hover span.navbar-tagline, #navi-outer li a.navi-active span.navbar-tagline { 
padding-top:10%; 
padding-left:54%; 
display:block;
z-index:100; 
font-family:Verdana; 
font-weight:normal; 
font-size:3.0em; 
line-height:12px; 
color:#333;

Wie man sieht unterscheiden sich beide Klassen nur bei "color: ..." und sonst nicht, deshalb wundert es mich, warum die Zahlen hin und her springen.

2. Problem:
In der Slideshow, am unteren Rand, gibt es in allen Browsern bis auf IE6 einen kleinen roten "Mehr"-Button. Dieser ist im IE6 einfach nicht da.

Hier die betreffenden Klassen:

.fpss-introtext .slidetext a.readon { 
top:23%; 
right:0px; 
position:absolute; 
bottom:12px; 
width:60px; 
margin:0; 
padding:6px 0 40px 12px; 
background:url(readmore.png) no-repeat; 
color:#fff; border:none; 
} 

.fpss-introtext .slidetext a.readon:hover { 
top:23%; 
right:0px; 
position:absolute; 
bottom:12px; 
width:60px; 
margin:0; 
padding:6px 0 40px 12px; 
background:url(readmore-hover.png) no-repeat; 
color:#fff; 
}

Was kann ich da machen?
Danke schonmal vorab.

 

[Maik]

Moin,

ich empfehle dir, in deinen Webseiten http://code.google.com/p/ie7-js/ für den hoffnungslos veralteten IE6 aus dem letzten Jahrhundert zu implementieren (zudem er mit Blick auf die weitaus deutlich größere Gemeinde der Konkurrenz-Browser, allen voran Mozilla Firefox, sowie die aktuelle 8er-Version und dem bevorstehenden IE9 schon lange zur Randgruppe der Webbrowser zählt, die nur noch schwindend gering vereinzelt im Web auftritt, und somit eigentlich keiner besonderen Beachtung mehr bedarf), damit er sich wie der standardkonforme IE7 verhält (und u.a. auch semitransparente PNGs korrekt anzeigt, anstatt den genutzten "iepngfix.htc"-Hack für jedes einzelne PNG-Bild anzuwenden), bevor du in diesem neuen Jahr weiterhin jeden seiner einzelnen Bugs in deinen Seiten mit einem IE6-spezifischen CSS manuell fixen mußt.

<!--[if lt IE 7]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js" type="text/javascript"></script>
<![endif]-->

Beide IE-Versionen kannst du aber auch veranlassen, wie der IE8 den CSS-Spezifikationen des W3C zu folgen, dann entfällt obiger Codeschnipsel.

<!--[if lt IE 8]>
<script src="http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type="text/javascript"></script>
<![endif]-->

mfg Maik

 

[hinkel11]

Danke für den Tip mit dem script? Hat mich auf jeden Fall schon mal etwas vorangebracht.

Mit dem ersten Code (also <!--[if lt IE 7]>) hatte es nicht so richtig funktioniert. Zwar war der Button zu sehen, doch tauchten dafür andere neue Probleme auf.
Nun hatte ich es mit dem anderen Code versucht, der IE& und IE7 dazu veranlässt sich wie IE8 zu verhalten. Hatte diesen Code eingefügt und dafür die beiden schon existierenden conditional comments für den ie6 sowie den ie7 entfernt, weil dachte, dass ich diese nicht mehr benötigt werden. Dem war aber nicht so, sodass ich nun alle drei Codes im head meiner index.php habe. Sieht nun so aus:

<!--[if IE 6]><style type="text/css">@import url(templates/corona03/css/ie6.css);</style><![endif]-->
<!--[if IE 7]><style type="text/css">@import url(templates/corona03/css/ie7.css);</style><![endif]-->
<!--[if lt IE 8]>
<script src="templates/corona03/css/IE8.js" type="text/javascript"></script>
<![endif]-->

Mit dieser Variante bin ich am ehesten da wo ich hin will, d.h. der Button ist sichtbar und mit ein paar Änderungen in der separaten ie6.css auch dort wo er sein sollte. Der Überblendeffekt, also wenn die Slides rechts in der Slideshow wechseln, ist zwar etwas hässlich, aber naja ... muss reichen und wird man wohl auch nicht anders hinbekommen in IE6.

Das einzige was noch bleibt, wäre das Hinundherspringen der Zahlen beim wechseln der Slides. Vielleicht noch eine Idee? Danke.

Hatte mich mit dem IE6 eigentlich auch schon seit längerem nicht mehr beschäftigt. Wenn ich mir aber die Zugriffsstatistiken für meine HP ansehe, ist die Anzahl von IE6-Usern doch noch so hoch, dass ich mich darum kümmern muss, auch diesen Besuchern gerecht zu werden.

 

[Maik]

Das einzige was noch bleibt, wäre das Hinundherspringen der Zahlen beim wechseln der Slides. Vielleicht noch eine Idee?

Tut mir leid, ich hab derzeit keinen blassen Schimmer, was den IE6 zu diesem kuriosen Verhalten veranlaßt, und wie man dem begegnen kann. Zumal ie8.js ihm das auch nicht austreiben konnte.

Dann dürfen sich halt die IE6-Nutzer einer kleinen zusätzlichen Slide-Animation erfreuen ;-)

mfg Maik