Board Thread:Support Requests - Getting Technical/@comment-104430-20130910202156/@comment-188432-20130911014316

Okay, I think I've done about as much as possible without actually having access to your CSS files.

Here's the basic deal with most infoboxes.

In the first place, you have to know what mean when you say. That means you have to go to your CSS and see if a class called "infobox" is defined in any way. At your wiki it was, so I just sidestepped it completely to avoid conflicts.

You also have to know what the basic structure of an infobox is. Most of the time, and certainly in your case, an infobox is is a thing that has two columns — a left side with a label, and a right side with a value for the label. If you want an infobox to be 200px, that means that you have to define at least one of the two sides as being 100px so that the two sides will be equal in width. It's not enough to say that the whole width is 200px. You actually have to say, this one column is 100px.

So what I've done is split up your variables into two halves — a left sideband a right side. If you look at your code you'll see that I've consistently defined the left side as being 100px, which in a 200px overall width means that the other side is automatically 100px. That's a terribly important step in making sure you have overall width control.

The other thing I've done is to give proper colspans for the things that go across the whole box — the titles and picture. If your basic structure is a two-column box, then things that span across must have   because there's a third column of a few pixels that separates the two main columns. A lot of people assume that in a 2-column setup, things that go across the whole width must be set to, but this fails to account for the "separator column". A simpler way of looking at it is that the colspan for things that go the whole way across is total columns + 1.

And the final thing that was really gunking things up was that you were trying to squeeze things into spaces they just wouldn't fit. In the first place, you had so many different elements set to have at least one margin of 1em that these ultra-wide margins were competing with each other for space, and the table just broke. 1 em is an insanely large margin in any kind of infobox. I mean it's huge. So I pulled all that right back.

The other big things were your graphical elements. The little templates like 2010, Alt, and Com. All of these had widths in excess of 100px. The real culprit was, which had a defined width of something like 260px. Well, obviously you can't put something like that in a space that's only meant to hold 100px. So I narrowed all these to 90px width and took away their ridiculously large 1em margins.

Now it pretty much all fits, but there's more tweaking that could be done. There's some issues around your image handling that could be corrected, but that's best done through CSS. And really, there's too much in the way of inline CSS; most of the styling should be pulled back into your Common.css.

You'll also need to go back and make all sure that all your little type and genre templates have dimensions like those now at and  for  to work properly in all contexts.