BlackBorder around PNG Images in IE 7

When Displaying PNG Images in IE7 , I was facing the problem of a black borders around the text in the
png images .

Below solution I used to resolve the problem,
Convert png image to png 8
Open image in the Photoshop go to the menu option 'Save for Web & Devices ' Choose the below settings
in there

1.  PNG-8,
2.  Selective
3.  Diffusion
4.  Check the  Transparency
5.  Colors: 256
6.  Matte: None
7.  No transparency Dither
8.  Checked  Interlaced
9.  Convert to sRGB

Click on done and saved the image

Rounded Corner Menu in CSS compatible with all browsers including IE code Example

Below css3 code can be used to round any html element (div,ul...etc)     

     

                 -webkit-border-radius: 15px;

 -moz-border-radius: 15px;
  border-radius: 15px;

Sample Code 
in HTML

<div class="menu">
<ul>
                      <li><a href="index.html" >HOME</a></li>
                        <li><a href="services.html">ABOUT US</a></li>
<li><a href="services.html">PRODUCTS</a></li>
                        <li><a href="clients.html">CLIENTS</a></li>
                        <li><a href="contact-us.html" >CONTACT US</a></li>
                </ul>
</div>

CSS



.menu{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:15px;
font-weight:bold;

}

.menu ul{
background:#c89810;
height:50px;
list-style:none;
margin:0;
padding:0;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
behavior: url(border-radius.htc);
        -webkit-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
-moz-box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);
box-shadow: inset 0px 16px 0px 0px rgba(255, 255, 255, .1);

}


.menu li{
float:left;
padding:0px 0px 0px 51px;
}


.menu li a{
color:#FFFFFF;
display:block;
font-weight:bold;
line-height:50px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}

.menu li a:hover{
background:#C60;
color:#000;
text-decoration:none;
-webkit-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
box-shadow: inset 0px 0px 7px 2px rgba(0, 0, 0, .3);
}


.menu ul li:hover a{
background:#fccc3d;
color:#000;
text-decoration:none;
}

.menu li ul{
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:200px;
z-index:200;
}


.menu li:hover ul{
display:block;
}

.menu li li {
display:block;
float:none;
margin:0px;
padding:0px;
width:200px;
background:#F93;
}

.menu li:hover li a{
background:none;
}

.menu li ul a{
display:block;
height:50px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}


This will create a rounded corner menu , but this will work in all browsers except IE. To make it work in IE Create file named 'border-radius.htc'

and paste the below content in the file


--Do not remove this if you are using--
Original Author: Remiz Rahnas
Original Author URL: http://www.htmlremix.com
Published date: 2008/09/24

Changes by Nick Fetchak:
- IE8 standards mode compatibility
- VML elements now positioned behind original box rather than inside of it - should be less prone to breakage
Published date : 2009/11/18


<public:attach event="oncontentready" onevent="oncontentready('v08vnSVo78t4JfjH')" />
<script type="text/javascript">

// findPos() borrowed from http://www.quirksmode.org/js/findpos.html
function findPos(obj) {
var curleft = curtop = 0;

if (obj.offsetParent) {
do {
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
} while (obj = obj.offsetParent);
}

return({
'x': curleft,
'y': curtop
});
}

function oncontentready(classID) {
  if (this.className.match(classID)) { return(false); }

if (!document.namespaces.v) { document.namespaces.add("v", "urn:schemas-microsoft-com:vml"); }

this.className = this.className.concat(' ', classID);
var arcSize = Math.min(parseInt(this.currentStyle['-moz-border-radius'] ||
                               this.currentStyle['-webkit-border-radius'] ||
                               this.currentStyle['border-radius'] ||
                               this.currentStyle['-khtml-border-radius']) /
                      Math.min(this.offsetWidth, this.offsetHeight), 1);
var fillColor = this.currentStyle.backgroundColor;
var fillSrc = this.currentStyle.backgroundImage.replace(/^url\("(.+)"\)$/, '$1');
var strokeColor = this.currentStyle.borderColor;
var strokeWeight = parseInt(this.currentStyle.borderWidth);
var stroked = 'true';
if (isNaN(strokeWeight)) {
strokeWeight = 0;
strokeColor = fillColor;
stroked = 'false';
}

this.style.background = 'transparent';
this.style.borderColor = 'transparent';

// Find which element provides position:relative for the target element (default to BODY)
var el = this;
var limit = 100, i = 0;
while ((typeof(el) != 'unknown') && (el.currentStyle.position != 'relative') && (el.tagName != 'BODY')) {
el = el.parentElement;
i++;
if (i >= limit) { return(false); }
}
var el_zindex = parseInt(el.currentStyle.zIndex);
if (isNaN(el_zindex)) { el_zindex = 0; }
//alert('got tag '+ el.tagName +' with pos '+ el.currentStyle.position);

var rect_size = {
'width': this.offsetWidth - strokeWeight,
'height': this.offsetHeight - strokeWeight
};
var el_pos = findPos(el);
var this_pos = findPos(this);
this_pos.y = this_pos.y + (0.5 * strokeWeight) - el_pos.y;
this_pos.x = this_pos.x + (0.5 * strokeWeight) - el_pos.x;

var rect = document.createElement('v:roundrect');
rect.arcsize = arcSize +'px';
rect.strokecolor = strokeColor;
rect.strokeWeight = strokeWeight +'px';
rect.stroked = stroked;
rect.style.display = 'block';
rect.style.position = 'absolute';
rect.style.top = this_pos.y +'px';
rect.style.left = this_pos.x +'px';
rect.style.width = rect_size.width +'px';
rect.style.height = rect_size.height +'px';
rect.style.antialias = true;
rect.style.zIndex = el_zindex - 1;

var fill = document.createElement('v:fill');
fill.color = fillColor;
fill.src = fillSrc;
fill.type = 'tile';

rect.appendChild(fill);
el.appendChild(rect);

var css = el.document.createStyleSheet();
css.addRule("v\\:roundrect", "behavior: url(#default#VML)");
css.addRule("v\\:fill", "behavior: url(#default#VML)");

isIE6 = /msie|MSIE 6/.test(navigator.userAgent);
// IE6 doesn't support transparent borders, use padding to offset original element
if (isIE6 && (strokeWeight > 0)) {
this.style.borderStyle = 'none';
this.style.paddingTop = parseInt(this.currentStyle.paddingTop || 0) + strokeWeight;
this.style.paddingBottom = parseInt(this.currentStyle.paddingBottom || 0) + strokeWeight;
}

if (typeof(window.rounded_elements) == 'undefined') {
window.rounded_elements = new Array();

if (typeof(window.onresize) == 'function') { window.previous_onresize = window.onresize; }
window.onresize = window_resize;
}
this.element.vml = rect;
window.rounded_elements.push(this.element);
}

function window_resize() {
if (typeof(window.rounded_elements) == 'undefined') { return(false); }

for (var i in window.rounded_elements) {
var el = window.rounded_elements[i];

var strokeWeight = parseInt(el.currentStyle.borderWidth);
if (isNaN(strokeWeight)) { strokeWeight = 0; }

var parent_pos = findPos(el.vml.parentNode);
var pos = findPos(el);
pos.y = pos.y + (0.5 * strokeWeight) - parent_pos.y;
pos.x = pos.x + (0.5 * strokeWeight) - parent_pos.x;

el.vml.style.top = pos.y +'px';
el.vml.style.left = pos.x +'px';
}

if (typeof(window.previous_onresize) == 'function') { window.previous_onresize(); }
}
</script>


then in CSS add the below line


behavior: url(border-radius.htc);

Now this will work in IE as well.