A plugin or tool to show what elements on a page are effecting other elements?

I have a bit of an issue with design where I have a list item that has taken it on itself to be the far higher than the others. I have a feeling this is because of another element in the design.

I use firebug sometimes and chrome developer tools the rest of the time.

These tools can be used to see what the height of something is, or what css styles are effecting the object but what these tools don't do however is show how other objects are effecting other objects.

Has anybody come across a tool which shows the relationship objects in a design are having on each other? Its a long s开发者_JAVA百科hot, but if there were a place to find out it would be here at SO.

Thanks.

---

Have a look at webdeveloper available for Chrome and Firefox. This is a very extensive plugin but should be able to do what you need.

Install it > go to the page you want to debug > Cycle trough various Outline options. Start off with "Outline block level elements" and work your way from there.

---

Do tell me if I misunderstood your question, but with either Firebug or the Chrome Developer Tool, you should be able to inspect the nesting of different elements in your design, and see how a design will look after you delete one of those elements.

The only tricky part is learning how to use those tools, and for that I suggest you watch some youtube videos. For me at least, that's the way I've learned. Unless someone can show you in person, the next best alternative is someone showing you how those tools work through a video.