An element in your blog isn't behaving as you'd like or expect. You realize
that it could be affected by multiple styles (they call them 'cascading' for a
reason) some or all of which you can't easily see.
What you need to know is, what are the element's
current styles, after
all style sheets have been applied -- but how do you find that out?
Enter:
Page Spy [kachow!] It will show you all styles appplied
to any element in the document. When you're most interested in a single element,
this is the easy way to find it in Page Spy:
- Right-click on the element [in your document] that's in question and click
"Page Spy" in the IE context menu
- When it's window opens there will be a collapsed tree on the left
- The top-level node is always "doc" (Page Spy's psuedo-element that represents
the document object in the page you're spying.)
- Right-click on the "doc" node and choose "Locate srcElement" in Page Spy's context menu
- That will make it expand the tree to highlight the node representing the
element in the host document that you clicked.
- When you expand the selected node, in addition to nodes for any child elements there may be, there are 2
special nodes
- Attributes -- (pretty self-explanatory)
- Styles -- Shows the end effect of all styles, inline or in style sheets
- For each element, all relevant styles resolve to one value for each style
- That value dictates behavior of any given element
As you explore the tree you'll notice that many nodes cause a portion of the document
to render in the right side. Not all elements can be logically rendered in isolation,
and further, some may be hidden from rendering. Even so, you'll find most DIVs, TABLEs,
FORMs, IMGs, and others will render in isolation -- they are even isolated from their style
sheets.
Hopefully you'll find Page Spy to be both useful as well as educational.
A page with some aberant construction to practice spying