CODEWITHSUNDEEP
jquerycsscross-browser
Barrett Chamberlain
Barrett Chamberlain

Reputation: 129

methods / tools for combing through css to find which style is being overwritten by what rule?

On this page:

http://www.palosverdes.com/sandbox/9slategrey/index.cfm

I'm trying to put in a new menu (the one at the top under "The City Of Rancho Palos Verdes"). This menu seems to share a lot of container names with other elements on the page. Until now, the other elements have co-existed in harmony, but this menu is being ravaged by them.

The problem is compounded by the fact that the things going wrong with the menu are different depending on which browser you are viewing it on.

What method / tools should I use to pick apart which styles are coming from where, and how best to resolve any styling conflicts? And why would the problems with the menu be different between browsers?

Upvotes: 1

Views: 133

Answers (4)

Barrett Chamberlain
Barrett Chamberlain

Reputation: 129

It turns out, while looking at the styles in firebug, I didn't keep an eye on the error console. When I looked at the top of the screen, I noticed the error count was incrementing for each time I hovered on a menu item.

There was an error like end.fx is undefined, and it turned out to be happening in the javascript file because I defined the starting color of the animation to "transparent", which while the js file understood, threw an error when it tried to calculate animating from "transparent" to the end rgb value.

Upvotes: 1

Joseph
Joseph

Reputation: 119827

What method / tools should I use to pick apart which styles

For Firefox, there's Firebug plugin. For Chrome and IE hit F12 or CTRL+SHIFT+I for the built-in debugger. For Opera, there is the built-in Dragonfly (i forgot the hot-key). Safari .. I don't know. @prodigitalson says it's the same as Chrome.

which styles are coming from where

there should be in the debugger the breakdown of the styles that are applied to the elements as well as the computed (merged) styles and those styles that are overruled.

how best to resolve any styling conflicts?

in CSS, there's what we call "specificity". Although you may think that style definitions cascade (overrule) other styles from top to bottom, think again. try to determine which styles rule over the other and clean them out.

And why would the problems with the menu be different between browsers?

err.. browser inconsistencies? IE has a pretty weird box model (especially in the old versions). try adding a doctype like <!DOCTYPE html> at the very first of the code to enforce strict mode. This will not save you from the IE box model problem, but at least you save yourself from being in "Quirks Mode"

Upvotes: 1

monknomo
monknomo

Reputation: 550

Google Chrome's inspect element (right click -> Inspect Element) will show matched CSS rules and the computed style for each element. I find it very useful for figuring out which rule is causing what effect.

Upvotes: 2

MK_Dev
MK_Dev

Reputation: 3333

I suggest you start with using "simple" tools like Firebug and Developer Tools to see where each element gets its styles.

Right click the element you want to view styles for, select "Inspect with Firebug" and look in the right pane under "Styles" tab to see element's applied and overriden styles and which line they're coming from.

Upvotes: 1

Related Questions