CSS font shorthand dosn't work, and I don't know why.

[AngryRobboto]

you know those shorthand properties, the ones that turn this

h1 {
font-wieght: bold;
font-size: 3px;
line-height: 1.8em;
}

into this:

h1 {
font: bold 90%/1.8em;
}

well, for some reason that dosn't work for me.

When I try to shorthand font properties, it makes the whole thing stop working in all browsers
:
here is the css file, the fonts are in longhand:




/* This style sheet is for ChirsReynolds' Art page */
/* http://www.example.com/ */
/* website design and layout by John Doe
johndoe@example.net */
/* artwork, photography and such © by Jane Doe
Jane Doe's email goes in this comment*/


html {
padding: 0px;
margin:0px;
}

body {
padding: 0px;
margin:0px;
border:0px;
background:#ffffff;
}

/*
==Page Layout==
*/

#container {
width:778px;;
margin: 0px auto 0px auto;
/*border: 3px solid #000000;*/
background: url(images/fill.jpg) #66cccc;
}

#header {

position:relative;
margin-top:0px;
background: url(images/header.jpg) no-repeat;
width:778px;
height: 111px;
}

#maincontent {

position: relative;
margin-top:0px;
background: url(images/body.jpg) no-repeat;
margin:0px;
left:0px;
width:778px;
min-height:1000px;
}


#footer {
position: relative;
margin-top:0px;
background: url(images/footer.jpg) no-repeat;
width:778px;
height:14px;
}


/*
===menu displays===
*/
#news {
margin-left: 230px;
padding: 20px 95px 0px 0px;
}

#sidebar {
position:absolute;
width: 170px;
height: 400px;
top:0px;
left:0px;
padding: 20px;
float: left;
/*border: 1px solid black;*/
}

#bio {
margin-left: 230px;
clear: right;
padding: 20px 95px 0px 0px;
}

/*
===fonts text styles===
*/

/*
====#news styles====
*/

#news h2 {
font-family: Georgia, arial, serif;
font-size: 25px;
margin:25px 0px 0px 0px;
}

#news h3 {
margin:0;
}

#news p, ul {
font-family: Georgia;
font-size: 12px;
}

/*
====#bio styles====
*/

#bio h2 {
font-family: Georgia, arial, serif;
font-size: 25px;
margin:25px 0px 0px 0px;
}

#bio h5 {
margin:0;
}

#bio p {
font-family: georgia;
font-size: 12px;
}
/*
====#sidebar styles====
*/

#sidebar ul {
list-style: none;
text-align:center;
font-family: Comic Sans MS, arial;
font-size: 12px;
font-weight: 700;
margin-top: 10px;
padding: 0px 40px 0px 0px;
}

#sidebar ul a:link{
text-decoration: none;
color:black;
}

#sidebar ul a:visited{
text-decoration: none;
color:#663300;
}

#sidebar ul a:hover{
text-decoration: none;
color:#006699;
}

#sidebar li {
line-height: 42px;
}

#sidebar h3 {
text-align:center;
font-family: georgia;
font-size: 15px;
margin:0px;
}

/* End of css file */



they were in longhand

heres a sample of the font properties put into shorthand



#news h2 {
font: Georgia, arial, serif 25px;
margin:25px 0px 0px 0px;
}

#news h3 {
margin:0;
}

#news p, ul {
font-family: Georgia 12px;
}



I have no freakin clue why it dosn't work. I've done it before. I've seen it done on other websites. whats going on?

[jscheuer1]

The font family must be the last item and I am uncertain if alternative values are supported in the shorthand version. The order of the values is important:

Selector { font: [font-style] [font-variant] [font-weight] [font-size]/[line-height] [font-family] }

But, not all values must be used.

[AngryRobboto]

yeah, thanks I think I got it to work now

check it out




#news h2 {
font: bold 25px Georgia, arial, serif;
margin:25px 0px 0px 0px;
}

#news h3 {
margin:0;
}

#news p, ul {
font: 12px Georgia;
}