Blog

I came across a really strange issue yesterday whilst testing a site build in Internet Explorer 6, 7 and 8. For some reason, my anchor link text was not accepting a hover state colour change even though I set the required styles within my style sheet. All other browser accepted the hover styling without any issue.

I decided to create another site in Visual Studio and added the same styling to my links and it worked. After comparing the difference between the original and new style sheet, the only difference was:

/* Original Stylesheet */
body
{
    font-family: Arial;
}

/* New Stylesheet */
body
{
    font-family: Arial, sans-serif;
}

By simply adding “sans-serif” to the font family allowed the hover styles to work correctly in all browsers. I have no idea why making this change resolved my issue.

I have been building a custom .NET web part page to use in my SharePoint intranet. The .NET page has quite a lot of custom HTML and jQuery design elements, so using CSS and JavaScript files were essential.

As you know, when we want to use elements from our CSS and JavaScript files we normally add the following lines of HTML at the top of our page:

<!-- CSS -->
<link type="text/css" rel="stylesheet" href="site.css" />

<!-- JavaScript -->
<script src="jQuery.js" type="text/javascript" />

If you added those lines of code in a custom SharePoint page, you’ll find that the page will ignore them. Thankfully, SharePoint has given us some controls to add these references.

At this point its worth stating that I stored all my required JavaScript and CSS files within the “Style Library” directory situated in the root of any SharePoint 2010 intranet. In order to get these files I used controls called”CssRegistration” and “ScriptLink”:

<!-- CSS -->
<SharePoint:CssRegistration ID="CssRegistration1" Name="/Style Library/Home/CSS/jcarousel.css" runat="server" After="corev4.css" />

<!-- JavaScript -->
<SharePoint:ScriptLink ID="ScriptLink1" Name="~sitecollection/Style Library/Home/JS/jquery-1.4.4.min.js" runat="server" />

If you have stored your CSS and JavaScript within the physical file directory situated in the 14 hive folder, you will need to modify the above example to the following:

<!-- CSS -->
<SharePoint:CSSRegistration Name="<% $SPUrl:~SiteCollection/Style Library/Core Styles/jcarousel.css%>" runat="server"/>

<!-- JavaScript -->
<SharePoint:ScriptLink ID="ScriptLink1" Name="<% $SPUrl:~SiteCollection/Style Library/Core Styles/jquery.js%>" runat="server" />

The only difference between this example and our earlier example is that when we have just added “SPUrl” to get files relative to the current site collection.

We have been using Cascading Style Sheets for many years now and it has been a god send to help break us away from table based layouts and create an aesthetically pleasing site. I was quite surprised to find out that the CSS 2.1 standard has been around for 11 years. We have moved on considerably over this duration of time and even though some recent browsers are adopting CSS3 already, why do we continue to use CSS2.1?

The only answer to this question I can think of is due to the continued use of legacy browsers such as IE6. If we look at the current browser trends (below), the amount of IE6 users have decreased over the year from 18.5% to 14.4%. So this is a decrease by around 4%, which is good but not great.

(http://www.w3schools.com)

Looking back at all the sites I have created over the year, I still find myself applying workarounds to give IE6 and current browsers the same viewing experience. So 14.4% of IE6 users still has a major impact on general web design.

Generally, companies are probably to blame for the continued use of IE6. Big companies are sometimes slow to change and especially if using the web is not at the business core they don’t see any reason to move forward. In addition, they see IE6 as a more secure browser.

Can I see a final nail in the IE6 coffin sometime in the future? Unfortunately, No. Microsoft have extended their support for IE6 to 2014. So for now IE6 users still have 5 years to upgrade. Lets just hope Microsoft doesn’t make the same mistake and renew IE6 support for another 5 years after 2014!

We as users of the Internet need to move with the time. If we don’t, sites will continue to be restricted to the confines of yesteryear which is no good to anybody. Legacy browsers such as IE6 need to be phased out via end of life programmes and allow newer browsers to flourish.

After I designed a theme to my SharePoint 2007 site I came across a small problem. Well it was not exactly a problem it was more of a hassle I encountered. The current SharePoint Intranet I was working on contained quite a lot of sites and I didn't want to change the site settings within each site in order to change the theme. Thankfully, SharePoint 2007 allows you to apply a Custom CSS from your theme.

In order to change the theme across the whole SharePoint Intranet carry out the following:

1. View the source of main portal homepage and look for a line which looks something like this:

<link rel="stylesheet" type="text/css" id="onetidThemeCSS" href="/_themes/Intranet/Intr1011-65001.css?rev=12%2E0%2E0%2E4518"/> 

2. In Site Settings click on Masterpage and scroll down to the bottom of the page.
3. Select the "Specify a CSS file to be used by this publishing site and all sites that inherit from it" radio button.
4. Use the link from the CSS HTML tag above excluding anything after the query string. For example: ""/_themes/Intranet/Intr1011-65001.css".

Now the theme should be applied throughout the site. You can change the link for the Custom CSS by changing the directory path.