A while back, I inquired about creating a black box with padding around a two-line headline. The solution worked well, except for older versions of Internet Explorer. However, in Firefox, there are occasional issues with the display looking jagged. This occurs every other headline or when scrolling up and down. It's uncertain if this is visible to all Firefox users, so feel free to check it out for yourself:
I attempted to recreate the problem on a fiddle, but since it depends on the surrounding context, replicating the entire blog would be necessary. Below is the CSS code (including some browser-specific hacks due to inconsistent displays):
#page .headline-black {
border:none;
/* 2x "Padding" left */
border-left: 50px solid #000;
}
#page .headline-black h1 {
display: inline;
background-color: #000;
padding: 8px 0 9px 0;
padding: 8px 0 8px 0\9;
font-size: 22px;
line-height:44px;
}
@-moz-document url-prefix() {
#page .headline-black h1 {
padding: 8px 0 7px 0;
}
}
#page .headline-black h1 .indent {
position: relative;
/* "Padding" left */
left: -25px;
}
#page .headline-black h1 .heading,
#page .headline-black h1 .heading a {
color: #fff;
background: #000;
}