CODEWITHSUNDEEP
cssgoogle-chromecss-position
Michael Stone
Michael Stone

Reputation: 950

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 accepting 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.

Upvotes: 0

Views: 1828

Answers (2)

Zydeco
Zydeco

Reputation: 530

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.

Upvotes: 1

Ben L.
Ben L.

Reputation: 786

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.

Upvotes: 1

Related Questions