The new website for Schreuders Sport International, a wholesaler and importer of sports-related products, was launched on 4th June 2010.

Schreuders Sport International (SSI) were running their old ERP system for over 20 years before finally moving to a new software supplier in May 2010. Blue Arena was responsible for migrating all data to the new system to the satisfaction of all involved, including accounting and customs auditors.

The new ERP is fully integrated with the website, allowing real-time communication of product pricing (tailored to a particular logged in client), and stock availability.

Much effort has been made to improve the user experience of the website, as well as the overall design. Users can now fly around the site using a number of searches, filters and menus.

Moving to a brand new system after 20 years isn't easy, and testing of the online ordering system is happening while SSI is getting things under control. We look forward to "flipping the switch" soon!

– www.schreuderssport.nl designed by Laura Bor, Niels Emck, Jamie Morris & Steve McGill

Home > About us > Meet the team

Each of these is typically a hyperlink back to the relevant section. Now these are great, but what happens if your breadcrumb isn't that small? It's easy to see a situation where you have a bunch of really long titles that cause the breadcrumb to span over two or three lines. This isn't always what you want, since it can make the breadcrumb look broken. You might just decide to make some of the titles smaller, but with content managed sites and page names stuffed with SEO keywords, this is often easier said than done.

So I came up with a solution to this problem using JQuery. It relies on a certain kind of markup; you must use <ul> and <li> tags to build your breadcrumb rather than a continuous string of text. Hopefully you already know how to style a <ul> as a breadcrumb, but if not, the following should help:

• Use either float:left, display:inline, or display:inline-block on your <li> tags.
• If you want to seperate each item with an image, use the following as well:
  • padding-left:24px (or whathever you need) on your <li> tag
  • background:url(/images/breadcrumb.gif) left no-repeat; on your <li>

