Jump to content
Stef's Coding Community
Aucheorn

CSS Validation, do not exist in 2.1

Recommended Posts

I have a CSS which validate under CSS2 but when I try under the default in "Rapid PHP" I get the errors "font-family/style/weight" don't exist in CSS2.1" The relevant cade is as follows, my site design is dependent on this embedded font.

 

@font-face {

font-family: Monotype Corsiva CE;

font-style: normal;

font-weight: normal;

src: url(MONOTYP0.eot);

}

 

I also get a warning that there is "No declarations in the rule" What does this mean, I can't find any reference on W3C.

 

Any pointers to get round this would be gratefully appreciated.

Share this post


Link to post
Share on other sites

The list of fonts needs to be comma-separated with double quotes around any font names that include a space. That might be the issue.

Share this post


Link to post
Share on other sites

I had added the quote round all mentions of the font, which got rid of all the warnings except for the "No declarations in the rule" I presume this warning is a result of the errors below.

 

2 Value Error : font-family Property font-family doesn't exist in CSS level 2.1 but exists in [css1, css2, css3] : "Monotype Corsiva CE"

3 Value Error : font-style Property font-style doesn't exist in CSS level 2.1 but exists in [css1, css2, css3] : normal

4 Value Error : font-weight Property font-weight doesn't exist in CSS level 2.1 but exists in [css1, css2, css3] : normal

5 Property src doesn't exist : url(MONOTYP0.eot)

 

I may have to stay with CSS level 2. :rolleyes:

Share this post


Link to post
Share on other sites

font-family: Monotype Corsiva CE; is a font I haven't heard of before, so it's recommended that you always include an alternative font that is likely to be on all browsers and also a computer-safe font.

 

Place you preferred font first, then the others, so that the browser takes the first that it can display:-

 

font-family: "Monotype Corsiva CE", arial, monospace;

 

Browser-safe fonts are listed here:-

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

Share this post


Link to post
Share on other sites

I know Monotype Corsiva CE is rare, that's why I embed the font. I've used it for years with no problems, before it was embedded Arial was the alternative but it did not give me the look I wanted.

 

It's only on CSS level 2.1 Validation it throws up the errors.

 

I just like to be different ! :D

Share this post


Link to post
Share on other sites

I haven't got Monotype Corsiva CE in my browsers so I would not be able to use the font and my browsers would use the browser default style, usually Times New Roman or Arial, unless you specify the alternative.

 

I notice that you have used font-face with a url. There is another method combining Flash and Javascript but it is complicated.

 

Edit: I've been doing a little googling and found this

http://home.tiscali.nl/developerscorner/fdc-varia/font-embedding.htm

which implies that most browsers are not advanced enough to show an embedded font, so those browsers need an alternative.

 

In the link above the last example which uses a .eot file src: url(acekrik0.eot); does show the font in my IE7 but Firefox shows the alternative Times New Roman from

font-family: IE_ace, "Times New Roman", serif;

which emphasises the need to specify alternatives unless you want a viewer to use their browser default which could be anything.

Edited by Wickham

Share this post


Link to post
Share on other sites

There is no effective way to embed Fonts that I have ever heard of. I do not see from that code how it is embeded either.

 

CSS 3 is working on a way to embed Fonts, but I doubt it will be ready for the CSS 3 release.

 

Also beware having some odd ball Font that your "site design is dependent on". You are placing your choice in design over the needs of the users you are building the site for. Include a way that the user can change the Font to something like Arial for those people with eyesight problems. The idea is to get your service/information to people... and causing eyestrain for the sake of a fancy Font is not the best choice. (That said - I don't know the font, so it may be decently readable... I am talking Theory.)

Share this post


Link to post
Share on other sites

I embedded the font using Microsofts Weft. It creates a file containing all the characters and variation called (in my case) monotyp0.eot, Some fonts ie. Verdana require a separate file for Italics, this you put in your root and put the following code in each file that uses the font

 

 

Bitstream also have an embedding tool but it is limited to their fonts.

 

When I found out about style sheets I incorporated it into the sheet and was able to remove the code from the pages. When I validated the css file on W3C CSS 2 it passed but as CSS 2.1 it failed.

 

I'm trying out Rapid PHP 2009 when coding CSS it defaults to CSS 2.1

(It also does HTML, PHP AND JAVASCRIPT.)

 

My site brae moray com is aimed at a very small audience I don't sell anything, just pass on information.

 

I think I'll stick to CSS 2 and wait for CSS 3.

 

Thanks everyone for your help.

Share this post


Link to post
Share on other sites

Your site looks good in IE7 with the Monotype Corsiva CE font but as I expected, Firefox just shows italic Arial which is my browser default.

 

However, Firefox shows the word "braemoray" superimposed over the words "Welcome to the Dunphail Web" so you should edit that. Edit: try this style change to correct the top margin:-

.brae {text-align:center; font-family:"Monotype Corsiva CE";

font-size:50pt; color:#800000; font-style:italic; margin-top: 5px;}

 

Your doctype is incomplete; it should be

/p>

"http://www.w3.org/TR/html4/loose.dtd">

 

See http://www.w3.org/QA/2002/04/valid-dtd-list.html

 

It's amazing to see that IE is ahead of other browsers in showing special fonts from a url.

 

Edit: use this site to see what your page looks like in other browsers

http://browsershots.org/

Edited by Wickham

Share this post


Link to post
Share on other sites

Thank you Wickham

 

I've made the change you suggested and changed all the DocTypes.

 

I'll certainly have a look at browsershots.

Share this post


Link to post
Share on other sites

Weft never really worked, last I heard I thought it had been abandoned. It limits you to so few Font types I found at least the early version years ago to be all but worthless. Such attempts is what led to CSS 3 embed talk, but as i understand it it has been such a problem that it is not really expected to work by 3.

Share this post


Link to post
Share on other sites

Some heavy reading there :)

 

How are compromises reached from what seems pretty entrenched positions ?

 

I am a lot wiser now, and still in favour of .eot.

 

Off topic : Keep the "Only in Alaska" coming. What's Caribou Barbie upto these days ?

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...