problems with stylesheets in mozilla 1.1

how to load external stylesheets with mozilla

[slips9]

Was wondering if anyone can help me. I can't seem to load external css stylesheets when using mozilla. I have tried it out with netscape 6.2 and IE 6 and they both work. Here is a sample of my code.

I've called the stylesheet using

<link rel="stylesheet" type="text/css" href="/css/test_style.css" />

and it the stylesheet itself, I have created 2 simple styles

  H3 { font-size: x-large; color: red }
  H4 { font-size: large; color: blue }

I know that if I remove the call to the stylesheet and just put the styles in my HTML it will work. Any help is appreciated.

[madcat]

Welcome to the board!

Umm...

What happens when you just do:

<link rel="stylesheet" type="text/css" href="css/test_style.css" />

or

<style type="text/css">
@import "css/test_style.css";
</style>

[slips9]

nothing...

styles are still not being used. :(

[pageoneresults]

What happens if you do this...

<link rel="stylesheet" type="text/css" href="/css/test_style.css">

Get rid of the /

[edited by: pageoneresults at 3:23 am (utc) on Sep. 12, 2002]

[bobriggs]

in Moz, under Edit¦Preferences¦Colors, do you have the radio checked that says 'Use my chosen colors....'

And in Edit¦Preferences¦Fonts, is allow documents to use other fonts cleared?

I did these and Moz ignores my style sheet colors, font faces, and font sizes.

[slips9]

thanks! changing the preferences did the trick!

[triskell]

I've been having exactly this problem, so my hopes were high reading this thread, but I've tried playing with preferences, and double checked the code calling my stylesheet, and Moz is still ignoring it.

Any more ideas?

[Longhaired Genius]

I've been having trouble getting Mozilla to read my sites' stylesheets and I found this interesting article on the subject.

[sapid.com...]

Taking the DOCTYPE off my pages has worked for now but it's an unsatisfactory solution.

[triskell]

Thanks, Genius. That works.

Although it's a pain in the ass, and rather buggers my intention of W3C and Bobby validating. Reckon I'll just have to assume that I'm the only person looking at the site with Mozilla, and put the doctype back in.

[Crescendo]

Have you tried:

<link rel="stylesheet" type="text/css" href="../css/test_style.css" />

Or have you tried putting the full web address in?

How about adding 'media="screen"' also?

[Reflect]

thanks! changing the preferences did the trick!

This brings up a question in my mind. Were these the default settings and needed changed or had you modified the default settings and had to change them back?

Thanks,

Brian

[bobriggs]

My default settings were OK after installation, as far as style sheets go (fonts and colors)

Just a hunch, but if you have NN4 installed also, what are the settings there? Possibly pulled preferences from it.

[madcat]

Netscape 7.0 is not recognizing my style sheets either. Removing the doctype is not an option...

My prefs are set correctly...Maybe @import has something to do with it?

[bobriggs]

What mime/type is your server returning for css files? (See Longhaired_Genius's link)

So far we've got prefs, DOCTYPE, and mime/type returned by the server as possibilities.

[madcat]

Thanks, it must be the mime/type.

[madcat]

How do you change the mime/type in httpd.conf on a hosts server?

[madcat]

Alright, so both Netscape and Mozilla had been choking on style sheets after uploading to the server. I uploaded some simple lines via .htaccess:

AddType text/css css
AddType application/x-httpd-php .php4 .php .htm .php3 .inc .html

--> That took care of Netscape. Mozilla however, after messing with preferences, adding .htaccess lines and making sure the doctype was in order still fails to recognize the sheets.

[Longhaired Genius]

This is such an irritating problem! Especially as most ISPs will not see it as a showstopper. I have found after expirementing that even within the same ISP some servers will serve css properly to Mozilla and some won't; so (as a workaround) it's worth uploading your css file to every IP address you have access to and then try linking the css to your html from each one in turn untill you find one that works. then get onto your ISP and ask them to fix the mime/type issue.

[madcat]

No doubt it is ;) Thanks, I think I will send 'em an email...

[MojoBayou]

MadCat, dunno if this'll help, but in msg 17 you have:

AddType text/css css

rather than:

AddType text/css .css

[madcat]

Hey MojoBayou- Welcome to the forums...That didn't get it but was a good guess. I'm fairly certain I might have to contact my host to find out what's going on; until I have better knowledge of the server-side:)

Thanks-
M

[ergophobe]

I believe that the Apache docs say that it is acceptable to use extensions with or without the dot in the AddType. I don't know about other servers.

By the way, I have documents with a DOCTYPE and XHTML style tags and they all show the external stylesheets just fine in Moz 1.1.

Tom

[madcat]

I have documents with a DOCTYPE and XHTML style tags and they all show the external stylesheets just fine in Moz 1.1.

I'm keeping hope alive ergophobe...

[dingman]

I just did a quick check of all the sites I have style sheets on in Moz 1.1, and they work just fine. (At least style-sheet wise. some in-progress pages I looked at have other problems)

The line "text/css css" shows up in the mime.types file that Apache is using on my server. For what it's worth, the server I have complete access to only has pages with styles incorporated by @import rather than by <link rel="stylesheet ...>. The only drawback I know of to that is the fact that in my experience NN4 doesn't honor @import, and does honor <link rel="stylesheet"...>. However, as browsers become more standards compliant, multiple <link>s to stylesheets will stop cascading and start offering the user a choice of stylsheets. (Odd, but apparently thats how the standard is written.)

Anyway, the upshot here is meant to be that there is hope yet.

[bobriggs]

Dunno, but would you like to try 2 things? And I'm only seeing these on the site in your profile, so if you're not having problems there, my apologies in advance if this is a wild goose chase.

You're using this syntax:
@import "css_global/site_wide_structure.css";

Which is valid.

What happens if you use the more widely used syntax:
@import url(/css_global/site_wide_structure.css);

(PS here, just me, but I'd always prefix the url with / just to be on the safe side)

Second, what's the deal with this one?
<link rel="stylesheet" href="css_global/empty.css" type="text/css" media="screen" />

Here are the headers returned for a GET /css_global/empty.css

HTTP/1.1 200 OK
Date: Fri, 20 Sep 2002 02:29:13 GMT
Server: Apache/1.3.26 (Unix) PHP/4.1.2 FrontPage/5.0.2.2510
Last-Modified: Tue, 17 Sep 2002 17:55:55 GMT
ETag: "38a56-0-3d876cab"
Accept-Ranges: bytes
Content-Length: 0
Connection: close
Content-Type: text/css

Do you suppose that your 0 byte empty.css is confusing Netscape? I don't know, I don't have v7, so I can't see it. But your site looks OK to me in Moz 1.1.

(PS again, note that your content type is being returned correctly).

Last possibility that I would look at. Do you have any 404 errors coming from Netscape 7? If so, it's forming the relative URL's incorrectly.

[madcat]

Thanks bobriggs

Second, what's the deal with this one?
<link rel="stylesheet" href="css_global/empty.css" type="text/css" media="screen" />

hehee...this is used to correct a problem Internet Explorer has when loading pages- you'll see unstyled content for a moment then pop; styled content. This removes the flash you see.

Here are the headers returned for a GET /css_global/empty.css

How do you do that? Is this a function? (Might be something I overlooked, but I'm here to learn so I might as well ask;))

Do you suppose that your 0 byte empty.css is confusing Netscape?

Well, this was happening before I brought out the empty.css...I will try figiting with the relative URL's and see if anything changes-

Oh, and no error messages as of late...

[bobriggs]

Here are the headers returned for a GET /css_global/empty.css

How do you do that? Is this a function? (Might be something I overlooked, but I'm here to learn so I might as well ask)

No function, just a program I wrote. If you'll check your logs about the time I posted, you'll see it's from googlebot, but not from a google IP address. I think you can get the same info on searchengineworld.com, here's a link:
[searchengineworld.com...]

Second, what's the deal with this one?
<link rel="stylesheet" href="css_global/empty.css" type="text/css" media="screen" />

hehee...this is used to correct a problem Internet Explorer has when loading pages- you'll see unstyled content for a moment then pop; styled content. This removes the flash you see.

If I try to load this 0 byte file in Opera, it hangs.

But have you tried to eliminate this to see if it's the problem?

[edit and added]
I think that's the wrong URL for SEW. Someone help me, I can't find it. Anyway, there are plenty of progs out there that will give you the same info as the headers from any GET or HEAD request. Sometimes you need to check these from time to time.