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.

Linked In QnA, How functional must a prototype be if my goal is to get an investor or potential partner interested in the concept?

This question was asked by a gentleman looking to build something that he could start and wanted to start but would like to get help with finishing. This is the question for virtually everybody with an idea for a product. Essentially it is “How much of what I am thinking do I have to have built and have ready for show in order to attract people with capital to help me”. The Linked In Experts or at least people with experience and were not to scared or greedy to share weighed in and provided some good information.

There were 6 answers to this question total, of which 4 were chosen as good answers and 1 of the 4 was the best answer. Lets take a look as speaking points for the best answer in this case.

Best Answer

1. Convince them that the product could work
2. Mock up only trivial parts of the system but have enough wow parts working to keep interest
3. Allow investors to play if they would like
4. Research attendees and know your audience (If you have ever read “The 48 Laws of Power” this is of major importance for anyone looking to sell anything)
5. When demoing to developers make sure you show the challenge in the application

This is a nice set of rules to go by based on 2 preconditions of having the prototype ready; and having found people that would want to get on board with you. However, those issues to me seem to be of greater importance because you can’t really do any of what is stated here unless those conditions are met. So lets take a look at the other answers to see if someone piped up about ways to find those willing to help you.

Good Answers

1. Functioning product (2 Nods)
2. Get it used by actual users (2 Nods)
3. The other 1 that answered really just pitched their services and piggy-backed.

Answers Note Rated as Good

The strangest thing is that I think that both of these answers are actually much better than the answers of the 1 that was selling. Points from not good answers.

1. Know what your VC is looking for
2. Have a working scale at least
3. If it is a physical product have a working scale version
4. Make sure that it shines (people don’t get under the hood if the body is garbage)

for not rated as good answers these 2 guys actually provided some good insights. For instance number 4, where the the statement is ” Your GUI must rock..” is very true. I have seen many products where the part that the customer, investor, user sees is not appealing and the product fails because they can’t get past the look. So when you go looking for investors make sure they can get past the first impression so that you can sell them on the real meat of the thing. The other points of the not good answers all mimic what had been said before just with different examples.

Well I hope this was a nice little look into this Linked In question and answer. Will have another one next week.

Link to the actual post:

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.