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.
About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.

Related Posts

Comments

Comments are disabled in preview mode.