开发者

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% 
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