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):
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):