View Full Version : unwanted image borders in MSIE/Win

05-23-2005, 01:21 PM
I am having trouble with unwanted borders showing up around my buttons in MSIE/Win. I made oval buttons which are GIF files, and used them as links. in MSIE/OS X, there is no problem, nor is there a problem in Safari. However, when I look at my pages in MSIE/Win, there are big, rectangular, blue obnoxious squares around my groovy oval buttons. What is the best way to eliminate these using CSS? Thanks for your help!

05-23-2005, 01:28 PM
a img {border:none;}

05-23-2005, 03:13 PM
kept getting violations because I was using the deprecated border="0"

This helps so much!



05-24-2005, 06:55 AM
Thanks so much!!! And I'm glad this question helped somebody else too...

05-24-2005, 02:23 PM
I just checked my website on windows-the obnoxious blue border is indeed gone (and I am glad!) . however, there is a grey area around the oval button, I am presuming this is the remainder of the rectangular image. I thought that by making my oval buttons a GIF on a transparent backround that this would not happen.


again, on any of my macs, this isn't a problem. grrrr. Why does this happen only in MSIE/Win?

thanks again!

05-24-2005, 02:33 PM
You're using PNG, IE6 has no support for transparant PNG's. That's why you're seeing the cyan background.

05-24-2005, 10:19 PM
ah hah!- this makes sense. Having said that, what should I do? thanks again.


05-24-2005, 10:29 PM
I think you might get away with saving it as a JPG or GIF, however isn't there a bit of JS code which can be used to overome that lack of PNG support?

I'm sure I've seen it somewhere :confused:

05-25-2005, 12:29 AM
Or you could use this to emulate IE PNG Transparency

// Universal transparent-PNG enabler for MSIE/Win 5.5+
// http://dsandler.org
// From original code: http://www.youngpup.net/?request=/snippets/sleight.xml
// and background-image code: http://www.allinthehead.com/retro/69
// also:
// * use sizingMethod=crop to avoid scaling PNGs (who would do such a thing?)
// * only do this once, to make it compatible with CSS rollovers

if (navigator.platform == "Win32" && navigator.appName == "Microsoft Internet Explorer" && window.attachEvent) {
window.attachEvent("onload", enableAlphaImages);

function enableAlphaImages(){
var rslt = navigator.appVersion.match(/MSIE (\d+\.\d+)/, '');
var itsAllGood = (rslt != null && Number(rslt[1]) >= 5.5);
if (itsAllGood) {
for (var i=0; i<document.all.length; i++){
var obj = document.all[i];
var bg = obj.currentStyle.backgroundImage;
var img = document.images[i];
if (bg && bg.match(/\.png/i) != null) {
var img = bg.substring(5,bg.length-2);
var offset = obj.style["background-position"];
obj.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+img+"', sizingMethod='crop')";
obj.style.backgroundImage = "url('/images/spacer.gif')";
obj.style["background-position"] = offset; // reapply
} else if (img && img.src.match(/\.png$/i) != null) {
var src = img.src;
img.style.width = img.width + "px";
img.style.height = img.height + "px";
img.style.filter =
"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+src+"', sizingMethod='crop')"
img.src = "/images/spacer.gif";


(Thanks BradyJ :thumbsup: )


05-25-2005, 12:31 AM
Thanks Gary, now I can use that funky firefox png in IE :)

save as .js and put in the head?

Bill Posters
05-25-2005, 08:54 AM
Given that it's such a basic image on a flat background, there's very little point in using PNG24 and going to the effort of adding js to make the alpha transparency work in MSIE/Win.
PNG24 can be a great format, but there's no benefit in using for the buttons on your page. Being so basic, you could more easily use either a solid GIF, a GIF with transparency or a PNG8, either solid of with transparency.

For future reference, there are plenty of tutorials available online on how to make transparent gifs. (The process is pretty much identical in Photoshop for creating PNG8 images.)

I took a minute to grab and adjust your button images (and logos) and resaved them as PNG8 with transparency. You can swap them in and you won't need to change anything else. You also won't need to add the alpha transparency javascript as browser support for the more basic PNG8 is fine in all major (and most minor) browsers.


The same can/should be done with the Firefox logo.


Incidentally, there are a few issues with your css…

color: FFFFCC;
Hex colours require a preceding #.
color: #ffffcc;

border-style: "none"
No quotes around these values.

border-style: none;

.menulink a:link{text-decoration: underline; color: 000066;}

.menulink a:visited{text-decoration: underline; color; FFFFCC:}
.menulink a:visited selector repeated.
Remove one, being sure to maintain the :link, :visited, :hover, :active order of the declarations.

05-25-2005, 09:21 AM
Just to toss it out there:

05-25-2005, 11:02 AM
Hey, thanks for all of the help! as you can probably tell by now, I am quite new to all of this, but trying hard to learn as much as possible. You'll probably get more questions from me! I hope that one day I'll know enough to help others. till then, mucha thanks....