✔ Opacity in IE plötzlich kaputt

D34DL1NES · 15. Juli 2009

Hallo,
ich habe mithilfe von Jquery eine Slideshow geschrieben, bei der auch Text der zum Bild gehört verändert wird, obgleich verändern das falsche Wort ist: ich habe mehrere Divs die übereinander liegen und alle bis auf das "aktive" bekommen opacity=0; . Das funktionierte auch wunderbar in FF 3.1/5, Opera 9.64 Safari 3/4 und auch in allen gängigen IE Varianten, nämlich 6/7/8. doch auf einmal als ich auf der betreffenden Seite nochmal etwas checken wollte bemerkte ich das im IE aufeinmal alle Transparenzen ignoriert werden, und zwar von Anfang an nicht nur während des Transformierens.

gut zu sehen hier:

http://edgetestsrv.kilu.de/CSSTest/

allerdings nur im IE!

ich habe auch als CSS:

Code:

    opacity: 0;
    filter: alpha(opacity=0);

extra festgelegt aber nichts tut sich.

Ich bin ratlos.

Hier der Code:

HTML:

HTML:

            <div id="content">

                <div id="feature">
                
                    <div id="SliderContainer">
                        
                        <h5 id="infoblock">info:</h5>
                        <h5 id="workblock">work:</h5>
                        <h5 id="urlblock">url:</h5>
                        
                        <div id="slidertitlebackground">
                        
                            <div id="alphacontainer"></div>
                            
                            <p id="availableat">available at</p>
                        
                        </div>
                        
                        <div id="SliderImages">
                        
                        
                            <div class="slider-button" id="slider-left-button" >
                            
                                <img id="sliderlefthover" src="Images/SliderButtons/sliderleft_hover.png" alt="" />
                            
                            </div>
                            
                            <div class="slider-button" id="slider-right-button" >
                            
                                <img id="sliderrighthover" src="Images/SliderButtons/sliderright_hover.png" alt="" />
                            
                            </div>
                            
                        
                        
                            <div class="slides" id="Slide1">
                            
                                <img src="Images/Slides/Slide1.png" alt="" />
                            
                            </div>
                            
                            <div class="slides" id="Slide2">
                            
                                <img src="Images/Slides/Slide2.png" alt="" />
                            
                            </div>
                            
                            <div class="slides" id="Slide3">
                            
                                <img src="Images/Slides/Slide1.png" alt="" />
                            
                            </div>
                        
                        </div>
                        
                        <div id="SliderText">
                            
                            <div class="slider-text" id="Slide1Text">
                            
                                <p class="title">title1</p>
                                <a class="slidertitlelink" href="#">link1</a>
                        
                                <p class="info">info1</p>
                            
                                <p class="work">work1</p>
                            
                                <a class="url" href="#">url1.provider.de</a>
                        
                            </div>
                            
                            <div class="slider-text" id="Slide2Text">
                        
                                <p class="title">title2</p>
                                <a class="slidertitlelink" href="#">link2</a>

                                
                                <p class="info">info2</p>
                            
                                <p class="work">work2</p>
                            
                                <a class="url" href="#">url2.provider.de</a>
                        
                            </div>
                            
                            <div class="slider-text" id="Slide3Text">
                        
                                <p class="title">title3</p>
                                <a class="slidertitlelink" href="#">link3</a>
                                
                                <p class="info">info3</p>
                            
                                <p class="work">work3</p>
                            
                                <a class="url" href="#">url3.provider.de</a>
                        
                            </div>
                    
                        </div>
                    
                    </div>

                 </div>

CSS:

HTML:

/* Home SLIDER  */

#SliderContainer
{
    height: 317px;
    width: 900px;
}

/* SliderButtons */
.slider-button
{
    position: absolute;
    top: 140px;
    height: 34px;
    width: 34px;
    z-index: 200;
    
    opacity: 0;
    filter: alpha(opacity=0);
}

.slider-button img /* Für die Hoverimages */
{
    opacity: 0;
    filter: alpha(opacity=0);
}

#slider-left-button
{
    left: 20px;
    background: url(Images/SliderButtons/sliderleft.png);
}

