CSS Position Problem

Discussion in 'CSS' started by adzeds, Aug 25, 2010.

0
  1. #1
    We are running into problems with IE and Firefox..

    We are floating a flag over our images, such as 'as worn by' and 'exclusive'.. These appear nicely in the bottom right hand corner in FF, but in IE they stay in the centre of the image..

    Here is the CSS involved.. Hope someone can help.

    
div.productFlag {
	position:absolute;
	right:0px;
	margin-top:-84px;
	display:block;
	z-index:1;
}

div.hot {
	width:77px;
	height:77px;
	background:url(images/flags_sprite.png) 0px -360px no-repeat;
}
    Code (markup):
     
    adzeds, Aug 25, 2010 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Wrap the image and flag in a container that has relative positioning, then you can place the flag in the corner with absolutely positioning.
    
<html>
<head>
<style type='text/css'>
.image {
   position: relative;
   float: left;
}

.flag {
   bottom: 0;
   position: absolute;
   right: 0;
}
</style>
</head>
<body>
<div class='image'><img src='image.jpg'><img class='flag' src='flag.jpg'></div>
</body>
</html>
    Code (markup):
     
    Cash Nebula, Aug 27, 2010 IP