" If you set a default style for the td tag in your stylesheet, like this, td {font-family: Arial, Helvetica, sans-serif; font-size: 11px; color: #333333;} then this will be used in your tab strip, no matter what style you create for the tab items " Questions like this are quite common in forums and support calls. An obvious way to avoid this conflict is to not have a default style for TD tags. However, this is not always practical - default TD style definitions are quite common, sometimes even mandated by corporate policy. Instead, there is a lot less intrusive way to get this to work. First let's take a look at an example of how this happens. Suppose we have a page which contains a CSS definition like this, instructing table cells to use Comic font: TD { font-family:"Comic Sans MS"; } However we want to show menu items in Courier font: .myMenuItem { font-family:"Courier New"; } This looks like it should work, and it sometimes does. But more often it doesn't: Menu items (or TabStrip tabs, or NavBar items...) use Comic Sans font from the default TD style, instead of Courier New from myMenuItem CSS class. To understand why, let's take a look at a (simplified) sample of HTML that is rendered by the menu for its item: <td class="myMenuItem"> ITEM TEXT </td> In this first case definitions applied in myMenuItem CSS class will correctly take effect. However, in many cases - for example, when the item has an icon - the rendered HTML is more complex: <td> <table class="myMenuItem"> <tr> <td> <img src="icon.gif" mce_src="icon.gif"> </td> <td> ITEM TEXT </td> </tr> </table> </td> In this case, style definitons for default TD element will take precedence over definitions for myMenuItem CSS class. The item will show in Comic font instead of the desired Courier. There is a very simple CSS workaround for this situation. Just slightly modify the original definition to get: .myMenuItem TD { font-family:"Courier New"; } The meaning of this defintion is: if a TD tag is within a tag of class myMenuItem , show it in Courier New font. This is more specific than the default TD style we're trying to overrule, so it will win out. Note however, that while this definition will work in the second case (the more complex item), it will not work in the first (the simple item). So finally the solution that works for all cases is a combination of the two: .myMenuItem, .myMenuItem TD { font-family:"Courier New"; } Share this post: email it! | bookmark it! | digg it! | reddit!
