FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

problem with attached css style sheet

   Frihost Forum Index -> Webmaster and Internet -> Design Tips
 


ammonkc
for some reason I can't get this style sheet to work properly. when I put this style class in an attached style.css file it doesn't work. but if I add this style directly into the page it works fine.


This works fine:
Code:

<style>
.form {
   font-size:12px;
   font-weight:bold;
   font-style:normal;
   color:#000000;
   text-decoration:none;
   font-family:verdana;
}
</style>



but if I put the same code in a separate style.css file the 'form' and the 'form_normal' classes dont work at all :
Code:
/* CSS Document */

<!--Form css style classes-->
.form {
   font-size:12px;
   font-weight:bold;
   font-style:normal;
   color:#000000;
   text-decoration:none;
   font-family:verdana;
}
.form_normal {
   font-size:12px;
   font-weight:normal;
   color:#000000;
   text-decoration:none;
   font-family:verdana;
}
.form_header {
   font-size:18px;
   font-style:normal;
   font-weight:bold;
   text-decoration:none;
   font-family:verdana;
}
.form_small {
   font-size:11px;
   font-style:normal;
   font-weight:normal;
   text-decoration:none;
   font-family:verdana;
}
.error {
   font-size:12px;
   font-weight:bold;
   color:#FF0000;
}

/* Horizontal Line: */

div.hr {
   color:#6b9689;
   height:2px;
   width:100%;
   display:inline
}
<!--End Style classes-->


the other classes like 'form_small' works but the first two don't. anyone have any idea what i'm doing wrong?

thanks
misterdimiz
I've tryed to remove the comments.. and it works.

So the content of style.css has to be this:

Code:
.form {
   font-size:12px;
   font-weight:bold;
   font-style:normal;
   color:#000000;
   text-decoration:none;
   font-family:verdana;
}
.form_normal {
   font-size:12px;
   font-weight:normal;
   color:#000000;
   text-decoration:none;
   font-family:verdana;
}
.form_header {
   font-size:18px;
   font-style:normal;
   font-weight:bold;
   text-decoration:none;
   font-family:verdana;
}
.form_small {
   font-size:11px;
   font-style:normal;
   font-weight:normal;
   text-decoration:none;
   font-family:verdana;
}
.error {
   font-size:12px;
   font-weight:bold;
   color:#FF0000;
}


div.hr {
   color:#6b9689;
   height:2px;
   width:100%;
   display:inline
}


Join!
ammonkc
Thanks. Why were comments causing this problem with the style sheet? I'm made hundreds of pages using style sheets and I don't think that I've ever had this problem before. it was wierd because half of the classes worked and half didn't. thanks for your help. I don't know why I didn't think of that too.
misterdimiz
I don't know why. I usually don't use the comments in CSS stylesheets.
But it seems that using comment in this format
Code:
<!--comments-->
it doesn't work, and using in this format
Code:
/* comments */

it works
Confused
ammonkc
thats good to know. I never really noticed that before. I'm not even really sure which style of comment I normally use in css style sheets. you learn something new everyday. thanks
Ashims
Yeah, the problem was you copied across the...

Code:
<!-- comment -->


...which is an HTML comment. Obviously you're not writing in an html document anymore (in the external CSS file) so the web browser does not know what to do with it and dies. It probably would have rendered everything before that comment though Smile.

CSS uses a commenting style which is used in a bunch of programming languages...

Code:
/* multiline..

...multiline */


and also

Code:
// single line


Hope this helps.

If you're wondering why HTML/XHTML doesn't use a similar commenting style its simple if you think about it. HTML is made up of tags encapsulated inside "<" and ">". Everything in HTML is one of these, otherwise its interpreted by the browser as input into a certian field type (inside the <body /> tag its interpreted as text).

So when the parser hits the < it starts looking for a tag type (a, body, html, head, title, div, etc). But a comment doesn't have a type, its there to be completely ignored by the parser, So you need some sort of string of characters you wont find anywhere else to escape it (like /* in css), in HTML they chose "!--" to open it and "--" to close...

I guess the exclaimation mark could be interpreted as some sort of link to a person talking, and the hyphens are there to make sure the special case comment tag is unique.

Cheers.
Ash.
misterdimiz
OK. I've understand.
I have to use the same "comments style" of PHP.

Thanks for the tip. Smile
shabda
Are you sure //coments work in css. They work in many prog lang but not in css I think. But ill check again and post.
Reply to topic    Frihost Forum Index -> Webmaster and Internet -> Design Tips

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.