Forum Poor CSS method used by vB (mixing exact pixel widths with %- WITH FIX)
 

I have just taken the first, very big step to styling my forum. First step was to simply wrap my new layout around vB and work from the inside out.

Easily done.

However I have now bumped into what I can only explain as an oversight in the front-end developers.

The width of the content area of my forum is 868px, and I ran into the following problem:
Attachment 41212

In the screen shot there are 2 <span>s which are supposed to be floated side by side, one at 49% wide with a 10px margin on the left (to inset it a bit) and another which is 50% wide.

What's intended is that the 1% missing from the defined width is supposed to accommodate the 10px margin, however, when the users reduces the forum display area (which I have to 868px) the 1% "free" for width is less than 10px, so you have 50% + 49% + 10px (10px being >1%) and as width, margin and padding all contribute to the overall "width" of an element, and the 2 elements are bigger than 100%, so they don't fit and the latter goes to the next line.

Suggested fix:

Float the second span right and remove width declaration (it's only a checkbox)

or

You could swap the two <span>s around and apply this CSS:
HTML Code:
.postdate old {
float: none;
margin-right: 80px;
margin-left: 10px;
}

.nodecontrols {
float: right;
}
The advantages of this method is that it will cause the 1st span to take up all space apart from a few fixed pixels for the second span with the checkbox.
These methods are done by editing postbit.css and the postbit templates.

I hope there are no more instances like this, I'm using a narrow layout as my forum is tailored to netbooks/slate pcs, where it is not uncommon to have a max resolution of 1024 x 600 px.
Attached Images

• http://vb.ma7room.com/jpg.gif width-issue.jpg&lrm; (84.7 KB)