Find out what HTML elements are forcing the page/block/section to be wide/tall

Question

I am trying to change an HTML page (with lots of CSS). There is a <table> that is 'too wide'. I can't see why it is being wide. One of the subnodes of it must have some sort of width: $A_BIG_NUMBER; css rule that is make it wide, which then propigates up and makes the whole thing wide.

My usual approach is to manually look at all the elements (or ones I think responsible) to try to find this css rule.

Is there an easier way?

Answer 1

I run into these "mystery" width issues quite a bit - especially when trying to wrangle an open-source theme where I'm not the author of most of the code.

Try adding some wireframes to your CSS. Use this in addition to using a developer web inspector to find the culprit (safari, IE, chrome all now come with developer tools out of the box, firebug for firefox).

body { margin: 30px; }
/* Optional: Add some margin to the body to add space and 
see where your offending elements cross the line */

body * { border: 1px solid red; }
/* add a border to all other elements on the page */

body * { outline: 1px solid red; }
/* Alternate: add an outline  to all elements on the page. Won't effect box model */

div#offending-area * { outline: 1px solid red; }
/* If you've got some idea about where the issue is, drill down further than the body tag */