CODEWITHSUNDEEP
cssinternet-explorer-7
objects
objects

Reputation: 8677

Relative layout issue with IE7

Have a problem with relative positioned span and img not being correctly positioned in IE7. You can see the problem at:

http://bookgroupaustralia.obiweb.com.au/

The 'NEW' and 'SALE' spans should be top right of the title, and the cart image in the bottom right. They are correctly positioned in IE8,FF,Safari,Chrome. In IE7 they are appearing lowers than expected.

Upvotes: 0

Views: 153

Answers (1)

Phil.Wheeler
Phil.Wheeler

Reputation: 16848

IE7 doesn't appear to be picking up the margin correctly.

Try setting a position: relative; declaration on your productItem class. Then instead of setting margin values for your .listing span.badge classes, try setting the following values:

top: 0;
left: 0;

You'll also need to do the shopping cart icon (your img.cart class). Again, you want this image to be absolutely positioned at the bottom right corner of each list item:

.listing ul li.productItem img.cart, .listing ul li.productItemLast img.cart {
    bottom: 5px;
    cursor: pointer;
    position: absolute;
    right: 5px;
}

You may want to adjust the bottom and right positions a bit. That should take care of it.

Upvotes: 2

Related Questions