CSS: help positioning a clipped image in Chrome/Safari. IE and FireFox look good

Clipping an image with CSS and everything looks great with FireFox and IE7+, but Chrome and Safari are not acceptin开发者_如何学编程g the position:absolutevery nicely. Instead of staying "relative" to the parent containers, it's in fact using the absolute positioning coordinates.

I've tried putting containers and positioning those in different ways, but I'm not having any luck.

Unfortunately, I can not provide any example directly.

Here's the HTML:

<div class="grayBkgd marginTop10Px grid_3 grayVideoContainer alpha">
    <a href="?ytID" class="noUnderlineHover curser-pointer">
        <div class="clip">
            <img src="an image" alt="" />
        </div><br />
        <div class="videoTextInfo">
            <p class="videoTitle">Optical Windows Overview
            </p>
        </div>
        <p class="grayText" style="float:right">0:37 mins</p>
    </a>
</div>

The CSS:

<style type="text/css">
        .grayVideoContainer{
            text-align:center;
            padding:3px 0 5px 0
        }
        .clip img {
            position:absolute;
            margin-left:-58px;
            clip:rect(12px 120px 79px 0)
        }
        .videoTextInfo {
            min-height:60px;
            padding:70px 5px 0 5px;
            color:#000
        }
        .grayText {
            float:right;
            margin-top:-10px;
            padding:0 5px 0 0   
        }
</style>

Any ideas?

I tried looking for JQuery plugins to clip the image and see if I'd have an easier time positioning the elements, but I didn't have very much luck finding any promising plugins.

---

Are the parent containers positioned at all? If not, try to add position: relative; to the parent of the child that's position: absolute;. The relative positioning won't change the parent's position in the flow of your site but will allow you to have absolutely positioned children.

---

An absolutely positioned element's position should be specified with top, left, right, and/or bottom.

See: http://www.w3schools.com/css/pr_class_position.asp

The margin-left on .clip img I might expect not to work.