Zum Inhalt springen

Slimbox: lbOverlay Problem mit FFox

Erstellt am 18. Juli 2008 · 2 Antworten · letzte Antwort am 25. Juli 2008

Tags: Frage

butterbreeze ·

Hallo beisammen,
ich habe ein Problem mit der Darstellung des lbOverlay-Elements meiner Slimbox-Extension (TYPO3 4.1.2, PMK Slimbox 2.3.0). Auf manchen Seiten, füllt lbOverlay der Slimbox nicht das gesamte Bild, wie hier gut zu sehen; der untere Bildschirmrand bleibt weiss - Das Problem betrifft nur Firefox(3), in IE, Safari & Opera klappt das ganze fehlerfrei:

http://u0063776338.user.hosting-agency.de/index.php?id=12

Firebug gibt mir folgende relevanten CSS Informationen:

element.style {
[b]height:414px;[/b]
opacity:0;
top:0px;
visibility:hidden;
width:1008px;
}

#lbOverlay {slimbox_ex.css (Linie 5)

background-color:#000000;
cursor:pointer;
left:0pt;
position:absolute;
top:0pt;
width:100%;
z-index:1000;
}

Geerbt vonbody

body {style.css (Linie 2)
color:#000000;
font-family:verdana,helvetica,arial,sans-serif;
font-size:13px;
font-style:normal;
font-weight:normal;
text-align:left;
}

Im Fall der vorliegenden Seite ist "Height 414px" der Übeltäter, ein verantwortliches stylesheet wird allerdings nicht genannt. Der Wert variiert von Seite zu Seite - in manchen Fällen funktioniert es fehlerfrei.

Hat jemand ein ähnliches Dilemma gelöst, oder eine Idee, wodurch diese Werte entstehen könnten?

Der Vollständigkeit halber noch das entsprechende TS-Template:

#Default PAGE Object:
page = PAGE
page {
    typeNum = 0
    
    #Stylesheet
    stylesheet = fileadmin/css/style.css
    10 = TEMPLATE
    10.template = FILE
        10.template.file = fileadmin/aktuelles.htm
        10.workOnSubpart = DOKUMENT
    
    #Metadaten1
    meta.AUTHOR = Annette Beisenherz
    meta.DESCRIPTION = Lorem
    meta.ROBOTS = index, follow
    
    #Metadaten2
    headerData.900 = Text
    headerData.900 {
        wrap = <meta name="keywords" content="|">
        field = keywords
        }

    #Slimbox-Konfiguration    
    headerData.1230 = COA
    headerData.1230.1 = TEXT
    headerData.1230.1.value = window.addEvent('domready', Lightbox.init.bind(Lightbox,{resizeDuration: {$plugin.pmkslimbox.resizeDuration}, resizeTransition: Fx.Transitions.{$plugin.pmkslimbox.resizeTransition}, opacity: {$plugin.pmkslimbox.opacity}, initialWidth: {$plugin.pmkslimbox.initialWidth}, initialHeight: {$plugin.pmkslimbox.initialHeight}, animateCaption: {$plugin.pmkslimbox.animateCaption}, defaultIframeWidth: {$plugin.pmkslimbox.defaultIframeWidth}, defaultIframeHeight: {$plugin.pmkslimbox.defaultIframeHeight}, iframeScrolling: '{$plugin.pmkslimbox.iframeScrolling}', enablePrintButton: {$plugin.pmkslimbox.enablePrintButton}, enableSaveButton: {$plugin.pmkslimbox.enableSaveButton},
    headerData.1230.2 = TEXT
    headerData.1230.2.value = llPage: '{LLL:EXT:pmkslimbox/locallang.xml:page}', llOf: '{LLL:EXT:pmkslimbox/locallang.xml:of}', psScriptPath: '{path:EXT:pmkslimbox/savefile.php}'}));
    headerData.1230.2.insertData = 1
    headerData.1230.stdWrap.dataWrap (
        <script type="text/javascript" src="{path:{$plugin.pmkslimbox.mootoolsJS}}"></script>
        <script type="text/javascript" src="{path:EXT:pmkslimbox/res/scripts/slimbox_ex.js}"></script>
        <script type="text/javascript">|</script>
        <link rel="stylesheet" href="{path:{$plugin.pmkslimbox.slimboxCSS}}" type="text/css" media="screen" />
        )
    parameter.data = TSFE:lastImageInfo|origFile
    ATagParams = rel="lightbox"

    #Platzhalter ansprechen
    10.marks {
    
        #Headline
        AKTUELLES_HEADLINE = TEXT
        AKTUELLES_HEADLINE.field = title

        #Content Text (Center)
        AKTUELLES_CONTENT = CONTENT
        AKTUELLES_CONTENT {
            table = tt_content
            select.where = colPos = 0
        }

        #Content Image (Right)
        AKTUELLES_BOX_CONTENT = CONTENT
        AKTUELLES_BOX_CONTENT {
            table = tt_content
            select.where = colPos = 2
        }

    }
}
butterbreeze ·

... das scheint ein exotisches Problem zu sein ... hm, hat denn niemand eine Idee, woran die Bildung dieses "height"-Wertes konkret gebunden ist? Da er im generierten lbOverlay-div-Quelltext, aber in keinem Stylesheet verzeichnet ist, nehme ich an, dass das Ganze durch JS generiert wird.

Ich habe der ID #lbOverlay im Stylesheet: "typo3conf/ext/pmkslimbox/res/style/slimbox_ex.css" testweise den Wert height: 100% zugewiesen (per default existiert dort keine "height"-angabe - s.o.), was aber keine Auswirkungen hat:

Wenn ich jedoch dem rang-höchsten DIV "Container" meiner HTML-Vorlage den "height"-Wert 100% zuweise, funktioniert auch lbOverlay bildfüllend. Leider wird dadurch wiederum meine Faux-Column-Hintergrundgrafik rausgekickt ;(

Das Problem liegt also offenbar am "Container" - je kürzer dieser ausfällt (abhängig vom Content), desto wahrscheinlicher fällt lbOverlay zu kurz aus.

Ich frage mich nun - in welcher konkreten Form hängen Container und "height" wert zusammen, und warum interpretieren alle anderen Browser das ganze anders? Fragen über Fragen ... Ideen sind sehr! willkommen 😉

butterbreeze ·

So - das Problem ist gelöst:

In meinem Fall war das rang höchste element nicht Bildfüllend (container). Nachdem ich einen "fullscreen-container" mit der css-height: 100% darübergesetzt habe, funktioniert es! An diesem orientiert sich lbOverlay nun ...