Question

How would I go about troubleshooting why certain styles are not applied in IE9 … I can see that they are crossed out when I check my firebuglight.
But in FF, the style is applied, which is what I want.
unfortunately, this is not my css or web app so I’m not familiar with the css.

My second question is this. I’m also noticing that in IE, the class is being “overwritten” multiple times. Meaning – I see the same class repeated in the list of classes, with different properties.
In FF, I only see it once. If FF looks good, can I assume that I can delete all instances of the class name in the css file, except for the one that FF shows in its firebug list?

Thanks.

EDIT 1:

Here’s an example. In IE, I have the following 2 styles being applied to an tag.
Everything in the first style is “enabled” but in the second class, the color is disabled.
as is all the padding.

#websiteName {
  color:#65605e;
  float:left;
  letter-spacing:1px;
  padding-bottom:4px;
  padding-left:10px;
  padding-right:10px;
  padding-top:11px;
}    

#websiteName {
  color:#ffffff;
  font-size:150%;
  font-weight:normal;
  margin:0;
  padding-bottom:5px;
  padding-left:10px;
  padding-right:10px;
  padding-top:5px;
  text-align:center;
  width:auto;
}

However, in FF, this is what I see for the same class:

#websiteName {
  color:#FFFFFF;
  font-size:150%;
  font-weight:normal;
  margin:0;
  padding:5px 10px;
  text-align:center;
  width:auto;
}

So in my css, I searched to find all instances of this class. And I found the following embedded in a big long string of css code:

#webLogo{display:block;width:25%}#websiteName{color:#65605E;letter-spacing:1px;padding:11px 10px 4px;float:left}.dir-rtl #websiteName{float:right}#someotherclass{}

and also this, also embedded in amongst other css class definitions.

#websiteName{color:#FFFFFF;text-align:center;width:auto;font-size:150%;font-weight:normal;padding:5px 10px;margin:0}

The second code snippet appears after the first.

EDIT 2:

I randomly decided this afternoon to change my monitor for my computer that has IE running on it and guess what? VOILA! The site now appears the same in IE as it does on my FF machine.
Im’ just a css newbie so I’m not sure if this correct, but i started look for media queries in my css to see if it was detecting browser sizes somewhere.
I haven’t found anything yet but can you give me any other ideas as to what might be going on?
Thanks.

Answer 1

For “troubleshooting why certain styles are not applied in IE9 “; before letting what-so-ever-tool try to help you, read AND understand this : http://www.w3.org/TR/CSS21/cascade.html.

Focus on point 6.4 The cascade (precedence)

Style sheets may have three different origins: author, user, and user agent.

Author. The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally.
User: The user may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the user agent may provide an interface that generates a user style sheet (or behaves as if it did).
User agent: Conforming user agents must apply a default style sheet (or behave as if they did). A user agent's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the EM element in HTML is presented using an italic font). See A sample style sheet for HTML for a recommended default style sheet for HTML documents.

For your other question : firebug can be ‘setUp’ to ‘Only show applied styles’, ‘Show user agent style’. Try those to show/hide at your preference. Also, if you declare something like this :

div, td, span, .selector, a {
    color:red;
}

...
<td>
    <div>
        <span>
            <a href="some.link">text link</a>
        </span>
    </div>
</td>
...

then you inspect an anchor within a span, within a div within a td, Firebug will show you 4 times the style applied (due to your firebug settings)