Title Attributes in CSS Link Tags Prevent Styles from Being Applied

Thursday, May 15, 2008 by ASP.NET AJAX Team | Comments 8
?
Email to a friend
I have been aware for some time now that title attributes in CSS <link> tags trigger problems and prevent some CSS styles from being applied on the web page. Today I invested a couple of hours in finding out what actually happens and this is what we've got.

If you have several <link> tags in the page <head> and one of them has a title attribute, then the <link> tags coming after it must either have a title attribute with the same value or no title attribute at all, otherwise the styles in the latter CSS files the will not be applied on the page.

The issue can be easily reproduced in various versions of Firefox, Opera and Safari. The only browser, which does not exhibit the unexpected behavior is Internet Explorer.

Here is a sample web page with 3 CSS files. Try adding, removing and changing the title attributes of the <link> tags and see what happens.

css-bug.zip

Are RadControls affected by this browser issue?

Currently RadControls for ASP.NET AJAX use title="Telerik stylesheet" in their <link> tags. This title attribute is used to distinguish Telerik CSS files from other CSS files when performing AJAX updates. So if a developer adds a <link> element with a title attribute to the page, all Telerik skins will not be applied. If this happens to you, please remove all title attributes from your <link> tags.

This limitation will be resolved in our next release (either a service pack or Q2 2008) when the title attributes will be replaced by CSS classes.
?
Email to a friend
Posted in: CSS style Styling browsers ASP.NET AJAX

8 Comments

  • Stuart Hemming 19 May 2008
    For information about why this is true, have a look at http://developer.mozilla.org/en/docs/Correctly_Using_Titles_With_External_Stylesheets. -- Stuart
  • Stuart Hemming 19 May 2008
    Sorry, that didn't format too well. Try http://tinyurl.com/5qlju3
  • Jeremy Fuller 25 Jun 2008
    It's a bit annoying that this post seems to think this behavior is a bug. IE is actually the only browser which *doesn't* follow the correct behavior here.
  • Sohail Raza 26 Jun 2008
    When Telerik add this link link title='Telerik stylesheet' type='text/css' rel='stylesheet' href='/WebResource.axd?d=nS3TcE4mmfTEtH-l5pmxFkE7kTdh7QgLDH03s2ciPIBa4MCMCiadbirQsT4j4gqeADR4irDhbUKYKcSc7Bo-6A2&t=633469811473923010' The Wec complancy complaint that document type does not allow element "link" here. my doc type is !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" Can you please suggest me something
  • Dimo 26 Jun 2008
    @Jeremy Fuller I agree with you, this is not a bug. However, the behavior is quite unexpected to most people and this is the common attitude. @Sohail Raza The link tags for Telerik skins are added to the HEAD section of the page, which is the correct place to do it. If the HTML validator finds errors, then maybe some other markup on the page is not correct. Please check for unclosed tags and make sure that you have runat="server" for your HEAD tag. You can also try removing all Telerik skins completely and see whether everything is OK (I doubt that it will). If you still have problems, please open a new forum thread or support ticket and provide more information, so that we can diagnose the problem. Thanks.
  • Sohail Raza 09 Jul 2008
    runat="server" is required in HEAD tag. Thanks
  • DataBasic 12 Nov 2009
    Unescaped ampersands (e.g. & instead of &amp;) cause the validator all sorts of problerms.
  • rolfen 24 Jun 2010
    This is shit. W3C must die!

Add comment

  1. Formatting options
       
     
    		 
    		 
     
       
  3. (optional, emails won't be shown on public pages)
  4. (optional)
Read more articles by ASP.NET AJAX Team - or - read latest articles in Developer Tools
Bloggers Archive Tags