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.

Thanks.



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 create a margin between two seperate divs?

    How do I align the list items in an
      with my

      ?

    How do I get my tabs to line up properly using CSS?

    how to make my horizontal css dock navigation to vertical

    How to make footer invisible on making screen size smaller?

    How do I style a div with inner floats to expand horizontally to allow all inner floating divs to fit?

    How do I fix the image size when changing to another image?

    How to create rating system using only css [duplicate]

    How to avoid gaps using Isotope with Masonry layout sortby random

    how to make sure image shows over my twitter bootstrap 3 input field

    loading images to show them offline

    How could I use the html a tag to change div width and height?

    How to make the content of a span wrap onto the next line in an embedded

    How to put text and image in a same line?

    How to make a responsive mosaic css fullscreen width

    How do I center text in a span?

    How to put text on placeholder image

    How to use css to keep horizontal visible when vertical is auto?

    How can I take pseudo:after { content: “Value”; } value dynamically in this snippet?

    how to have the text under the logo css

    How to change URL inside CSS?

    How to make ul nav fill the entire bottom of page evenly (without table display)

    How to layout these elements via HTML/CSS circumventing DOMPDF's lack of float?

    Bootstrap: Background image z-index to show it above bg color

    How to prevent corners on CSS box-shadow?

    How to make the float left and float right on the same line?

    How to make css jQuery thumbnail slides loop

    How to animate through stacked images Javascript

    how do you add footer? like all right's reserved for a CSS design?

    Show all text document