Right Corner Ribbon not locate correctly

HTML & CSS
1

I have left and right corner ribbon: Featured & New. Left Ribbon locate correctly but not right ribbon.

Any idea how to show right ribbon correctly?

http://jsfiddle.net/wQuUG/4/

.post-block-out{width:100%}.post-block{width:94.9152542%;padding:2.3214286%}
.feature-bg{width:560px;background:url("http://thejobs.com.my/mod/images/block_topbg_featured.png") repeat-x top #FFF;margin:0;padding:13px;border:1px}
.post-block{position:relative}.new-ribbon-list{height:60px;width:60px;position:absolute;top:-4px;right:-5px;z-index:750;background:url("http://thejobs.com.my/mod/images/new-ribbon.png") no-repeat}.featured-ribbon{height:70px;width:70px;position:absolute;top:-5px;left:-5px;z-index:750;background:url("http://thejobs.com.my/mod/images/premium-ribbon.png") no-repeat}
2

Hi,

Your right image is 120 x 120 with the ribbon in the middle unlike the other image which was 70 x70! You’d have to offset it to make it fit.


.new-ribbon-list {
    background: url("http://thejobs.com.my/mod/images/new-ribbon.png") no-repeat 0 0;
    height: 121px;
    position: absolute;
    right: -37px;
    top: -34px;
    width: 121px;
    z-index: 750;
}
3

Thanks for reply. I rescale the image to 60x60 and here jsfiddle: http://jsfiddle.net/alouty/wQuUG/6/

4

That seems to be working now :slight_smile:

5