Congratulations to the Penny Arcade guys on their site “reboot“. The new layout looks to be a variation on the one first introduced over at the Child’s Play site and I must say, it’s a beauty.
Good job on the conversion guys, although the news post headlines overrun their alotted space, at least on Gecko-based browsers on Linux. Still, good on ya.
Web Geek Moment
If you don’t care about the nitty-gritty of CSS-based web design, please ignore the following blurb.
See below for an example of the error I’m talking about:
This is due to the fact that they’ve statically defined the height of the containing <div>. As per their stylesheet:
.newspost .fullpostheader {
color: inherit;
background-color: #494949;
border: 1px solid #F9A906;
height: 60px;
margin-bottom: 0px;
}
They obviously did this so that the height of the <div> would be equal to the height of their avatars. This web design trick will work as long as the size of the fonts used by peoples’ browsers don’t exceed a total of 60px. If, as in my case, the sizes exceed 60px, you’ll see the error in question.
If I were the web guru responsible for the new layout, I’d look to statically define height of the author and timestamp elements – the postheader element is already defined as 18px – instead of simply styling them with font-size: smaller;. A glance or two at the line-height property of those elements might be in order as well.
Just my 2¢
