How do I find out what is causing this very wide table?
Lately, I've been running into more and more poorly designed websites that do things like this Hudson Website The page is some 1600 pixels wide on my 90 degree rotated monitor, it means you have to scroll left<->right a LOT. Having firebug installed, I figured I'd just go fix it on the fly for reading, but that is proving harder than imagined.
I can't seem to locate what is causing it to be so wide. There is a <table width='100%'>
, but that should be 100% of the container, and I can't find a container that says "BE UNREASONABLY WIDE". So, I'm asking what tricks you use in firebug to figure out what is causing an element to have the size it has, specifically the width.
Edit:
Well, I'm still picking at it, and it turns out that
.wiki-content p {
margin: 10px 0;
padding: 0;
width: 850px; // I had to add this to make it readable, width was NOT defined
}
will make it readable, so something about the <p>
tag is causing it, but I don't see anything in the css that should make it this wide开发者_如何学C. What am I missing?
The page is wide because of the <pre>
elements.
At least on Firefox, you can fix it by adding the CSS rule:
pre {white-space:normal;}
You could run the page through a validator as a first step. E.g. http://validator.w3.org/
As an aside, I ran the master CSS of the linked site through the Flumpcakes optimizer, and got this result:
Before 64064
After 53832
Saving 10232
Percentage: 16%
精彩评论