Width of rollover div is different than container

Question

I'm having an issue getting Chrome and Safari to correctly display the rollover div above my container image. What I have done works sometimes, but when resizing the page, you can sometimes see a little gap of 1 or 2 pixels between the rollover div and the image container.

I made a demo here: http://jsfiddle.net/eJNsS/9/

Screenshot

HTML

<div id="related_projects">
    <a href=#  ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image"  /></div><h2 class="transparent_font">IMG1</h2></div></a>          
    <a href=#  ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image"  /></div><h2 class="transparent_font">IMG2</h2></div></a>          
    <a href=#  ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image"  /></div><h2 class="transparent_font">IMG3</h2></div></a>          
    <a href=#  ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image" /></div><h2 class="transparent_font">IMG4</h2></div></a>           
    <a href=# ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image" /></div><h2 class="transparent_font">IMG5</h2></div></a>            
    <a href=#  ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image" /></div><h2 class="transparent_font">IMG6</h2></div></a>           
    <a href=# ><div class="thumbnail_image_related_project"><div id="image"><img width="300" height="173" src="http://www.gulfster.com/Lessern/Gulfsterhat.jpg" class="attachment-post-thumbnail wp-post-image" /></div><h2 class="transparent_font">IMG7</h2></div></a>            

CSS

#related_projects {
    background-color :#FFFF44;
    margin-bottom: 20px;
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    margin-bottom: 20px;
    display: block;
    margin-top: 2%;
}
#related_projects .thumbnail_image_related_project {
    width: 23%;
    position: relative;
    float: left;
    top: 0;
    left: 0;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 0%;
    margin-bottom: 2%;
    overflow: hidden;
    line-height: 0;
}
#related_projects img {
    width: 100% !important;
    height: auto;
}
#related_projects p, #categories_container #left p {
    text-align: left;
    color: black;
    font-family: HermL, Arial, sans-serif;
    font-size: 17px;
    line-height: 23px;
    margin-bottom: 20px;
}
#link_description {
    float: left;
    width: 98%;
    margin-left: 1%;
    margin-right: 1%;
}
#link_description #link {
    width: 50%;
    float: right;
    color: black;
    font-family: HermL, Arial, sans-serif;
    font-size: 17px;
    line-height: 23px;
}
#link_description #link a {
    color: #666666;
    font-family: HermL, Arial, sans-serif;
    font-size: 17px;
}
#link_description #link a:hover {
    color: #22B573;
    font-family: HermL, Arial, sans-serif;
    font-size: 17px;
}

/* THUMBNAIL PICTURES
-------------------------------------------------------------- */

.thumbnail_image_related_project .transparent_font {
    line-height: 1.25em;
    position: absolute;
    top: 0;
    left: 0;
    color: black;
    background-color:white; 
    width: 92%;
    padding-right: 3%;
    height: 100%;
    padding-left: 5%;
    opacity:1;
    filter: alpha(opacity=0);
}
.thumbnail_image_related_project h2 {
    padding-top: 30px;
    text-align: left;
    color: black;
    font-family: HermL, Arial, sans-serif;
    font-size: 17px;
    line-height: 23px;
}
h2 {
    margin:0px;
}

jQuery

$("#slider").hover(
    function(){
        $(".caption").stop().animate({'opacity' : '0.9'}, 200);
    },
    function(){
        $(".caption").stop().animate({'opacity' : '0'}, 100);
    }
);

$(".thumbnail_image_related_project").hover(
    function(){
        $(this).children(".transparent_font").stop()
               .animate({'opacity' : '0.7', 'padding-top': '10px'}, 300);
    },
    function(){
        $(this).children(".transparent_font").stop()
               .animate({'opacity' : '0', 'padding-top': '30px'}, 300);
    }
);

Thanks for helping

Answer 1

I changed your CSS a little bit and moved some CSS properties to focus your links containers within the #related_projects. The links didn't have 100% width and height of their contents the way you had it.

This code works for me, let me know if that's what you were looking for. You would have to fix your margins, though.

Also instead of putting the padding on the h2 tag, I changed your markup and put it on spans within the h2.

updated jsFiddle

Edit: the issues is fixed in Chrome, however you can still see it in Safari.

Edit2: Updated jsFiddle, I can't see the problem on my end both in Chrome and Safari

Answer 2

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:

1. The absolute positioning of the h2 tag. Even when using top:0; left:0, this can still introduce a rounding error. When this happens, the h2 is displayed at a slight offset, so that it's not lined up consistently with the img tag.
2. 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

Updated demo

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 add box-sizing: border-box; (as well as the -moz- and -webkit- versions). This won't work for IE7 or earlier. Demo using box-sizing.
• Remove the horizontal padding from the h2 tag, and add a text-indent to simulate the left padding (if that's adequate). Demo using text-indent.
• Remove the horizontal padding from the h2 tag, and add a wrapper element inside or outside of the h2 tag, with the outer element having width:%100; position:absolute;, and the inner element having padding: 0 3% 0 5%;. Typically this would be done by adding a span inside the h2 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.