Best way to troubleshoot IE (6 & 7) CSS issues? Linked In

Troubleshooting CSS in IE is the question!!

A linked in user asked a bout a topic that can cause even the most experienced developers headaches. Differences between the ways browsers handle CSS. The tough part about this is that even with versions of the same browser there are issues. That being said lets look at some of the solutions the linked in pros came up with to help.

Most Popular:

The most popular recommendation came for using Firebug lite which provides a view of the site code as well as applied css classes and tags based on component. This way you can review what is being applied to your content to make it look the way it does. Multiple IE. Is also at the top of recommendations. It allows for snap shots of your page as it would be rendered in the different IE browsers. This is great so that there is no need to have them all installed on your PC. These applications are different in nature but both provide a very needed part of debugging.

Also Noted

I personally have used the IE Developer Toolbar and have found it very useful in debugging CSS issues. I also use Firebug for Firefox. There was only one suggestion to use the tool. Other tools mentioned were

• http://www.debugbar.com
• http://www.virtualbox.org
• http://www.parallels.com
• http://www.vmware.com
• http://www.litmusapp.com

I hope this helps out with your CSS debugging.

Fine Tuning Table Styles in JSF and Richfaces with CSS

Richfaces is a nice JSF component library packed with very stylish looks and skinning capabilities. The rich:dataTable control is one of the flag ship controls of the entire package because it allows developers to get nice attributes such as roll over highlighting and alternate line shading done easily with an minimal amount of work. However, some times the data would require that the developer either nest a table or get right down to the actual cell for styling purposes. For many developers just starting to work with JSF and Richfaces, this could be a very time consuming task that produces much frustration. We will look at one way of getting to the cells that you want using css.

<*:column> means the <h:column>, <t:column>, <rich:column> items for tables.

JSF table styling and scope is as follows

styleClass – Table level styling and potentially row level styling if in a <*:column> tag
headerClass – Table header level styling
columnClasses – Table column level styling (common area of misconception)
rowClasses- Table row level styling (normally used for backgrounds, selection indicators and roll over shading)

With all of the above tag attributes they turn into class definitions for the table. Using these to define things like header rows or columns; provide column alignment, with and style; table size, borders and fonts works very well. The issue is how do you get down to a single cell and adjust things differently than they normally are in the table. Say you have one cell that had a different border requirement because of emphasis on that data, or a cell that has different font and background needs than the rest of the table.

HTML users would say go and place an ID on the cell and style based on the ID. However, there is no cell definition in the layout of table controls in JSF. Table Cells are generated for you automatically based on the combination of the amount of columns you define in the eg a two column table would have (columns=”2″), and the list of column and element tags you have nested inside of the panelGrid, dataTable, subTable tag. So there is no direct access to a <td> to put an ID on.

To get around this what I did was use a CSS class which I could add to either my rowClasses definition or styleClass definition of a specific <*:column>


for the column
<t:column styleClass="myStyle">
contents that need to be styled in the TD
</t:column>

The style definition for this would then be
.mystyle td{ border:1px solid red;}

What this achieved is placing a red border around the TD or TDs contained in that column tag.  For fine tuning of your tables this method allows you to get to the cell level.  However, it is still not as good as being able to directly place an ID on the cell you want to manipulate and styling that item individually and directly.