#slider-right-button
{
    left: 420px;
    background: url(Images/SliderButtons/sliderright.png);
}

/* ENDE SliderButtons */


.slides
{
    position: absolute;
    padding-top: 10px;
    padding-left: 10px;
    opacity: 0;
    filter: alpha(opacity=0);
}

.slider-text
{
    position: absolute;
    top: 0px;
    left: 500px;
    opacity: 0;
    filter: alpha(opacity=0);
}

#availableat
{
    position: absolute;
    top: 28px;
    left: 10px;
}

.slidertitlelink
{
    position: absolute;
    top: 38px;
    left: 72px;
}

#infoblock, #workblock, #urlblock
{
    position: absolute;
    left: 500px;
}

#infoblock
{
    top: 70px;
}
#workblock
{
    top: 240px;
}
#urlblock
{
    top: 260px;
}

#slidertitlebackground
{
    position: absolute;
    left: 500px;
    top: 10px;
    
    background: url(Images/InfoHeader.png) repeat-x;
    
    height: 44px;
    width: 400px;
}

#alphacontainer
{
    width: 200px;
    height: 40px;
    
    margin-top: 2px;
    margin-left: 2px;
    
    background: white;
    
    opacity: .45;
    filter: alpha(opacity=.45);
}

.title
{
    position: absolute;
    left: 6px;
    top: 6px;
    
    font-size: 33px;
}

.info, .work, .url
{
    position: absolute;
    left: 80px;
    font-size: 13.5px;
    z-index: 900;
}

.info
{
    color: White;
    top: 69px;
}

.work
{
    color: White;
    top: 238px;
}

.url
{
    top: 260px;
}

/* ENDE SLIDER */

JS:

Code:

$(function() {

    /* Config */
    var StartSlide = 2,
        GesamtSlides = 3;
    /* Ende Config */


    /* Statische Variablen */
    var ActualSlide = StartSlide;

    /* Ende Statische Variablen */


    /* Variablen Cache */
    var Images = $("#SliderImages"),
        Buttons = $(".slider-button"),
        LeftButton = $("#slider-left-button"),
        LeftButtonHover = $("#sliderlefthover"),
        RightButton = $("#slider-right-button"),
        RightButtonHover = $("#sliderrighthover");
        
    var Slides = $(".slides"),
        SliderText = $(".slider-text");

    /* Ende Variablen Cache */

    /* Ready Up */
    Slides.animate({ "opacity": 0 }, 1);
    SliderText.animate({ "opacity": 0 }, 1, "", function() {

        $("#Slide" + StartSlide).animate({ "opacity": 1 }, 1);
        $("#Slide" + StartSlide + "Text").animate({ "opacity": 1 }, 1);

    });
    /* Ende Ready Up */

    Images.hover(function() {

        Buttons.stop().animate({ "opacity": 1 });

    }, function() {

        Buttons.stop().animate({ "opacity": 0 });

    });

    /* Left Button */

    LeftButton.hover(function() {

        LeftButtonHover.stop().animate({ "opacity": 1 });
        this.style.cursor = 'pointer';

    }, function() {

        LeftButtonHover.stop().animate({ "opacity": 0 });

    });

    LeftButton.click(function() {

        $("#Slide" + ActualSlide).stop().animate({ "opacity": 0 }, 350);
        $("#Slide" + ActualSlide + "Text").stop().animate({ "opacity": 0 }, 350, "", function() {

            if (ActualSlide == 1) {

                ActualSlide = GesamtSlides;

                $("#Slide" + ActualSlide).stop().animate({ "opacity": 1 }, 400);
                $("#Slide" + ActualSlide + "Text").stop().animate({ "opacity": 1 }, 400);

            }
            else {

                ActualSlide--;

                $("#Slide" + ActualSlide).stop().animate({ "opacity": 1 }, 400);
                $("#Slide" + ActualSlide + "Text").stop().animate({ "opacity": 1 }, 400);

            }

        });

    });

    /* Ende Left Button */

    /* Right Button */

    RightButton.hover(function() {

        RightButtonHover.stop().animate({ "opacity": 1 });
        this.style.cursor = 'pointer';

    }, function() {

        RightButtonHover.stop().animate({ "opacity": 0 });

    });

    RightButton.click(function() {

        $("#Slide" + ActualSlide).stop().animate({ "opacity": 0 }, 350);
        $("#Slide" + ActualSlide + "Text").stop().animate({ "opacity": 0 }, 350, "", function() {

            if (GesamtSlides == ActualSlide) {

                ActualSlide = 1;

                $("#Slide" + ActualSlide).stop().animate({ "opacity": 1 }, 400);
                $("#Slide" + ActualSlide + "Text").stop().animate({ "opacity": 1 }, 400);

            }
            else {

                ActualSlide++;

                $("#Slide" + ActualSlide).stop().animate({ "opacity": 1 }, 400);
                $("#Slide" + ActualSlide + "Text").stop().animate({ "opacity": 1 }, 400);

            }

        });

    });

    /* Ende Right Button */

});

