Answer - Loading two copies of screen.css. Screen.css getting loaded twice. Nice Menus

This post is just to document an issue I finally resolved where I had two copies of screen.css getting loaded from my custom theme folder.

My site was built by someone else and I just could not figure out why this was happening. The developer of my custom theme was using a file called style.css which was called out of the custom theme folder, which had the following contents:

@import url(initial.css);
@import url(screen.css);
@import url(print.css);
@import url(custom.css);

This is correct of course as we'd like these files to be called after all the other css loads. Initial.css was the basics for the custom theme I suppose, and screen.css is where the bulk of the modifications take place in order to override initial.css. Print of course should override screen, initial, and all other css. Custom .... I wasn't sure about .. but whatever. lol

Anyways, I could have deleted the import screen.css from this file and I would have only ended up with one loaded but .. this IS WHERE we did want screen.css to be called ... not earlier.

So I had to figure out what the heck else was calling screen.css earlier and stop it.

To cut the story short, I use Nice Menus and it offers a feature you can find at http://www.your_site.com/admin/build/themes/settings where you can specify a custom Nice Menu's css file to override Nice Menu's standard styling.

Here is where I found: sites/all/themes/my_theme/screen.css

They had put the Nice Menu's custom CSS in my screen.css file and Nice Menu's was of course loading it .. because it is 'nice' after all.

THE FIX

I simply created a new file such as anyfilename.css and cut all the Nice Menu's / Navigation stuff out of screen.css and put it in the new file. Saved them both, changed the Nice Menu's custom css path to the new file name and uploaded them both.

Problem fixed. Man what a headache.

Anyways, it all works, but the one caveat I should mention is that since the menu css is loading much earlier I will have to be sure all the menu elements are using specific enough selectors and not being overriden at some point by other css ... but it all seems fine.

One other way to fix this would be to specify a different file with nothing in it as the custom Nice Menu's css, and leave all the real Nice Menus css in the screen.css file where it would be loaded later.

Just wanted to get this documented on the web in case someone else runs into this ... the folks who originally developed our site ( and did a good job) do a lot of sites so I suppose there are many other sites with this issue.

Just for completeness .. loading the same CSS file twice is not a serious issue that will cause your site not to function, but ...

1) It causes another http call which add to load time (minimally)
2) It increases the size of the data needing to be transferred (minimally)
3) But most important .. I could not for the life of me figure out why I would turn off a piece of CSS in Firebug only to have it show up still enabled below!! It was making me crazy trying to customize some css with two files fighting each other for the same elements!

Well there you go.