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.
Related posts:
- SharePoint 2010 Document Library open Office Documents in browser If you have web apps set up on SharePoint 2010...
- SharePoint 2010 Drop Off Library Another new feature you may have seen in SharePoint 2010...
- SharePoint 2010 Powershell Commands Help Yesterday i did a post The first steps to SharePoint...
- Migrating from SharePoint 2007 to SharePoint 2010 Last week the twitter community and blogosphere came alive with...
- Changing File Associations Icons in SharePoint 2010 One of the annoying things I have found using SharePoint...
- Using PowerPoint 2010 themes in SharePoint 2010 In 6 Easy Steps Creating your own theme for SharePoint 2010 used to be...
1 comment
3 pings
Franco Bao
July 28, 2011 at 8:18 pm (UTC 0)
I tried adding the snippet of code to my custom css and nothing changes. Seems pretty straight forword, but nothing changes.
How to Ruin Your SharePoint 2010 Upgrade; BPOS Access Problems; CodePlex Foundation Commercial Open Source - SharePoint Daily - Bamboo Nation
August 24, 2010 at 2:56 pm (UTC 0)
[...] Remove the Gap Between the Icon and Title in SharePoint 2010 Document Library (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: [...]
SharePoint 2010: Recopilatorio de enlaces interesantes (XI)! « Pasión por la tecnología…
September 1, 2010 at 10:29 pm (UTC 0)
[...] Remove the gap between the Icon and Title in SharePoint 2010 document library [...]
SharePoint 2010: Recopilatorio de enlaces interesantes (XI)! - Blog del CIIN
September 1, 2010 at 10:33 pm (UTC 0)
[...] Remove the gap between the Icon and Title in SharePoint 2010 document library [...]