Question

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. What am I missing?

Answer 1

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;}