5 replies [Last post]
duckpond
Offline
newbie
Last seen: 13 years 39 weeks ago
Joined: 2006-05-28
Posts: 3
Points: 0

I am testing my Wordpress site with the syntax highlighting plugin - vimcolor, the code block style is as listed below:

div.codeblock {
  font-family: Tahoma;
padding: 5px;
  margin-bottom:10px;
  border: 1px solid #CCC;
  width: auto;
  background-color: #EEE;
}

.synComment    { color: #0000FF }
.synConstant   { color: #0000FF }
.synIdentifier { color: #008B8B }
.synStatement  { color: #A52A2A ; font-weight: bold }
.synPreProc    { color: #A020F0 }
.synType       { color: #2E8B57 ; font-weight: bold }
.synSpecial    { color: #6A5ACD }
.synUnderlined { color: #000000 ; text-decoration: underline }
.synError      { color: #FFFFFF ; background: #FF0000 none }
.synTodo       { color: #0000FF ; background: #FFFF00 none }

It seems like the global font-family setting in the div.codeblock is always ignored, although I can set individually in each of the .syn***{} block, is this the behaviour as it should be? How do I change the font-family globally?

BTW, font-size can be set globally in div.codeblock, so looks like the settings in that block does have global effect, but just font-family can't be set there.

Thanks,

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 22 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

[solved]font-family setting ignored

font-family can be set there. If its not being applied, that means there is another font-family style either on that element or on a nested element which is taking precedence.

You need to identify the font that is being shown and find the style rule (or html) that is setting that particular font. The Firefox DOM inspector is useful for doing that.

btw, "font-family: Tahoma;" isn't advisable. Use "font-family: Tahoma, Arial, Helvetica, sans-serif;". This will give the browser other font options if Tahoma doesn't exist.

duckpond
Offline
newbie
Last seen: 13 years 39 weeks ago
Joined: 2006-05-28
Posts: 3
Points: 0

[solved]font-family setting ignored

The particular problem solved by adding this line to my style file:

Quote:
.codeblock code {font-family:"Bitstream Vera Sans Mono", Monaco, "Lucida Console", monospace};

however, how this turned out to be THE solution is still a mystery to me :oops:

Chris, thanks for your reply and introduce me to DOM inspector, although it's very overwhelming ...

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 5 years 19 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

[solved]font-family setting ignored

You've got this in your stylesheet:

code {
	font: 1.1em 'Courier New', Courier, Fixed;
	}

That applies to all code throughout your site. Without specifying .codeblock code, the browser was ignoring the styles set for .codeblock and applying the styles for code instead because it has a higher specificity weight.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 22 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

[solved]font-family setting ignored

Tyssen wrote:
applying the styles for code instead because it has a higher specificity weight.

In this case, it is not specificity. Font properties are inherited, so if no value is provided, an element will use the value of its parent. If a value is provided it will use that value.

The specificity of "div.codeblock" is higher than that of "code", however the style rules are applying to different elements - so specificity is not relevant.

duckpond
Offline
newbie
Last seen: 13 years 39 weeks ago
Joined: 2006-05-28
Posts: 3
Points: 0

[solved]font-family setting ignored

Tyssen wrote:
You've got this in your stylesheet:

code {
	font: 1.1em 'Courier New', Courier, Fixed;
	}

That applies to all code throughout your site. Without specifying .codeblock code, the browser was ignoring the styles set for .codeblock and applying the styles for code instead because it has a higher specificity weight.

However, before I added the line codeblock code {...}; the code block was not showing "Courier New" font face, instead, it was using some sort of Chinese font (Simsun), which looks ugly for English letters.

Learned quite something from this thread, thanks, guys!Wink