Jump to:

23368 Posts in 18143 Topics by 2863 members

General Questions

SilverStripe Forums » General Questions » SilverStripe, IE6 & Colorbox

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Page: 1
Go to End
Author Topic: 2868 Views
  • ckd
    Avatar
    Community Member
    18 Posts

    SilverStripe, IE6 & Colorbox Link to this post

    I have been trying to implement Colorbox (similar to lightbox) into a SS site. This works fine in an html site in IE6 and works in all major browsers. However, once in SS, it does not display the IE6 specific style sheet images consistently.

    The IE6 style sheet uses the images for the Colorbox framed border and for some reason it works perfectly on the Home page but on all the other pages the border images are missing. It is really odd behaviour as, apart from the contact page, all other pages use the same Page.ss template as the Home page.

    I have checked and the IE6 stylesheet is being recognized, however it just seems to be the path to the images within the stylesheet that all other pages are not recognizing except for the Home page. I have included the code below. Any ideas on how to get this working would be most welcome.

    #cboxTopLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=themes/executive/images/colorbox/borderTopLeft.png, sizingMethod='scale');}
    #cboxTopCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=themes/executive/images/colorbox/borderTopCenter.png, sizingMethod='scale');}
    #cboxTopRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=themes/executive/images/colorbox/borderTopRight.png, sizingMethod='scale');}
    #cboxBottomLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=themes/executive/images/colorbox/borderBottomLeft.png, sizingMethod='scale');}
    #cboxBottomCenter{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=themes/executive/images/colorbox/borderBottomCenter.png, sizingMethod='scale');}
    #cboxBottomRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=themes/executive/images/colorbox/borderBottomRight.png, sizingMethod='scale');}
    #cboxMiddleLeft{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=themes/executive/images/colorbox/borderMiddleLeft.png, sizingMethod='scale');}
    #cboxMiddleRight{background:transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=themes/executive/images/colorbox/borderMiddleRight.png, sizingMethod='scale');}

  • zenmonkey
    Avatar
    Community Member
    527 Posts

    Re: SilverStripe, IE6 & Colorbox Link to this post

    Hmm I just implemented Colorbox on a site I'm working on. I haven't tested it in IE6 as I'm testing my site running in MAMP on a MAC and I haven't had chance to check if VMWare will access it okay. Are you sure your IE6 CSS is loading AFTER your other CSS files. I've intergrated the Colorbox CSS code into my Layout and IE6 css files. Silverstripe 2.3 has an annoyng habit of loading the page Required CSS after any declared in the template including condtional ones . Basically Required CSS files are loaded at the end of the <head>.

    You need to make sure you have something like this your Page_Controller

    public function init() {
          parent::init();

          if($pos = strpos( $_SERVER[ 'HTTP_USER_AGENT' ], 'MSIE' ) ) {
             $version = substr( $_SERVER[ 'HTTP_USER_AGENT' ], $pos + 5, 3 );
             if( $version < 7 ) {
                Requirements::insertHeadTags("<!--[if IE 6]><style type='text/css'>@import url(themes/" . SSViewer::current_theme() . "/css/ie6.css);</style><![endif]-->");
                }
                elseif( $version < 8 ) {
                   Requirements::insertHeadTags("<!--[if IE 7]><style type='text/css'>@import url(themes/" . SSViewer::current_theme() . "/css/ie7.css);</style><![endif]-->");
                   }
          }
       }

    Basically adds you conditional Tags After the Required CSS. Found this bit in another Forum Post and I can't remember where.

    And since my Colorbox CSS is integrated into my other site style sheets, all my image paths are relative to the css, so

    src=themes/executive/images/colorbox/borderBottomLeft.png, sizingMethod='scale'


    becomes

    src=../images/colorbox/borderBottomLeft.png, sizingMethod='scale'

    But as I said I haven't tested the implementation in IE6 yet.

    2868 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.