Lives: 30

Tackling Stubborn TD Style Definitions

Posted Mon Jun 18, 2007 @ 2:05 PM


"
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";
}

Posted to Jovan's Blog by jovan

Posted on Mon Jun 18, 2007 @ 2:05 PM

Filed under: ,

Comments

Arthur Garcia
Posted on Mon Jun 18, 2007 @ 2:05 PM
Hi, I am new to ComponentArt and I am having all kinds of problems. I thought you may be able to help. I want to use the Grid control, but I can't find any documentation that show me step by step how to setup the grid. I see examples, but no clear roadmap of how to get my datset into the grid with the columns i want, grid color, etc. Is there anything you can point me to ? thanks. Art
Jovan
Posted on Mon Jun 18, 2007 @ 2:05 PM
I checked with Support and they said: 1) Take a look at the docs (available both online and as part of the download). You can start with: http://www.componentart.com/docs/default.aspx?content=WebUI/Grid_Overview.htm 2) Check out the examples (available both online and as part of the download). http://www.componentart.com/webui/demos/demos_control-specific/grid/features/ajax_grid/webform1.aspx The source code of these examples is available for you to study, cut and paste, etc. 3) Note that you can use ComponentArt Grid just like you would Microsoft's standard free Grid control. It is purposely designed to be able to replace it. 4) Take a look at Grid Knowledge Base articles. http://www.componentart.com/kb/default.aspx?cNode=2M7W0T 5) Take a look at the Grid forum. http://www.componentart.com/forums/ShowForum.aspx?ForumID=52 6) If all else fails contact Support.
Anonymous comments are not allowed. Click here to log in or create an account.

Copyright © 2010 ComponentArt, Inc. All rights reserved.