This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

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

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

SilverStripe, IE6 & Colorbox

2 Posts 3929 Views

ckd

Community Member, 18 Posts

28 August 2009 at 12:30am

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

Community Member, 545 Posts

29 August 2009 at 3:26pm

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.

Return to top