Chris and Daves SharePoint and Tech Blog

It’s hard to explain what I mean in words so here is a picture:

See how the icons do not sit right next to the title of the item and you are left with masses of white space. This bug only seams to appear in IE8 and in firefox it works just fine. The picture below shows the same thing in Firefox:

This looks much better. I did a bit of digging around using the IE developer tools (just press F12) and tracked down what was causing the error. It’s the CSS width attribute which is set to 0.01% in the coreV4.css My colleague Rob Brown @littlemenace1 (who for a 17 year old knows far too much about far too many things!) assures me that only integers are supported here, so 0.01 is meaningless. IE8 must just get confused and ignore the width attribute all-together whereas Firefox just gets on with things and assumes it’s 1 or 0 but then expands the width to fit the icon and any padding.

Here is the offending CSS:

As we already have a custom masterpage and CSS applied, all I had to do was add

.ms-vb-icon {
    width: 1% !important;
}

into our CSS and all was fine.
If you don’t have a custom CSS and don’t want to make one then I think you could probably get away with doing what I always say you shouldn’t and edit the core CSS. Just watch out for it being overwritten during updates.

While I was at it I also updated the DOCICON.XML and associated images to make the folder icon and a few others more up-to-date. Results below!

Hopefully the CSS will be fixed in an update or service pack in the future.

Today I had the pleasure of presenting at the Learning Gateway Conference on the topic of branding.

I’m going to write a few blog posts going into more detail but for now I just wanted to get the slide deck up.