Pixel rounding errors
The h2
tag is not always entirely covering the image beneath it. The black line is the part of the image that's not covered. This is due to pixel rounding errors that occur when the content is scaled.
There are 2 places where a noticeable pixel rounding error is occuring:
- The absolute positioning of the
h2
tag. Even when usingtop:0; left:0
, this can still introduce a rounding error. When this happens, theh2
is displayed at a slight offset, so that it's not lined up consistently with theimg
tag. - Splitting up the total width of the
h2
tag into 8% for the combined horizontal padding and 92% for the interior content. In effect, the combined % values do not always add up to 100% when scaled.
Either one of these by themselves causes inconsistent rounding errors to occur between the h2
tag and the img
tag. And inconsistencies between the 2 elements tend to be noticeable visually.
Solutions
The key concept for avoiding this inconsistency is to ensure that the h2
tag has the exact same rounding errors as the img
tag. There's no practical way to entirely avoid rounding errors of this sort, but as long as they're consistent between the 2 elements, they won't be noticeable in this case.
To fix #1, add position:relative;
to the img
tag. Any rounding errors in the relative positioning of the img
tag will be consistent with the rounding errors in the absolute positioniong of the h2
tag (since their positioning is relative to the same element). This essentially cancels out the rounding errors caused by the absolute positioning.
CSS added
#related_projects img {
position: relative;
...
}
To fix #2, use one of the following approaches:
- Change the width of the
h2
tag to 100% and addbox-sizing: border-box;
(as well as the -moz- and -webkit- versions). This won't work for IE7 or earlier. Demo usingbox-sizing
. - Remove the horizontal padding from the
h2
tag, and add atext-indent
to simulate the left padding (if that's adequate). Demo usingtext-indent
. - Remove the horizontal padding from the
h2
tag, and add a wrapper element inside or outside of theh2
tag, with the outer element havingwidth:%100; position:absolute;
, and the inner element havingpadding: 0 3% 0 5%;
. Typically this would be done by adding a span inside theh2
tag.
Any of the above approaches prevent this particular rounding error from occurring. The updated demo mentioned above uses box-sizing
. As long as support for IE7 or earlier isn't needed, this is probably the most elegant fix for #2, and it doesn't require adding additional HTML elements.
CSS removed
.thumbnail_image_related_project .transparent_font {
width: 92%;
...
}
CSS added
.thumbnail_image_related_project .transparent_font {
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
...
}
If support for IE7 or earlier is required, and text-indent
isn't adequate, and editing the static HTML isn't an option, then use JavaScript or jQuery to inject a wrapper element.