(I realise the background image could be applied instead as a bullet image, but this doesn't look great in some older browsers, so the above method is a little safer)

You should be able to figure out the rest of the styling from there, but if not, drop me a comment and I'll help you out.

The Javascript

Ok, let me explain what the script does and then I'll post the code. Firstly, the script has two properties: "breadcrumb" and "maxWidth". The first is a JQuery selector for the <ul> element. If not supplied, this defaults to "$('div#breadcrumb > ul'); a <ul> that is the immediate descendant of a div with the ID of "breadcrumb". The second is the maximum width in pixels the breadcrumb should be, which defaults to the outerWidth of the <ul>. If it goes over this width, the breadcrumb is shortened until it fits.

Essentially, what the script does is check the combined width of the breadcrumb's <li> elements. If this total exceeeds the "maxWidth" property, the script will shorten the first non-shortened list item and check again. It continues doing this until the combined width of all of the list items is less than "maxWidth". When each item in shortened, the text is replaced by "…" and to keep things nice and accessible, a title tag is added with the original text.

And that's that. All that's left is to show you the script and how to call it:

function shortenBreadcrumb(options){
    /*
        Shortens the breadcrumb to a specified width by removing the text from one list item
        at a time and replacing it with "..." - accepts an options object as an optional
        parameter with two options:
            shortenBreadcrumb({
                breadcrumb : $('div#breadcrumb > ul'),
                maxWidth : 725
            });

        The first is the selector for the breadcrumb ul, the second is the maximum width you
        want it to be.
    */

    var breadcrumb = $('div#breadcrumb > ul');
    var maxWidth = $('div#breadcrumb').innerWidth();

    if (options != undefined){
        if (options.breadcrumb != null) { breadcrumb = options.breadcrumb; }
        if (options.maxWidth != null) { maxWidth = options.maxWidth; }
    }

    var levelCount = breadcrumb.find('li').size();
    var shortEnough = false;
    var totalWidth;
    while (shortEnough == false) {
        totalWidth = 0;
        breadcrumb.children('li').each (function(){
            totalWidth += $(this).outerWidth(true);
        });
        if (totalWidth > maxWidth){
            var li = breadcrumb.children('li').not('.short').eq(1);
            li.addClass('short');
            li.children('a').attr('title', li.children('a').html());
            li.children('a').html('...');
        }
        else {
            shortEnough = true;
        }
    }
}

Include this script in your page and call using:

$(document).ready(function(){
    shortenBreadcrumb({
        breadcrumb : $('ul#breadcrumb'),
        maxWidth : 600
    });
});

Of course, any of these two options can be left blank, so you can call it like so:

    shortenBreadcrumb();

It goes without saying that this script requires the JQuery library. If you want to use the script in your site, please do, but a mention of Blue Arena or a comment would be appreciated.

if(typeof myFunction == 'function') {
	myFunction();
}

Handy, huh?

(requires JQuery v1.3.2)

New in v1.1

• You can now add captions for each image
• You can now add a link for each image to navigate to

Instructions

To create a new gallery, you need to first include the script in your page, after you have included the JQuery script.

<script src="includes/galleryCarousel-1.1.min.js" type="text/javascript"></script>

Then some simple styles to make it look nice:

<style type="text/css">
	img {border:0;}
	ul.gallery li {padding:0 5px;}
	ul.gallery li img {height:61px;} /* If you don't specify a thumnail image you should set the height of the scaled down image instead */
	ul.gallery li img.selected {border:2px solid #000;}
</style>

You’ll need some basic markup: an empty image, a next link, a previous link and a div to put our carousel into.  If you want to put captions somewhere for each image, you will also need a div or span for this:

<img id="featuredImg" />
<span id="caption"></span>
<table>
	<tr>
		<td>
			<a id="prev" href="#">Prev</a>
		</td>
		<td>
			<div id="galleryWrap"></div>
		</td>
		<td>
			<a href="#" id="next">Next</a>
		</td>
	</tr>
</table>

If you prefer to specify your images in the html rather than the javascript, you can also populate your target div with a ul like the following:

<ul class="myGalleryClass">
	<li><a href="path/to/full/image1.jpg"><img src="/path/to/thumb1.jpg" alt="Image 1" /></a></li>
	<li><a href="path/to/full/image2.jpg"><img src="/path/to/thumb2.jpg" alt="Image 2" /></a></li>
	<li><a href="path/to/full/image3.jpg"><img src="/path/to/thumb3.jpg" alt="Image 3" /></a></li>
	<li><a href="path/to/full/image4.jpg"><img src="/path/to/thumb4.jpg" alt="Image 4" /></a></li>
	<li><a href="path/to/full/image5.jpg"><img src="/path/to/thumb5.jpg" alt="Image 5" /></a></li>
</ul>

If you don’t create your image list manually, you can populate it as an array.  Below I have only specified the url of the full size image.  The alt tag (“alt”) and thumbnail (“thumb”) can also be specified, but if the thumb isn’t specified the full size url will be used instead (meaning the thumb should be resized via css instead).

<script type="text/javascript">
	$(document).ready(function(){
		var images = new Array();
		images[0] = {src : "/images/slide1.jpg"}
		images[1] = {src : "/images/slide2.jpg"}
		images[2] = {src : "/images/slide3.jpg"}
		images[3] = {src : "/images/slide4.jpg"}
		images[4] = {src : "/images/slide5.jpg"}
		images[5] = {src : "/images/slide6.jpg"}

		// Create a new galleryCarousel with a few config options
		$('#galleryWrap').galleryCarousel({
			target : $('#featuredImg'),
			nextBtn : $('a#next'),
			prevBtn : $('a#prev'),
			images : images
		});
	});
</script>

Captions

When you have specified a caption for an image, it will be shown – you can specify text or html for your caption.  When there is no caption specified for an image, the caption container will be hidden.

images[0] = {
    src : '/path/to/my/image.jpg',
    caption : 'This is my image caption.'
}

Main Image Hyperlink

You can specify a page to navigate to when clicking on an image, which is useful for portfolios and such.  To specify an image, simply add a url property like so:

images[0] = {
    src : '/path/to/my/image.jpg',
    url : '/path/to/my/page.html'
}

Property List

Here is a list of the configuration options and their defaults:

The following is a list of the properties for the images object:

Download packed code for Gallery Carousel v1.0

Here is a stripped down version.  First, include the galleryCarousel javascript file in the <head> section of your page:

<script src="includes/galleryCarousel-1.0.min.js" type="text/javascript"></script>

Then some simple styles to make it look nice:

<style type="text/css">
	img {border:0;}
	ul.gallery li {padding:0 5px;}
	ul.gallery li img {height:61px;} /* If you don't specify a thumnail image you should set the height of the scaled down image instead */
	ul.gallery li img.selected {border:2px solid #000;}
</style>

You’ll need some basic markup: an empty image, a next link, a previous link and a div to put our carousel into:

<img id="featuredImg" />
<table>
	<tr>
		<td>
			<a id="prev" href="#">Prev</a>
		</td>
		<td>
			<div id="galleryWrap"></div>
		</td>
		<td>
			<a href="#" id="next">Next</a>
		</td>
	</tr>
</table>

If you prefer to specify your images in the html rather than the javascript, you can also populate your target div with a ul like the following:

<ul class="myGalleryClass">
	<li><a href="path/to/full/image1.jpg"><img src="/path/to/thumb1.jpg" alt="Image 1" /></a></li>
	<li><a href="path/to/full/image2.jpg"><img src="/path/to/thumb2.jpg" alt="Image 2" /></a></li>
	<li><a href="path/to/full/image3.jpg"><img src="/path/to/thumb3.jpg" alt="Image 3" /></a></li>
	<li><a href="path/to/full/image4.jpg"><img src="/path/to/thumb4.jpg" alt="Image 4" /></a></li>
	<li><a href="path/to/full/image5.jpg"><img src="/path/to/thumb5.jpg" alt="Image 5" /></a></li>
</ul>

If you don’t create your image list manually, you can populate it as an array.  Below I have only specified the url of the full size image.  The alt tag ("alt") and thumbnail ("thumb") can also be specified, but if the thumb isn’t specified the full size url will be used instead (meaning the thumb should be resized via css instead).

<script type="text/javascript">
	$(document).ready(function(){
		var images = new Array();
		images[0] = {src : "/images/slide1.jpg"}
		images[1] = {src : "/images/slide2.jpg"}
		images[2] = {src : "/images/slide3.jpg"}
		images[3] = {src : "/images/slide4.jpg"}
		images[4] = {src : "/images/slide5.jpg"}
		images[5] = {src : "/images/slide6.jpg"}

		// Create a new galleryCarousel with a few config options
		$('#galleryWrap').galleryCarousel({
			target : $('#featuredImg'),
			nextBtn : $('a#next'),
			prevBtn : $('a#prev'),
			images : images
		});
	});
</script>

Here is a list of the configuration options and their defaults:

The following is a list of the properties for the images object:

What you need

This tutorial assumes that you have a decent working knowledge of CSS and a little javascript (necessary if you want full IE6 support).  You’ll also need some sort of graphics editing software such as Adobe Photoshop or the GIMP.  I’ll be using Photoshop.

Step 1: Design Your Box

You’ll need to start off by creating an image of how your box will look when it’s finished.  For now I’m going to create a simple grey box with dark grey corners, something like the image you see here.  To create something similar simply draw a rectangle with rounded corners and add a 1px stroke.

It’s important that your box goes right to the edge of the image, so trim off any unneccessary white space.  You can save this as box1.gif.

Step 2: The corners include

The concept of this solution is to include four divs – one for each corner – that will be positioned absolutely within our both and styled appropriately.  Since this is the sort of technique that gets reused many times in the site, I prefer to create an include that contains all four corners.  Create a new file called ‘corners.html’ and place the following markup inside:

<div class="tl corner"></div>
<div class="tr corner"></div>
<div class="bl corner"></div>
<div class="br corner"></div>

You’ll have noticed that each div has two classes.  The first just tells us which corner it is (top left, top right, bottom left and bottom right respectively).  The second lets us easily apply styles that all four corners will use.

Step 3: The Box

Let’s create the box and the markup we’ll need now, and then we’ll style it up once we’re done.  Where you want your box to appear, type the following code:

<div class="box1 corners">
    <!--#include virtual='/path/to/corners.html'-->
    <div class="boxContent">
        <p>This is where your content will go</p>
    </div>
</div>

I’d better explain some of this.  The outer div is the box itself.  This will be styled to match your design and hads the extra class “corners” there to allow you to apply classes to all of your boxes, as well as making some of the javascript easier later.

Next is the corners include, which includes the four divs you created a moment ago.  Much nicer than including those manually every time, huh?

Last is a div called “boxContent”.  This is the div you’ll apply all of your padding to (allowing you to declare width:100% on the box itself without breaking anything).  It’s also useful to put overflow:hidden on the inner div to prevent the Firefox Float Bug if you float the contents of the box – this wouldn’t work on the outer box as the corners will need to be placed outside the box in order to work.  If all isn’t clear, don’t worry, just read on.

Step 4: The CSS

Ok, now for the fun part.  We’re going to start by styling up the basic box without rounded corners.  Basically what we need is a background colour, border and some padding.  Copy the following into your stylesheet:

/* This allows us to position the corners relative to the box instead of the page */
div.corners { position:relative; }

/* This will make sure your corners never display over your content */
div.boxContent { position:relative; z-index:3; }

/* Styles specific to box1 */
div.box1 { color:#000; background:#E0E0E0; border:1px solid #666; }
div.box1 div.boxContent { padding:12px; overflow:hidden; }

That’s it for the box.  Now for the corners.  They’re all going to be the same size and have many similar properties.  I like to create a seperate stylesheet for box/corner styles, but you’re welcome to put them where you like.

div.corner { width:12px; height:12px; position:absolute; z-index:2;}
div.tl { top:-1px; left:-1px; background-position:top left; }
div.tr { top:-1px; right:-1px; background-position:top right; }
div.bl { bottom:-1px; left:-1px; background-position:bottom left; }
div.br { bottom:-1px; right:-1px; background-position:bottom right; }

This has given us some universal corner styles.  Now we need to point our box 1 corners at the correct background image.  Add this line to your stylesheet and you’re good to go:

div.box1 div.corner { background-image:url(/path/to/box1.gif); }

Go on – check out your box now.  If you’re thinking that it can’t be that easy, think again.  You only had to cut out one image, not 4, and the box resizes perfectly in every modern browser.

The Exception to the Rule

Unfortunately if you’re using IE6 you’ll notice a rather frustrating bug.  If your box width or height is an odd number the bottom and right coordinates of your boxes will be 1px too short, meaning the border will show through.  There are two solutions.  The first uses javascript, and is my preferred method, to be covered in another post.  The second method involves only css:

The easiest way to fix the right coordinate is to fix the width of each box to an even number.  This isn’t too bad for fixed width sites, though could pose a problem for fluid layouts.  Unfortunately the bottom coordinate can’t be so easily fixed due to the fact that boxes should expand downward depending on the content.  So we need a more complex solution.

First, add the following line to corners.html:

<div class="btm corner"></div>

This div will be styled to mimic the bottom edge of the box.  We’ll need a background image for it, which will be a 2px or greater slice of the bottom of the box.  This will need to be repeated horizontally, so make sure there’s nothing else in the image.

Now you’ll need to change the “bottom” coordinate of your “bl” and “br” corners to -2px instead of -1px.  This means the corners will display 1px further down than they should.  This is where the “btm” div comes into play.  Add the following to your stylesheet:

div.btm {
    height:12px;
    width:100%;
    bottom:-2px;
    left:-1px;
    background:url(/path/to/box1-btm.gif) bottom repeat-x;
    z-index:1;
}

Now the bottom div will display 1px out the same as the corners, but because the three divs cover the bottom edge of the box, you can’t see the discrepancy, providing a CSS only solution to the problem.  Note that the bottom div needs to be placed below the two corners, hence a z-index of 1.

Next time: A Javascript Solution

Next time we’ll look at fixing the IE6 problem using JQuery to reposition the corners depending on the width of their parent.

Since IE6 comes bundled with Windows XP, which currently holds a 62% market share, it’s no surprise that IE6 is so widely used despite its age.  Although it is very simple for users to upgrade to Internet Explorer 7, many choose not to simply because they prefer to use what they know, or because IE6 works just fine for them.  And in fairness, many users wouldn’t notice a difference in how websites look between one browser and the next.

But that’s because we web developers have to spend sometimes hours at a time testing and tweaking websites until they work flawlessly in a browser that was replaced over two years ago.  I don’t blame Microsoft, since Internet Explorer 7 was a huge leap forward in terms of W3C compliance.  And Internet Explorer 8, which replaced its predecessor in March this year, is even better still.  I don’t even blame the people using Internet Explorer 6, as a lot of them probably don’t even realise there is a problem.  I blame the web developers who continue to support it.  Now I know a lot of you will tell me it’s not financially viable to drop support for such a widely used browser, but I’m not talking about abandoning it altogether.  I just mean if you have to choose between supporting IE6 and using more modern techniques, then you should opt for the latter.

It starts to get a bit technical from here on in…

A simple example is this: Internet Explorer 6 can’t recognise the “:hover” meta class on any element except for a hyperlink.  It can’t recognise “:first-child” or something as simple as “ul > li” (denoting a direct descendant).  If you need to simulate these styles for the sake of functionality, then it is acceptable to use javascript.  But if you need to simlate a style for a purely visual reason, then forget it.  Here’s an example:

<ul class="horizontalList">
    <li>Test list item 1</li>
    <li>Test list item 2</li>
    <li>Test list item 3</li>
    <li>Test list item 4</li>
</ul>

Now let’s imagine we need the first item in this list to have no border, but for all other items to have a 1px solid border on the left.  Our stylesheet would contain something like this:

ul.horizontalList li {
    display:inline;
    padding:0 4px;
    border-left:1px solid #000;
}
ul.horizontalList li:first-child {
    border-left:0;
}

Relatively simple, but in IE6 the second rule is ignored due to its lack of support for :first-child.  The common way to fix this is to add “class=’first’” to the first list item and then change the selector to:

ul.horizontalList li.first

This effectively makes the first-child pseudo class useless, as there is no point in applying the style to both.  And you may think “well sure, why not? It only takes a second to add.”  But all of these add up.  Let’s look at another example:

<div class="border highlight">
    <p>This is a test paragraph</p>
</div>

<style type="text/css">
    div.border { border:1px solid #000; color:#000; }
    div.highlight { background:#F00; }
    div.border.highlight { color:#FFF; font-weight:bold; }
</style>

According to this, any div with class=”highlight” should have a red background and any div with class=”border” should have black text and a black border.  But if a div has both classes, the text should instead be white and bold.  Simple, yes?  Well IE6 ignores the last line, which can be a real pain in some cases.  Often it forces you to create a new class such as class=”borderHighlight” to encapsulate both styles, or to have parent elements with a different class to modify the appearance of their children.

My point is this: if you have to rewrite some of your CSS or markup to accomodate this kind of behaviour, don’t.  It’s simple – if I buy a computer game and it has a bug, the first thing I’m asked to do when I contact tech support is upgrade to the latest version.  Why?  Because the problem has already been addressed.  This should be your approach to web development – make the client aware that they have an out of date browser by displaying a message to only users or IE6 or below.  Recommend that they upgrade to the latest version of Internet Explorer and warn them that the site may display incorrectly if they do not.

Be flexible

This isn’t a hard and fast rule.  If a client is paying you to support IE6 then spend the extra time doing so.  And sometimes an extra line of css can make all the difference.  Don’t drop support for IE6 just to spite its users – use the fixes you can quickly apply but don’t let it impact on the markup and styles you use for other browsers.  Ultimately you have to decide whether the time you spend is worth the result.

• In short, Internet Explorer 6 is an out of date browser that doesn’t recognise many modern techniques for building websites.  As a result, web developers tend to support IE6 at the expense of using techniques that could save them time and effort whilst allowing more creative design.
• IE6 is also less secure than it’s successors.  Although it is still patched with Windows XP Service packs, the latest of which was released in April 2008, support will not continue forever.  Internet Explorer 8 was released in March 2009, meaning that IE6, first released in 2001, is now 2 generations old.  Microsoft have enough to worry about without supporting an obsolete browser as well.
• IE6 has less features than its successors – most notably it lacks tabbed browsing, meaning you need a new window for every site you want to visit at the same time.  In IE7+ you can have multiple sites open in the same window.
• Less web developers are supporting IE6 all the time.  Sticking with this browser means you will notice more and more sites that look broken.
• It costs nothing to upgrade.  You can upgrade to a newer version of Internet Explorer, or try one of the other browsers on offer: Mozilla Firefox, Safari, Opera and Google Chrome are just a few.

If you want a more in depth explination, read on…

HTML 101

For the uninitiated, let me first explain what html is.  Hyper Text Markup Language, to give it its full name, is the language in which websites are written.  It is how we developers create a website.  A web browser, such as Internet Explorer or Firefox, is the program responsible for reading HTML and displaying it as a website.  With me so far?  Good…

The World Wide Web Consortium

Once upon a time, the World Wide Web Consortium, or W3C to those of us in a hurry, decided it would be swell if we had a set of standards which would define how browsers should render HTML.  The idea was that any browser on any machine could take a website and produce the same result, thus making the website accessible to the widest possible audience.

Unfortunately, this is much easier said than done.  Few browsers can boast 100% compliance to the W3C standards without some small bugs or quirks, but usually these are fairly minor issues that are easily solved.  Unfortunately, this isn’t the case with all browsers.  IE6 and its predeccesors are particular headaches for web developers, as they do not support newer techniques for styling content.  And while many point the finger squarely at Microsoft for this, the problem lies with the users who continue to create a need to support IE6.  Microsoft themselves have long since moved on, releasing 2 updated browsers since IE6 was released in 2001.  I’m sure they would appreciate the opportunity to stop supporting IE6 and concentrate on newer projects instead, but while so many people cling to an old browser, this won’t be possible.

A Time For Action

If you can, go and download the latest version of Internet Explorer or one of the other browsers listed above.  If you can’t install the new version yourself (for instance if you’re part of a network at work or school), talk to the system administrator and ask if they can do it.  If you already use Windows XP then upgrading to Internet Explorer 7 or 8 is easy and costs you nothing.  If you use Windows Vista or later then you already have Internet Explorer 7 or later – congratulations, you’re a part of the solution!