ComponentArt Blogs
This space is available to any ComponentArt employee to write about anything.

Tackling Stubborn TD Style Definitions


"
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!

Posted by: Jovan
Posted: Monday, June 18, 2007 2:05 PM


Comments

Arthur Garcia said:

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
# June 19, 2007 9:55 AM

Jovan said:

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.
# June 19, 2007 8:26 PM
Leave a Comment

(required) 

(required) 

(optional)

(required) 


Blogs On This Site
Thoughts on web user interfaces and component development.
Ramblings of a web control developer.
Web.UI news and more
Next weeks guest: A dog and a baby dog!
I'm in your base, killing your dudes.
Absurdity is it's own message.
Musings of an ex Java developer
im in ur page, hackin ur codez
ComponentArt in the Community
... and the program ran happily ever after.
Helping you help yourselves
My bugs are actually hidden features!

This Blog