really weird css error font-family not working

[turkman]

Have this very basic css page and a very basic html page, however font-family isnt working in the body bracket. No matter what i change it too, the text remains the same. If i add monospace on the end, the text becomes monospaced and all the other styles work ok, its just not the font-family. I have no idea why.

 

a{
  color:#0099CC;
}

#notice_bar{
  background-color: #2088B2;
  padding: 20px;
  color: #FFFFFF;
}

#notice_bar a{
  font-weight: bold;
  color: #006699;
}

#page_wrapper{
  width: 100%;
  margin: 20px;
}

#page_header{
  height: 50px;
  font-size: 20pt;
  text-align: center;
}

#left_side{
  width: 20%;
  padding: 10px;
  float: left;
}

#middle_bit{
  width: 60%;
  padding: 10px;
  float: left
  
}

#right_side{
  width: auto;
  padding: 10px;
  float: left;
}

body{
  color: #555555;
  font-size: 9pt;
  font-family: "Verdana";
}

[cssfreakie]

Have this very basic css page and a very basic html page, however font-family isnt working in the body bracket. No matter what i change it too, the text remains the same. If i add monospace on the end, the text becomes monospaced and all the other styles work ok, its just not the font-family. I have no idea why.

 

a{
  color:#0099CC;
}

#notice_bar{
  background-color: #2088B2;
  padding: 20px;
  color: #FFFFFF;
}

#notice_bar a{
  font-weight: bold;
  color: #006699;
}

#page_wrapper{
  width: 100%;
  margin: 20px;
}

#page_header{
  height: 50px;
  font-size: 20pt;
  text-align: center;
}

#left_side{
  width: 20%;
  padding: 10px;
  float: left;
}

#middle_bit{
  width: 60%;
  padding: 10px;
  float: left
  
}

#right_side{
  width: auto;
  padding: 10px;
  float: left;
}

body{
  color: #555555;
  font-size: 9pt;
  font-family: "Verdana";
}

 

although it's valid, try to remove the " " around the single word verdana, if it than doesn't work get firebug and see where it get's it style from (it could very well been overwritten). Also a good idea to have some backup files in case the OS doesn't have verdana installed

[diptiranjan]

The font-family property allows you to specify a family for your font. A font's family is also sometimes referred to as it's "face" (in HTML at least). It's what most people refer to as the "name" of the font, such as Times New Roman, or Arial, or Verdana. Many people often wonder why this property is named font-family and not font-name or font-face or something similar? Well, it's kind of technical but I'll try to explain it. Say, for example, I have two fonts on my system, "Verdana" and "Verdana Bold". These are actually two seperate and distinct fonts. They are stored as two seperate files on my computer. Although these two fonts have different "names" ("Verdana" and "Verdana Bold"), they share the same font "family". They both belong to the family "Verdana". So that is why if we need to specify the Verdana font on our webpage, we specify it's font-family property like so...

 

font-family: verdana, sans-serif;

 

You may be wondering "Well, what's the comma there for? And what's sans-serif doing there?" Well, that's what's called a fallback font. CSS has this nifty feature when specifying a font-family called a fallback font. Fallback fonts are used in case the first font you specify is unavailable.

 

Also follow cssfreakie

"if it then doesn't work get firebug and see where it get's it style from .Also a good idea to have some backup files in case the OS doesn't have verdana installed"

[cssfreakie]

Also a good idea to have some backup files in case the OS doesn't have verdana installed

@ myself  i meant backup fonts

[turkman]

Ive tried lots of different fonts, with and without quotes. Im hosting it on my ubuntu apache server, whats really weird is that font-family works on other sites i have store on it

 

i.e var/www/site1 - works

    var/www/site2 does not work

 

ive been trying to get firbug to work, but it wont show up when i install it. I have tried troubleshooting it, but cant figure out whats wrong with it. I have web developer, but not sure if that can be used. Also ive tried adding font-family into the divs, does not work there either.

[cssfreakie]

Ive tried lots of different fonts, with and without quotes. Im hosting it on my ubuntu apache server, whats really weird is that font-family works on other sites i have store on it

 

i.e var/www/site1 - works

    var/www/site2 does not work

 

ive been trying to get firbug to work, but it wont show up when i install it. I have tried troubleshooting it, but cant figure out whats wrong with it. I have web developer, but not sure if that can be used. Also ive tried adding font-family into the divs, does not work there either.

 

ok got it online somewhere? seems you didn't inspect it with firebug yet.

[diptiranjan]

XHTML 1.0 Strict

 

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional

 

This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML 1.0 Frameset

 

This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

 

 

also try i have less idea about ie9

[cssfreakie]

the doctype has nothing to do with this!

they are refering to the <font> tag which is something different. That's why it's always nice instead of just copy and paste stuff read it.

[turkman]

i can host it online if you want, give me a sec.

 

http://www.imgboard.co.uk/stupid_css/

 

 

 

[cssfreakie]

well i just checked and you didn't declare anything for body. 

 

also #middlebit successfully is in verdana  (but don't forget to declare fall back fonts as already mentioned above)

 

Get firebug (it really helps) if you never worked with it, i made a little vid on my blog you might want to check out, but it's pretty self explanatory

edit: oh another thing, you might want to put style.css below the jquiryui.css depending on what is declared in there. (but that is not the cause for the body to have no style since nothing is declared anyway)