StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<blockquote> <p>What method / tools should I use to pick apart which styles </p> </blockquote> <p>For Firefox, there's Firebug plugin. For Chrome and IE hit <kbd>F12</kbd> or <kbd>CTRL</kbd>+<kbd>SHIFT</kbd>+<kbd>I</kbd> for the built-in debugger. For Opera, there is the built-in Dragonfly (i forgot the hot-key). Safari <s>.. I don't know.</s> @prodigitalson says it's the same as Chrome.</p> <blockquote> <p>which styles are coming from where</p> </blockquote> <p>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.</p> <blockquote> <p>how best to resolve any styling conflicts? </p> </blockquote> <p>in CSS, there's what we call "<a href="http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/" rel="nofollow">specificity</a>". 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.</p> <blockquote> <p>And why would the problems with the menu be different between browsers?</p> </blockquote> <p>err.. browser inconsistencies? IE has a pretty weird box model (especially in the old versions). try adding a doctype like <code><!DOCTYPE html></code> 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 "<a href="http://en.wikipedia.org/wiki/Quirks_mode" rel="nofollow">Quirks Mode</a>"</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload