Find out what HTML elements are forcing the page/block/section to be wide/tall
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}
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?
html css
edited May 27 '14 at 20:26
jackcogdill
3,18332043
asked May 19 '11 at 14:42
RoryRory
20.5k59156219
add a comment |
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?
html css
edited May 27 '14 at 20:26
jackcogdill
3,18332043
asked May 19 '11 at 14:42
RoryRory
20.5k59156219
add a comment |
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?
html css
edited May 27 '14 at 20:26
jackcogdill
3,18332043
asked May 19 '11 at 14:42
RoryRory
20.5k59156219
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?
html css
html css
edited May 27 '14 at 20:26
jackcogdill
3,18332043
asked May 19 '11 at 14:42
RoryRory
20.5k59156219
edited May 27 '14 at 20:26
jackcogdill
3,18332043
asked May 19 '11 at 14:42
RoryRory
20.5k59156219
edited May 27 '14 at 20:26
jackcogdill
3,18332043
edited May 27 '14 at 20:26
jackcogdill
3,18332043
edited May 27 '14 at 20:26
jackcogdill
3,18332043
3,18332043
asked May 19 '11 at 14:42
RoryRory
20.5k59156219
asked May 19 '11 at 14:42
RoryRory
20.5k59156219
asked May 19 '11 at 14:42
RoryRory
20.5k59156219
20.5k59156219
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
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 */
answered May 27 '14 at 20:17
squarecandysquarecandy
2,9062133
4
Good tip. Not seen thebody * ...trick before which helped me spot an offending element in about 5 seconds on a large page.
– Ben
Jul 8 '14 at 8:30
Worked for me, too. That, and searching forwidth: A_BIG_NUMBERas OP suggested yieldedbody { min-width: 600; }lurking in my css. Lesson/pseudo-answer: don't be too proud to consider the obvious answer.
– Bob Kaufman
Dec 29 '15 at 20:12
very nice trick. I used it even with margin: 0px; and helped me to find which element has extra width. Thanks!
– Iman Sedighi
Apr 12 '16 at 8:41
Great tip. Thanks.
– dgig
Apr 18 '17 at 21:04
1
I prefer to useoutline: 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.
– Joel Murphy
May 18 '17 at 16:00
add a comment |
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.)
answered May 19 '11 at 14:55
feeelafeeela
22.2k64865
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?
– Rory
May 19 '11 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
May 19 '11 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.
– Rory
May 19 '11 at 15:30
1
Gnn. outofbettersolutionshere Useoverflow:hiddenon the <TD> ;-)
– feeela
May 19 '11 at 15:34
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f6060417%2ffind-out-what-html-elements-are-forcing-the-page-block-section-to-be-wide-tall%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
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 */
answered May 27 '14 at 20:17
squarecandysquarecandy
2,9062133
4
Good tip. Not seen thebody * ...trick before which helped me spot an offending element in about 5 seconds on a large page.
– Ben
Jul 8 '14 at 8:30
Worked for me, too. That, and searching forwidth: A_BIG_NUMBERas OP suggested yieldedbody { min-width: 600; }lurking in my css. Lesson/pseudo-answer: don't be too proud to consider the obvious answer.
– Bob Kaufman
Dec 29 '15 at 20:12
very nice trick. I used it even with margin: 0px; and helped me to find which element has extra width. Thanks!
– Iman Sedighi
Apr 12 '16 at 8:41
Great tip. Thanks.
– dgig
Apr 18 '17 at 21:04
1
I prefer to useoutline: 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.
– Joel Murphy
May 18 '17 at 16:00
add a comment |
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 */
answered May 27 '14 at 20:17
squarecandysquarecandy
2,9062133
4
Good tip. Not seen thebody * ...trick before which helped me spot an offending element in about 5 seconds on a large page.
– Ben
Jul 8 '14 at 8:30
Worked for me, too. That, and searching forwidth: A_BIG_NUMBERas OP suggested yieldedbody { min-width: 600; }lurking in my css. Lesson/pseudo-answer: don't be too proud to consider the obvious answer.
– Bob Kaufman
Dec 29 '15 at 20:12
very nice trick. I used it even with margin: 0px; and helped me to find which element has extra width. Thanks!
– Iman Sedighi
Apr 12 '16 at 8:41
Great tip. Thanks.
– dgig
Apr 18 '17 at 21:04
1
I prefer to useoutline: 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.
– Joel Murphy
May 18 '17 at 16:00
add a comment |
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 */
answered May 27 '14 at 20:17
squarecandysquarecandy
2,9062133
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 */
answered May 27 '14 at 20:17
squarecandysquarecandy
2,9062133
edited Nov 27 '18 at 1:05
answered May 27 '14 at 20:17
squarecandysquarecandy
2,9062133
answered May 27 '14 at 20:17
squarecandysquarecandy
2,9062133
answered May 27 '14 at 20:17
squarecandysquarecandy
2,9062133
2,9062133
4
Good tip. Not seen thebody * ...trick before which helped me spot an offending element in about 5 seconds on a large page.
– Ben
Jul 8 '14 at 8:30
Worked for me, too. That, and searching forwidth: A_BIG_NUMBERas OP suggested yieldedbody { min-width: 600; }lurking in my css. Lesson/pseudo-answer: don't be too proud to consider the obvious answer.
– Bob Kaufman
Dec 29 '15 at 20:12
very nice trick. I used it even with margin: 0px; and helped me to find which element has extra width. Thanks!
– Iman Sedighi
Apr 12 '16 at 8:41
Great tip. Thanks.
– dgig
Apr 18 '17 at 21:04
1
I prefer to useoutline: 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.
– Joel Murphy
May 18 '17 at 16:00
add a comment |
4
Good tip. Not seen thebody * ...trick before which helped me spot an offending element in about 5 seconds on a large page.
– Ben
Jul 8 '14 at 8:30
Worked for me, too. That, and searching forwidth: A_BIG_NUMBERas OP suggested yieldedbody { min-width: 600; }lurking in my css. Lesson/pseudo-answer: don't be too proud to consider the obvious answer.
– Bob Kaufman
Dec 29 '15 at 20:12
very nice trick. I used it even with margin: 0px; and helped me to find which element has extra width. Thanks!
– Iman Sedighi
Apr 12 '16 at 8:41
Great tip. Thanks.
– dgig
Apr 18 '17 at 21:04
1
I prefer to useoutline: 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.
– Joel Murphy
May 18 '17 at 16:00
4
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
Jul 8 '14 at 8:30
Good tip. Not seen the
body * ... trick before which helped me spot an offending element in about 5 seconds on a large page.– Ben
Jul 8 '14 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.– Bob Kaufman
Dec 29 '15 at 20:12
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.– Bob Kaufman
Dec 29 '15 at 20:12
very nice trick. I used it even with margin: 0px; and helped me to find which element has extra width. Thanks!
– Iman Sedighi
Apr 12 '16 at 8:41
very nice trick. I used it even with margin: 0px; and helped me to find which element has extra width. Thanks!
– Iman Sedighi
Apr 12 '16 at 8:41
Great tip. Thanks.
– dgig
Apr 18 '17 at 21:04
Great tip. Thanks.
– dgig
Apr 18 '17 at 21:04
1
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.– Joel Murphy
May 18 '17 at 16:00
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.– Joel Murphy
May 18 '17 at 16:00
add a comment |
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.)
answered May 19 '11 at 14:55
feeelafeeela
22.2k64865
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?
– Rory
May 19 '11 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
May 19 '11 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.
– Rory
May 19 '11 at 15:30
1
Gnn. outofbettersolutionshere Useoverflow:hiddenon the <TD> ;-)
– feeela
May 19 '11 at 15:34
add a comment |
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.)
answered May 19 '11 at 14:55
feeelafeeela
22.2k64865
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?
– Rory
May 19 '11 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
May 19 '11 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.
– Rory
May 19 '11 at 15:30
1
Gnn. outofbettersolutionshere Useoverflow:hiddenon the <TD> ;-)
– feeela
May 19 '11 at 15:34
add a comment |
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.)
answered May 19 '11 at 14:55
feeelafeeela
22.2k64865
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.)
answered May 19 '11 at 14:55
feeelafeeela
22.2k64865
answered May 19 '11 at 14:55
feeelafeeela
22.2k64865
answered May 19 '11 at 14:55
feeelafeeela
22.2k64865
answered May 19 '11 at 14:55
feeelafeeela
22.2k64865
22.2k64865
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?
– Rory
May 19 '11 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
May 19 '11 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.
– Rory
May 19 '11 at 15:30
1
Gnn. outofbettersolutionshere Useoverflow:hiddenon the <TD> ;-)
– feeela
May 19 '11 at 15:34
add a comment |
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?
– Rory
May 19 '11 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
May 19 '11 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.
– Rory
May 19 '11 at 15:30
1
Gnn. outofbettersolutionshere Useoverflow:hiddenon the <TD> ;-)
– feeela
May 19 '11 at 15:34
1
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?
– Rory
May 19 '11 at 15:04
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?
– Rory
May 19 '11 at 15:04
1
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
May 19 '11 at 15:11
@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
May 19 '11 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.
– Rory
May 19 '11 at 15:30
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.
– Rory
May 19 '11 at 15:30
1
1
Gnn. outofbettersolutionshere Use
overflow:hidden on the <TD> ;-)– feeela
May 19 '11 at 15:34
Gnn. outofbettersolutionshere Use
overflow:hidden on the <TD> ;-)– feeela
May 19 '11 at 15:34
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f6060417%2ffind-out-what-html-elements-are-forcing-the-page-block-section-to-be-wide-tall%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