Edit: Ein paar Rechtschreibfehler übersehen ;D.

ComFreek · 15. Juli 2009

Hallo D34DL1NES,

ich habe IE 8.0.6001.18783IC und bei funktioniert es nicht. Es werden nur weiße Bilder gezeigt.

mfg
ComFreek

D34DL1NES · 15. Juli 2009

Die weißen Bilder sind korrekt, wenn man darüber fährt müssten 2 Buttons auftauchen wenn man da drauf klickt müsste das Bild kurz verschwinden und dann neu auftauchen, und der Text müsste sich ändern.

Edit: Ich habe ebenfalls IE 8.0.6001.18783

ComFreek · 15. Juli 2009

Ja da sind 2 "rechts & links"-Buttons! Aber der Text ändert sich nicht.

D34DL1NES · 15. Juli 2009

Interessanterweise wird im IE7(bzw. IE 8 Kompi) gar kein Text angezeigt, aber die Bilder verändern sich und die Filter-Werte werden auch beim Text gesetzt. Das Script funktioniert also...

Edit:

Lösung:

Das Problem findet seine Ursache im "position" attribut, nur position: static also der default wert wird akzeptiert, mit diesem kann man aber nicht positionieren.

Ein Element welches Position hat wird sogar transparent gemacht aber nicht ein Child welches nicht position: static; hat, man könnte also auch statt, wie ich, einen Container anzusprechen, die <p>s und <a>s einzeln ansprechen und animieren, was aber aufwändiger und ineffizienter wäre.

Nun könnte man die <p>s und <a>s mit margin positionieren was einen zum nächsten Problem führt:

<a> ist ein Inline Element. Was soll daran problematisch sein soll? Inline-Elemente ignorieren margin. Also dem <a> ein display:block; verpasst und es geht, oder man spannt <div>s um die <a>s und <p>s und positioniert diese mit margin.

Doch nun tritt ein weiteres Problem auf:

Der Text wird verpixelt dargestellt: dieser Bug wird im allgemeinen mit hasLayout behoben( http://onhavinglayout.fwpf-webdesign.de/ ) eine height oder width hilft aber leider nicht: meine Texte haben hasLayout = true und dennoch sind sie verpixelt: die Lösung die mir geholfen hat: man gebe den Texten einen Background, entweder in Form eines Bildes von dem was sowieso hinter ihnen liegt, oder eine Background-color, das Funktioniert auch.

Leider funktioniert es nicht dem Text overflow: hidden zu geben und ein sowieso verwendetes Bild mit background-position irgendwo außer Sicht zu positionieren, dann bleibt die Schrift verpixelt.

Das alles gilt nur für IE allerdings für alle bis hin zum IE8(welcher sonst eigentlich keine Probleme macht...) man braucht aber keine Weichen zu setzen, die anderen Browser machen bei keiner der Lösungen Probleme, wer also IE-User mit verpixelten Schriften bluten lassen will, kann mit margin positionieren.

In Hoffnung auf einen CSS3 fähigen IE9

Deadlines

✔ Opacity in IE plötzlich kaputt

D34DL1NES

Erfahrenes Mitglied

ComFreek

Mod | @comfreek

D34DL1NES

Erfahrenes Mitglied

ComFreek

Mod | @comfreek

D34DL1NES

Erfahrenes Mitglied

Neue Beiträge