Menu
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?
867
block elements with a width of auto (the default) will always expand to fill the entire width available to them.
Two commonly used block elements are: <p> and <div> . The <p> element defines a paragraph in an HTML document. The <div> element defines a division or a section in an HTML document. The <p> element is a block-level element.
Block element properties: The default width of a block-level element is the length of the page. You can set the height and width of block-level elements in CSS. Block elements are used to organize large sections of the HTML page.
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 */
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
