Member Avatar for ravie14

CSS on a subsite not applied in FF and Chrome, works in IE

Hello,
I have come across a strange issue. We are running MOSS (MS Office Sharepoint Server) public sites (pulishing sites).
The structure is following:
www(dot)xxxxxxxx(dot)biz - CZ page - this works OK. I have a Master page saying

<style type="text/css">
@import url(/Style Library/navertica.css);
</style>

and it works in all browsers.

In subsequent sites, i. e. English, under www(dot)xxxxxxx(dot)biz/en, I have the adjusted statement:

<style type="text/css">
@import url[B](/en[/B]/Style Library/navertica.css); (the style library is in each site)
</style>

And that is the difference - the subsite, in Internet Explorer, works, but in other browsers, the css file is not applied at all.

I suppose there would be some error in the css or in relative adressing, but can not figure it out. Any help would be GREATLY appreciated

Thanks a lot!
Marek

  • 3 Contributors
  • 4 Replies
  • 98 Views
  • 11 Hours Discussion Span
  • Latest Post Latest Post by ravie14

Dani AI

Generated

Summary and practical guidance

This thread shows a common SharePoint/CSS gotcha: different browsers handle CSS import and path syntax differently. fixed the problem by switching from an @import inside a style block to a regular stylesheet link; correctly raised path-resolution concerns; pointed out the space in "Style Library" and URL encoding. The shortest, most reliable fixes are (a) avoid unencoded spaces in resource URLs or quote/encode them, and (b) prefer a link-based include in your master page rather than @import.

Why it happens (concise)

  • CSS parsers are strict: an invalid @import statement (bad syntax, unencoded space, or not placed at the top) can cause browsers like Firefox and Chrome to ignore the import while IE may be forgiving.
  • @import also affects load order and can delay or serialize stylesheet downloading; using a link element avoids that.
    See the spec and browser guidance: the @import rule details and url() rules on MDN explain the required syntax and quoting/encoding behavior (@import, url()) and the link element is the preferred external-stylesheet mechanism (link).

Quick troubleshooting checklist (apply in order)

  • Inspect the Network tab: confirm the CSS file returns 200 and Content-Type: text/css.
  • Look at the Console for CSS parse errors; browsers report syntax problems there.
  • Ensure the import (if used) is the very first rule in that style block and that the URL is quoted or percent-encoded if it contains spaces.
  • Test with a server-relative absolute path from the site root, and with a full absolute URL to rule out path resolution issues.
  • For SharePoint master pages, use server-side path tokens or the platform's CSS registration mechanism so the correct site/site-collection path is produced (this avoids fragile hand-rolled relative paths).

Recommendation
For SharePoint publishing sites, use a proper stylesheet include (or SharePoint CssRegistration) in the master page and encode spaces in library names. That gives consistent behavior across IE, Firefox, and Chrome and avoids subtle parsing differences.

Recommended Answers

All 4 Replies

Member Avatar for sillyboy

I assume there is only 1 css file? paths are defined relative to the file, so if you have a file under /en/ and say / is your root, you would then need to have a path like ../ (i.e. go up 1 path).

the relative path as the files will interpret are fully expanded going to be looking for /en/en/navertica.css with the way you have it.

hope that helps

Member Avatar for ravie14

I assume there is only 1 css file? paths are defined relative to the file, so if you have a file under /en/ and say / is your root, you would then need to have a path like ../ (i.e. go up 1 path).

the relative path as the files will interpret are fully expanded going to be looking for /en/en/navertica.css with the way you have it.

hope that helps

Hello, sillyboy,
that is strange - anyway, Fiddler did not miss the file even using /en/styles library...

Anyway, I have just solved it thanks to SuzyUK from another forum using this

<!--	
	<style type="text/css">
	/**** Overriding styles for branding ~ located in the CSSSTyleLibrary ****/	
	@import url(/en/Style library/navertica.css);
	</style>
		 -->

<link rel="stylesheet" href=/en/Style%20Library/navertica.css type="text/css" media="screen" charset="utf-8"> (not sure why @import does not work).

Thank you for your help :)

Member Avatar for almostbob

another possible failure point appears to be the 'space' in 'style Library'
in the no-fail url the space is encoded %20, http does not 'like' unencoded spaces

Member Avatar for ravie14

another possible failure point appears to be the 'space' in 'style Library'
in the no-fail url the space is encoded %20, http does not 'like' unencoded spaces

Hello,
this did not help previously. However, thanks to another forum, I figured it out. The browsers did not accept @import url, I had to set this via link rel.

Anyway, thank you for your help :)

Kind regards,
Marek

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.