15

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?

4 Answers 4

25

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 */
5
  • 4
    Good tip. Not seen the body * ... trick before which helped me spot an offending element in about 5 seconds on a large page.
    – Ben
    Commented Jul 8, 2014 at 8:30
  • Worked for me, too. That, and searching for width: A_BIG_NUMBER as OP suggested yielded body { min-width: 600; } lurking in my css. Lesson/pseudo-answer: don't be too proud to consider the obvious answer. Commented Dec 29, 2015 at 20:12
  • very nice trick. I used it even with margin: 0px; and helped me to find which element has extra width. Thanks! Commented Apr 12, 2016 at 8:41
  • Great tip. Thanks.
    – dmgig
    Commented Apr 18, 2017 at 21:04
  • 1
    I prefer to use outline: 1px solid red; as it doesn't affect the box model. All of your document elements remain where they'd normally be instead of moved slightly by the border. Commented May 18, 2017 at 16:00
2

If you are using Chromium, just right-click, select "Check Element" (or whatever, its "Element überprüfen" in the german version). Afterwards an "inspector" opens. There you can select the table tag. On the right you'll find a list with recognized CSS-statements incl. the filenames. (It's a bit like Firebug for Firefox, just much faster.)

4
  • 1
    Yes, I'm using the 'Element Inspector', however that still involves a lot of manual checking, since I have to go through all the sub-elements. Is there not some extension that shows the sizes? Commented May 19, 2011 at 15:04
  • 1
    @Rory If you mouse-over the tags within the inspector view, the elements are pretty highlighted, so one can see at a glance, what are their dimensions. There is also a "Metrics"-tab below the styles-view in the right panel of the inspector.
    – feeela
    Commented May 19, 2011 at 15:11
  • Yeah the metrics is good for seeing the size of certain elements (I've also been looking at the 'Computer Style'), however I still need to manually go over all elements. Commented May 19, 2011 at 15:30
  • 1
    Gnn. outofbettersolutionshere Use overflow:hidden on the <TD> ;-)
    – feeela
    Commented May 19, 2011 at 15:34
2

This was the very good article for finding out the element which is overflowed in the website. The javascript code below is for that,

var docWidth = document.documentElement.offsetWidth;

[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

Check out this link, https://css-tricks.com/findingfixing-unintended-body-overflow/

0
2

Another method is to open the debugger/inspector (Ctrl-Shift-I in Chrome) and then start deleting elements via the Elements tab. Then watch for when the page "jumps into place" (= is no longer too wide). When that happens you know you just deleted the offending element :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.