Firefox and CSS

[Anime Kidd]

I am having trouble with Firefox and some Cascading Style Sheet troubles. I'm currently redesigning the layout of my site and am using CSS. I always work with IE as the browser while I write the html code. Now I am done with everything, but Firefox won't use the style.css file for any text formatting that I want, it just uses the standard web settings for the font, link colors, etc. Here is the html text that I use to link to the css file:

<LINK REL=stylesheet TYPE=text/css HREF="style.css">

What is going wrong? It works wonderfully in IE, but FF just won't recognize the css file. I even tried to make a direct link to the css file, but it still doesn't do it. Maybe its because its not on a webserver?

For now I have the color scheme set up to account for Firefox's lack of css support in this case. This sucks as Firefox is my favorite and only browser I use. I don't want to see my site looking unfinished.

 

[Zulithe]

I'm far from being an expert but I could help debug it better if we had a link to the site. Maybe try changing it to something like this:

<link rel="stylesheet" type="text/css" href="style.css" media="all" />

It might be the missing quotes that firefox isn't liking. Especially if you are coding your site in xhtml 1.0 or 1.1.

If that makes no difference, run your site through an html validator.

http://validator.w3.org/

I'm just figuring out the problems CSS incompatibilities between browsers can create. I am using an all CSS based layout on my campaign website and it somtimes takes extra work to get it looking right on IE/firefox/opera (I can't test Safari since I have no Mac). It still looks horrid in IE. I can code in some CSS workarounds but haven't got around to it yet. Here it is if you'd like to see it and maybe get some ideas from the code:

http://crimson.host.sk/

 

[ThirdWizard]

Is it inside comments?

 

[IronWolf]

The link Zulithe provided to test your pages adherence to standards would be a good place to start I think. IE has been known to have several bugs with regards to how it works with CSS. Often times if the only browser you use to check your site is IE you will end up tweaking things just to work around some of IE's shortcomings and end up breaking it for other browsers. Not sure if that is the issue here, but its worth a look.

 

[Anime Kidd]

Ah-hah! I found the problem. I had used some comments tag within the CSS file and though IE saw through that, Firefox was nitpicky.

I'm far from being an expert but I could help debug it better if we had a link to the site.

Well I haven't uploaded the site yet. it is still sitting on my computer until I can get this CSS problem fixed (and maybe valid too).

If that makes no difference, run your site through an html validator.

http://validator.w3.org/

I've tried this, but when I get the results I can't really make heads or tails of it. They say there is an error here or there, but I don't see it. An example would be the HEAD tag. It says:

Error Line 9 column 6: end tag for element "HEAD" which is not open.

</head>

The Validator found an end tag for the above element, but that element is not currently open. This is often caused by a leftover end tag from an element that was removed during editing, or by an implicitly closed element (if you have an error related to an element being used where it is not allowed, this is almost certainly the case). In the latter case this error will disappear as soon as you fix the original problem.

If this error occured in a script section of your document, you should probably read this FAQ entry.

See that explanation doesn't help me much as I have the HEAD tag and the ending tag for it in the right spots (or at least from what I've read in html books) but it still says its wrong. It also says the same thing about hte BODY tag and it being where it's not suppose to be. :\

 

[Zulithe]

If you examine your code closely you should find the issue, just as you did with this one.

A lot of times these common mistakes can be discovered early if you use an editor capable of catching these problems for you. I use TopStyle Pro, which also has excellent CSS support. I highly recommend it.

 

[Michael Morris]

Also check the sourcecode of pages where the effect is working and see what is different between your page and the page where it is working. That helps.

 

[Psionicist]

The CSS-support in IE is very poor and doesn't follow the standards. Firefox is much better in this regard. So it's probably not Firefox you should blame. You can validate your CSS here: http://jigsaw.w3.org/css-validator/ It will check if your CSS follows the defined standard.

 

[Thanee]

Unfortunately, tho, Microsoft sets the relevant standards not W3. Since ninetysomething (or so) percent of the people around the net still use IE, it's what IE does, which is standard and which websites get optimized for. Sad, but true.

Bye
Thanee

 

[Anime Kidd]

Well I figured out what the problems were. First, it was me placing comments in the CSS file. Second, the whole HEAD tag issue was actually dealing with how I linked to the CSS file. I hate to admit that it looks like all the errors I've been having around easy ones that I wouldn't of missed if I went through it more thoroughly.
Now the page looks to be valid HTML 4.01 Transitional. It still is buggy in Firefox and Opera (which I now have as well). This time some table rows are larger then they should be, but before I ask for help here I am gonna try to figure this out myself.

Edit -----

I have finally found out all the problems I've had and now it looks like the html part at least will be validated. I still have to pour over the CSS for validation, but as it stands, the site is near completion. Thanks everyone for all the help. Really appreciated!