Solved: CSS help needed

tomdkat · 23-Mar-2008, 02:23 PM #1

I'm confused as to why a font-family I specify in a class is being overridden by a font-family specified in another selector.

Here is the HTML in question:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Font conflict</title>
  <style type="text/css">
body#thisfont, #thisfont td {
font-family: Geneva,Tahoma,"Nimbus sans L",sans-serif;
line-height: 135%;
}
.that-font {
font-family: Times New Roman;
font-size: medium;
color: #cc0000;
}
  </style>
</head>
<body id="thisfont">
This is some text!<br>
<br>
<table style="text-align: left; width: 25%;" border="1"
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td colspan="2" class="that-font">This is
some more text</td>
    </tr>
    <tr>
      <td colspan="2"></td>
    </tr>
  </tbody>
</table>
</body>
</html>

I've figured out that the "#thisfont td" selector is what is causing me the grief but I don't know why. First, what does the "#thisfont td" syntax mean? I don't think it means "td elements of id 'thisfont'" since I think that would be expressed as "td#thisfont".

Second, why is the font-family specified in the "that-font" class ignored? The font color and size are honored but not the family.

Thanks!

Peace...

Big-K · 23-Mar-2008, 06:35 PM #2

#thisfont td will apply the styles, unless overridden, to all <td> elements within the bounds of the element that has id 'thisfont'

and in respect to 'that-font', try using just font-family:'Times'

tomdkat · 23-Mar-2008, 10:30 PM #3

Quote:

Originally Posted by Big-K

#thisfont td will apply the styles, unless overridden, to all <td> elements within the bounds of the element that has id 'thisfont'

Funny you mention this since I thought assigning the "that-font" class to the table cell overrode the "#thisfont td" font style. Why didn't that override the "#thisfont td" font style like I thought it would?

Thanks for your help!

Peace...

Big-K · 23-Mar-2008, 11:54 PM #4

i'm not quite sure why it won't override, but you can get it to override by removing ', #thisfont td' from the css. It won't affect anything negatively, since you already apply the styles in it to items within td's due to the use of body#thisfont, so having both is redundant. Taking it out allows for the override.

tomdkat · 24-Mar-2008, 02:05 AM #5

Thanks. I figured that out as well, which is how I knew the '#thisfont td' was causing my problem. I'm just baffled as to why assigning a class to the td element didn't override the style set for the body element.

Peace...

Fyzbo · 24-Mar-2008, 02:26 PM #6

Here is a pretty good explanation of how the browser determines which style to use:

http://cmsproducer.com/css-specificity-inline-important

tomdkat · 24-Mar-2008, 02:29 PM #7

Thanks!

EDIT: Thanks again, Fyzbo!!!!! I just learned that adding an "!important" after my font setting is another solution:

Code:

.that-font {
font-family: Broadway !important;
font-size: medium;
color: #cc0000;
}

Peace...

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)