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

Tags: html,css

Problem :

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 shot, but if there were a place to find out it would be here at SO.


Solution :

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.

    CSS Howto..

    How to crop SVG file within HTML/CSS

    How to make a paragraph appear in a certain area in the page using Wordpress?

    How does Wired magazine achieve this thick underline link effect?

    How to edit jquery slider

    How to reverse a repeated image on blogger

    How to generate css using google chrome inspector to further use them?

    How to add a mobile optimised external CSS to a Shopify site

    CSS: How to set container size equal to background image size

    Google font - how to specific font-family If they have the same name?

    CSS how to get the: a img on top, insted of the first a href “”without floating

    I found another way of doing this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ul {list-style: none; margin: 0; padding: 0;} li {position: relative; overflow: hidden;} a {display: block;}...
    Read more

    How can I ensure that no other text is on the same line as my heading tag?

    How can I get the second line of text to hide and show on hover? CSS only

    How to center verticaly n inline containers with different font-size?

    HTML CSS: How to align grid to content area?

    How to move a div horizontal then vertical using css animation?

    How to insert a line break before an element using CSS

    How to include several nested CSS classes into rails .erb file?

    Have element show when .onclick and when the element has focus from tab

    In a text based browser game, how would I make a typewriter effect in the dialogue?

    How to change custom icon image on hover of the link next to it?

    how to add/remove a class from a link

    How do I prevent this double hover?

    How to change the CSS for all elements with a common identifier using Javascript?

    How do I use CSS and JS files within a HTML file being sent with Express?

    How does jQuery .fadeTo() work?

    How to track element movement and trigger function at specific spot?

    how to have css affect other divs in the same container

    How to apply css to an iframe

    How can I get this anchor link to look like a button

    How to send an HTML file with css?