Fog Creek Software
Discussion Board




Knowledge Base
Documentation
Terry's Tips
Darren's Tips

Linking to external style sheet

Are there any issues about linking to an external style sheet?

In my CityDesk project directoryI have a subdir called "styles". In index.html, I've added...

<link rel=stylesheet href=styles/327.ca.css type="text/css">

I figure this should work, but my stylesheet is being ignored.

TIA.

M.

Michael O'Henly
Sunday, December 02, 2001

It should work when you publish, but since you are not using the CityDesk Magic Name, it won't work when you edit.

I suggest replacing the path of your CSS file with a CityDesk Magic Name -- this is pretty easy: right click on the CSS file in the main window, choose "Copy Magic Name" (which copies it to the clipboard) and paste it into the HTML instead of the absolute path.

Joel Spolsky
Sunday, December 02, 2001

Thank you. This is, of course, exactly what I needed to do.  ;-)

Michael O'Henly
Sunday, December 02, 2001

Why have magic names at all? I assume this is so you can keep track of the links in case the article names change?

But if that is the case then it seems to me all this does it move the workload from one point in time to another. As it is I have this new concept to keep track of, whereas the system could simply prompt me at publish time "hey, what happened to this file".

Is there some other function it supplies that I'm missing? It seems needlessly complex in the majority case where things don't move or break.

Maury

Maury Markowitz
Wednesday, December 05, 2001

My style sheets were not working at all through City Desk, so I tested them by using a text editor. They worked perfectly as you'll see:

http://www.meryl.net/citydesk/test.html (non-citydesk version and the way it should look for now)

When I copied and pasted the successful code back into CityDesk, it's missing some features. Yes, I made sure that I copied the MAGIC NAME of the css file into the html file. Part of it is working since it has the right color for the three boxes and the links.

http://www.meryl.net/citydesk/index.html (citydesk version)

I even validated my HTML and CSS code at www.w3.org and they were clean.

Any clues?

Meryl
Wednesday, December 05, 2001

When you have problems like this, the best thing to do is to have a look at the HTML generated for the two pages. They are not the same in this case, so of course they display differently. It is nothing to do with Magic Names or CityDesk screwing something up.

Where the style sheet is linked to in the "Not Working" page, replace the <LINK> tag (in the <HEAD> section) with:

<STYLE type=text/css>@import url( Working_files/test.css );
</STYLE>

(this is what your "Working" page uses)

It should now work as you expect.

Darren Collins
Wednesday, December 05, 2001

Where can I find documentation on @import and other such functions I seem to be in the dark about?

Thanks!
Daniel

Daniel
Thursday, December 06, 2001

This is actually a part of the CSS (cascading style sheets) spec, not a CityDesk thing.

See
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/import.asp

Joel Spolsky
Thursday, December 06, 2001

Daniel:

Joel is correct. @import is a CSS workaround. It gives you the option of creating two style sheets: one for CSS browsers that understand @import and one for browsers like Netscape 4.x that don't render CSS correctly nor do they understand @import. More info:

http://css.nu/pointers/point-tip.html
http://pixels.pixelpark.com/~koch/hide_css_from_browsers/
http://www.evolt.org/article/Assigning_browser_specific_styles/17/14732/inde

All of these are from WebSiteTips.com's CSS resource page:
http://www.websitetips.com/css/index.shtml

Meryl
Thursday, December 06, 2001

Darren:

It worked when I linked to the test.css file. Thanks. I had a css file that I put into CityDesk, though. It is that file I am trying to use for testing. The other file was just to test it outside of CityDesk with the HTML file.

What I am trying to do is create the CSS file within CityDesk and link to it.

Meryl
Thursday, December 06, 2001

It still doesn't work if you replace the name of the CSS file with a magic name?

Joel Spolsky
Friday, December 07, 2001

Correct, that is how I did it originally... is use the magic name. Then, I took Darren's advice and linked to the CSS that I created outside of CityDesk and loaded onto my server. It worked, so I know nothing is wrong with the CSS file. I copied and pasted that successful file into CityDesk as a new document and saved it as .css and copied its magic name... kaput.

Meryl
Tuesday, December 11, 2001

Meryl:

My advice above may not have been clear enough. I wasn't suggesting you replace your link to the CityDesk css file with a link to the external css file.

I was suggesting you replace your <LINK> tag within your page's <HEAD> section (one method of specifying a style sheet) with the @import statement in my post above (the other method of specifying a style sheet). This will change your page's behaviour to what you want. You still need to use the CityDesk Magic Name for the filename of the style sheet - don't link to the one outside of CityDesk.

Hope this helps.

Darren Collins
Tuesday, December 11, 2001

Darren:

Gave it a shot... index.html file is in the same directory as css file, hence:

<STYLE type=text/css>@import url(PTMFOG0000000022);
</STYLE>

Still not correctly rendering CSS.

Meryl
Wednesday, December 12, 2001

Call up the page that is output when you publish your site, and have a look at its HTML source. Compare that to the one that works. You might be able to figure out what the difference is.

Darren Collins
Wednesday, December 12, 2001

Darren:

Figured out what is happening. Using the magic name in the @import command has CityDesk giving it a .html extension instead of .css extension. Even if I put .css at the end of magic name, it calls it "fog0000000000123.css.html"

How do I make the magic name use it as .css not .html? The name I gave it in CityDesk is abc123.css.

Meryl
Saturday, December 15, 2001

Meryl,

You must have put your CSS into an article instead of a file.

Create the CSS file using Your Favorite Text/CSS Editor, outside CityDesk, then drag it into the main window. This will become a file, not an article, the distinction being that articles get templates applied to them and files do not.

Then copy it's magic name and paste that into your @import statement. It will have the form PTMFOG....css and be replaced by the real name of the CSS file when published.

Joel Spolsky
Saturday, December 15, 2001

Joel:

Thank you. That worked. Looking at the icon for the css file, you're right... it matches the same icon for other article files. I copied and pasted it so long ago now (it seems) and totally forgot it was put into an article file.

Thanks.

Meryl

meryl
Saturday, December 15, 2001

*  Recent Topics

*  Fog Creek Home